css floating objects

This might be a very simple question, but I can't get it working.

All I want is to have 2 boxes (left and right), both should take 50% of the space and they should show up next to each other.

My current css looks like this:

#left {
  text-align: right;
  width: 50%;
  padding-right: 10%;
  float: left;
}

#right {
  width: 50%;
  text-align: left;
  padding-left: 10%;
}

#footer {
  clear: both;
}

The HTML looks like this:

<div id='left'>
  <h1>Left</h1>
  <ul>
    <li>Some Listing</li>
  </ul>
</div>

<div id='right'>
  <h1>Stuff</h1>
  <p>
    Stuff right
  </p>
</div>

<div id='footer'>
</div>

As I sai开发者_Go百科d, it isn't working. But I think it should be clear what it should do.

You have to take the padding and margins into account. Putting 50% on each <div> while specifying any padding other than 0, will cause the <div> to wrap. Try removing the padding on the <div>, or reducing the width from 50% to, say, 45% and see what it looks like.

There are 2 things I needed to do to make it work:

1) The width + padding of each div must only add up to 50%. Otherwise, in your original code, they add up to 60%, and both add up to 120%, and they can't fit in the 100% width of the body.

2) I have to also float the second div to the left, or make both div overflow: hidden

(i am still looking into why step 2 is needed)

A full style reset will make sure you avoid falling foul of anything that XSaint mentioned. Margins, Borders and padding will affect this.

So you should make sure that these elements have:

div {
  margin: 0;
  padding: 0;
  border: 0;
}

If you wish to have padding and borders, be sure to reduce the width of the elements accordingly. One document worth referencing is the box model, that picture is worth 1000 words:

http://www.w3.org/TR/CSS2/box.html

In the note below that diagram, it states that the width affects the width of the content box, not the padded, bordered or margined box. That is the box inside all the others.

you may either do what XSaint32 has suggested or remove the padding from the #left div and put another div #context with the padding inside the #left div. i.e)

Xsaint and Danny Staple gave the best answers so far.

Just complementing their answers, you can also use a property named "box-sizing" in order to ensure correct calculations.

I even recommend adding this property to your (and everybody else) CSS reset, hence Webkit, IE, Opera and Mozilla tends to use different box models.