How to place two section elements next to each other using CSS? [duplicate]

Question

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.

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:

What is the problem here?

Answer 1

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