Question

So I’ve looked up stuff all over the internet and I can’t find the answer I’m looking for.

I’m just trying to make a 2 column layout for a part in my page with each column being the same width, 50% of the container.

Now for some reason when I set both divs to 50% and float:left, the second div wraps underneath. The closest thing I can get is floating the second div right and making width 49% but I’d like it to be 50% because I want to have them touching.

Here is a demonstration:

JSFiddle Example

So what am I doing wrong?

Answer 1

You define border to your DIV’s. Which add width to it for example 50% + 2px . So, use box-sizing: border-box;

Write like this:

div#textBooks,
div#info{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

check this http://jsfiddle.net/VbWbc/4/

Note: it’s work’s till IE8 & above.

For all browsers

Check this http://jsfiddle.net/VbWbc/5/
write like this:

div#info{
    width:50%;
    border:1px solid black;
    background-color:red;
    float:left;
}

div#textBooks{
    border:1px solid black;
    background-color:green;
    overflow:hidden;
}