Divide div into 2 columns using CSS

Question

I am trying to split a div into two columns using CSS, but I have not been able to run it yet. My basic structure is as follows:

<div id="content"> <div id="left"> <div id="object1"></div> <div id="object2"></div> </div> <div id="right"> <div id="object3"></div> <div id="object4"></div> </div> </div> 

If I try to float the divs left and right to their respective positions (left and right), it seems to ignore the background color of the div content. And the other code that I tried from different sites, it seems, can not translate into my structure.

Thanks for any help!

Answer 1

When you float these two divs, the content of the div collapses to zero height. Just add

 <br style="clear:both;"/> 

after the #right div, but inside the contents of the div. This will make the contents of the div surround the two inner floating divs.

Answer 2

It's good for me. I divided the screen into two halves: 20% and 80%:

 <div style="width: 20%; float:left"> #left content in here </div> <div style="width: 80%; float:right"> #right content in there </div> 

Answer 3

Another way to do this is to add overflow:hidden; to the parent element of the floating elements.

overflow: hidden will cause the element to grow in floats.

Thus, all this can be done in css instead of adding another html element.

Answer 4

The most flexible way to do this:

 #content::after { display:block; content:""; clear:both; } 

This works just like adding an element to #content:

 <br style="clear:both;"/> 

but without adding an element. :: after is called a pseudo-element. The only reason this is better than adding overflow:hidden; in #content, is that you can overflow absolute positional children and remain visible. In addition, it will remain visible. [/ P>

Answer 5

For some reason, I never liked cleaning approaches, I rely on float and percentage width for such things.

Here something works in simple cases:

 #content { overflow:auto; width: 600px; background: gray; } #left, #right { width: 40%; margin:5px; padding: 1em; background: white; } #left { float:left; } #right { float:right; } 

If you post content, you will see that it works:

 <div id="content"> <div id="left"> <div id="object1">some stuff</div> <div id="object2">some more stuff</div> </div> <div id="right"> <div id="object3">unas cosas</div> <div id="object4">mas cosas para ti</div> </div> </div> 

You can see it here: http://cssdesk.com/d64uy

Answer 6

Make child divs inline-block , and they will be located side by side:

 #content { width: 500px; height: 500px; } #left, #right { display: inline-block; width: 45%; height: 100%; } 

Watch Demo

Answer 7

The best way to split a div vertically is

 #parent { margin: 0; width: 100%; } .left { float: left; width: 60%; } .right { overflow: hidden; width: 40%; } 

Answer 8

I know this post is old, but if any of you are still looking for a simpler solution.

 #container .left, #container .right { display: inline-block; } #container .left { width: 20%; float: left; } #container .right { width: 80%; float: right; } 

Answer 9

Floats do not affect flow. I try to add

 <p class="extro" style="clear: both">possibly some content</p> 

at the end of the "wrapping div" (in this case, the content). I can justify this on a semantic basis, saying that such a paragraph may be needed. Another approach is to use clearfix CSS:

 #content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #content { display: inline-block; } /* \*/ * html #content { height: 1%; } #content { display: block; } /* */ 

Comment cheating is related to cross-browser compatibility.

Answer 10

None of the answers answer the original question.

The question is how to split a div into 2 columns using css.

All of the above answers actually insert 2 divs into one div to mimic 2 columns. This is a bad idea because you cannot pass content into 2 columns in any dynamic way.

So, instead of the above, use a single div that contains 2 columns using CSS as follows:

 .two-column-div { column-count: 2; } 

assign the above as a class to the div, and it will actually move its contents to 2 columns. You can go further and determine the gaps between the fields. Depending on the contents of the div, you may need to corrupt the word break values ​​so that your content does not break up between columns.

Answer 11

The best answer here is Question 211383

Nowadays, any self-respecting person should use the established method of "micro-cleaning" to clean the floating fields.

Answer 12

• Make the font size equal to zero in the parent DIV.

• Set the width% for each child div.

   #content { font-size: 0; } #content > div { font-size: 16px; width: 50%; } 

* In Safari, you may need to set 49% for it to work.

Answer 13

Splitting the division into two columns is very simple, just specify the column width is better if you put this (e.g. width: 50%) and set float: left for the left column and float: right for the right column.

Answer 14

You can use flexbox to control the layout of your div element:

 * { box-sizing: border-box; } #content { background-color: rgba(210, 210, 210, 0.5); border: 1px solid #000; padding: 0.5rem; display: flex; } #left, #right { background-color: rgba(10, 10, 10, 0.5); border: 1px solid #fff; padding: 0.5rem; flex-grow: 1; color: #fff; } 

 <div id="content"> <div id="left"> <div id="object1">lorem ipsum</div> <div id="object2">dolor site amet</div> </div> <div id="right"> <div id="object3">lorem ipsum</div> <div id="object4">dolor site amet</div> </div> </div>