8

I'm trying to implement the following HTML structure using HTML5 and CSS. The section elements have to be next to each other. The right section element must have a margin-left of 30 px and a fixed width of 220 px.

enter image description here

What I have so far is as follows:

HTML

<section id="section-left">My left section</section>
<section id="section-right">My right section</section>

CSS

#section-left {
   float: left;
}

#section-right {
   float: right;
   width: 220px;
   margin-left: 30px
}

My problem is that the left section does not fill the remaining space up to the right section element. My result looks as follows:

enter image description here

What is the problem here?

Said Savci
  • 818
  • 4
  • 14
  • 28

1 Answers1

4

Reverse the order of your sections and use this CSS:

#section-left {
    overflow:hidden;
}
#section-right {
    width:220px;
    margin-left:30px;
    float:right;
}

jsFiddle example

j08691
  • 204,283
  • 31
  • 260
  • 272
  • Can this be done without switching the order of the sections? That would very useful if you want the right section to go below the left section, using a media query that removes the float for smaller screen sizes. – Michiel May 05 '15 at 18:34