0

I am trying to create a webpage using html and css and I want to have some elements in the right side of the page, right below the main menu bar. They are intented to be images with links to commercials, useful sites etc. The css part is that one:

.gen_image
{
width:150px;
margin-bottom:40px;
border:2px solid orange;
margin-left:1250px;
}

The html part is that:

<a href="https://twitter.com/eudoxusgr" target="_blank"><img src="Twitter.png" class="gen_image"></a>
<a href="https://eclass.uoa.gr/" target="_blank"><img src="open_eclass_banner.png" class="gen_image"></a>
<a href="https://www.uoa.gr/" target="_blank"><img src="uoa_logo_gr.svg" class="gen_image"></a>

While they are put correctly in the right side of the page, when I try to add some elements in the center of the page they go down. How can I keep them in the same height at the right side of the page? I tried using float:right; but didn't worked for me because the images where put the one next to the others and I also tried adding position:relative; witch didn't prevent from going down when I add elements in the center.

Bill.G
  • 65
  • 2
  • 8
  • Use CSS Grid to control your layouts: https://css-tricks.com/snippets/css/complete-guide-grid/ – Diodeus - James MacFarlane Jan 04 '19 at 14:38
  • wrap your `.gen_image` inside another div, place that div on the right with `float:right;position:absolute;` and then on the wrapper use `display:flex;flex-direction:column;` – Ramon de Vries Jan 04 '19 at 14:40
  • So I should remove the .gen_image class, add all images in a div that will float right with absolute position and use the wrapper? I 'll give it a try, sounds good – Bill.G Jan 04 '19 at 14:44
  • Simply add a container to your links, put it a 100% width, and ``text-align: right`` to the inner elements. Or you can use absolute position to create your links container, put it to the right: 0, top: your header height, and add it some padding to let it breathe. Also if you go this way, don't forget to put your full Web page with a ``display: relative;`` style, so that your links container can be positionned according to this. – Alex Jan 04 '19 at 14:45
  • I made an example here: https://stackblitz.com/edit/angular-mf1j8s – Alex Jan 04 '19 at 14:52
  • https://stackoverflow.com/questions/5573855/how-to-make-a-stable-two-column-layout-in-html-css or https://codepen.io/anon/pen/qLoOBb – Pete Jan 04 '19 at 15:13
  • @RamondeVries that comment is terrible - why use float left and position absolute together? one will negate the other. Also if you use flex, then you don't need either float or position absolute (see codepen link in comment above) – Pete Jan 04 '19 at 15:15
  • Grid control is probably the most powerful overall solution. What the user needs likely does not qualify for that much power or complexity, however. Also, adopting grid control does not solve the underlying lack of CSS chops that led to this situation (such as using margin-left to attempt to position something on the right edge of the page). But ultimately it's up to the question maker if they want to tackle grid control. Go for it but be prepared to Learn it so you can use it correctly. – John Fantastico Jan 04 '19 at 15:29

0 Answers0