Split Div Into 2 Columns Using CSS

Question

I have been attempting to split a div into two columns using CSS  but I have not managed to get it working yet   My basic structure is as follows    lt div id  content  gt     lt div id  left  gt        lt div id  object1  gt  lt  div gt        lt div id  object2  gt  lt  div gt     lt  div gt      lt div id  right  gt        lt div id  object3  gt  lt  div gt        lt div id  object4  gt  lt  div gt     lt  div gt   lt  div gt    If I attempt to float the right and left divs to their respective positions  right and left   it seems to ignore the content div s background-color   And other code that I have tried from various websites doesn t seem to be able to translate to my structure   Thanks for any help

User · Answer

I know this post is old  but if any of you 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

User · Answer

Divide a division in two columns is very easy  just specify the width of your column better if you put this  like width 50   and set the float left for left column and float right for right column

User · Answer

This is best answered here Question 211383  These days  any self-respecting person should be using the stated  micro-clearfix  approach of clearing floats

User · Answer

Make font size equal to zero in parent DIV  Set width   for each of child DIVs    content       font-size  0      content  gt  div       font-size  16px      width  50         In Safari you may need to set 49  to make it works

User · Answer

You can use flexbox to control the layout of your div element    x000D   x000D      box-sizing  border-box    x000D   x000D   content   x000D    background-color  rgba 210  210  210  0 5   x000D    border  1px solid  000  x000D    padding  0 5rem  x000D    display  flex  x000D    x000D   x000D   left  x000D   right   x000D    background-color  rgba 10  10  10  0 5   x000D    border  1px solid  fff  x000D    padding  0 5rem  x000D    flex-grow  1  x000D    color   fff  x000D    x000D   lt div id  content  gt  x000D     lt div id  left  gt  x000D        lt div id  object1  gt lorem ipsum lt  div gt  x000D        lt div id  object2  gt dolor site amet lt  div gt  x000D     lt  div gt  x000D   x000D     lt div id  right  gt  x000D        lt div id  object3  gt lorem ipsum lt  div gt  x000D        lt div id  object4  gt dolor site amet lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The most flexible way to do this    content  after     display block    content       clear both      This acts exactly the same as appending the element to  content    lt br style  clear both    gt    but without actually adding an element    after is called a pseudo element  The only reason this is better than adding overflow hidden  to  content is that you can have absolute positioned child elements overflow and still be visible  Also it will allow box-shadow s to still be visible

User · Answer

Another way to do this is to add overflow hidden  to the parent element of the floated elements   overflow hidden will make the element grow to fit in floated elements   This way  it can all be done in css rather than adding another html element

User · Answer

None of the answers given answer the original question   The question is how to separate a div into 2 columns using css   All of the above answers actually embed 2 divs into a single div in order to simulate 2 columns   This is a bad idea because you won t be able to flow content into the 2 columns in any dynamic fashion   So  instead of the above  use a single div that is defined to contain 2 columns using CSS as follows      two-column-div    column-count  2      assign the above as a class to a div  and it will actually flow its contents into the 2 columns   You can go further and define gaps between margins as well   Depending on the content of the div  you may need to mess with the word break values so your content doesn t get cut up between the columns

User · Answer

Floats don t affect the flow  What I tend to do is add a   lt p class  extro  style  clear  both  gt possibly some content lt  p gt    at the end of the  wrapping div   in this case content   I can justify this on a semantic basis by saying that such a paragraph might be needed  Another approach is to use a clearfix CSS    content after     content         display  block    height  0    clear  both    visibility  hidden      content     display  inline-block              html  content     height  1       content     display  block             The trickery with the comments is for cross-browser compatibility

User · Answer

This works good for me  I have divided the screen into two halfs  20  and 80     lt div style  width  20   float left  gt      left content in here  lt  div gt    lt div style  width  80   float right  gt      right content in there  lt  div gt

User · Answer

Make children divs inline-block and they will position side by side    content      width  500px     height  500px      left   right       display  inline-block      width  45       height  100       See Demo

User · Answer

When you float those two divs  the content div collapses to zero height   Just add   lt br style  clear both    gt    after the  right div but inside the content div   That will force the content div to surround the two internal  floating divs

User · Answer

Best way to divide a div vertically --   parent       margin  0      width  100      left       float  left      width  60      right       overflow  hidden      width  40

User · Answer

For whatever reason I ve never liked the clearing approaches  I rely on floats and percentage widths for things like this   Here s something that 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 put some content in you ll see that it works    lt div id  content  gt     lt div id  left  gt        lt div id  object1  gt some stuff lt  div gt        lt div id  object2  gt some more stuff lt  div gt     lt  div gt      lt div id  right  gt        lt div id  object3  gt unas cosas lt  div gt        lt div id  object4  gt mas cosas para ti lt  div gt     lt  div gt   lt  div gt    You can see it here  http   cssdesk com d64uy

[css] Split Div Into 2 Columns Using CSS

Examples related to css

Examples related to html

Examples related to css-float