CSS variable 2 Column Layout

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

The border widths are set to 1px, so they will be adding an additional 2px to each of the two div s. Therefore, your content is 4px too wide to fit into that div .

What you need to do is encase the content of your div s within another div , and apply the border to the inner div . Like seen in this fiddle .

Answer 2

Use CSS3 box-sizing: border-box;

Add this-

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing:border-box;

in #inf o and #textBooks

Fiddle

Answer 3

You define border to your DIV's. Which add width to it for example 5 0% + 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;
}