Question

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 said, it isn’t working. But I think it should be clear what it should do.

Answer 1

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)