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:

<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 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!

Brickle

There are so many solutions,you can see this:#211883 – Casilde

Answer 1

This works good for me. I have divided the screen into two halfs: 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>

Zucker

If this is all you do, the parent of these elements will have no height. – Ethbin

Love it. Simple solution. – Cyanite

Rob Van Dam's answer should be considered also. – Binford

Answer 2

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

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

after the #right div but inside the content div. That will force the content div to surround the two internal, floating divs.

Examine

It's unfortunate that this has been upvoted so many times. You should really avoid extraneous markup, especially considering that there are other viable, widely-used remedies. – Witted

Answer 3

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.

Ethbin

I'd encourage readers to check out my other answer as well. I think it's actually better than this one. – Ethbin

one more note: overflow:auto; can sometimes be a better option – Ethbin

This is definitely an effective means. However, it's worth mentioning that this can create some obvious layout challenges. For example, if I want my parent element's overflow to be visible. – Witted

Answer 4

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.

Winterkill

Answer 5

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:

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

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.

Ethbin

Also a great solution, but it's worth mentioning here that this does not work in IE8. It really pains me to be the one to say that and I apologize for being "that guy". – Witted

@Witted try #content:after (just one colon instead of two)... If I recall correctly, it's more proper to use two colons for pseudo elements, but older IEs only recognize it if it has one. ...or something like that - it's quite some time since I've dealt with that issue. – Ethbin

Answer 6

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:

<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

Iormina

Answer 7

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

Glyconeogenesis

I also prefer this method over float. Sometimes need to set a: vertical-align: top; (or bottom, etc.) on both the left and right elements if they aren't the same size. – Reversal

Answer 8

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>

Pentheam

Out of a zillion similar attempts, I find that this has worked (so far) The Best. All other I found (and tried) lets the contents overflow. Thanks so much. – Came

Answer 9

Best way to divide a div vertically --

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

Morrison

Answer 10

Pure old school CSS

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;
}

Cabinet

Answer 11

If you don't care old browser and need a simple way.

#content {
  display: flex;
}

#left,
#right {
  flex: 50%;
}

Unifilar

Answer 12

Floats don't affect the flow. What I tend to do is add a

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

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.

Pelligrini

Answer 13

This is best answered here Question 211383

These days, any self-respecting person should be using the stated "micro-clearfix" approach of clearing floats.

Witted

Answer 14

1. Make font size equal to zero in parent DIV.

2. Set width % for each of child DIVs.

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

*In Safari you may need to set 49% to make it works.

Ida

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Cesar

Answer 15

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.

Linkage

hope this code will help you to understand this in better way;@AmanGarg CSS: #column { overflow:auto; width: 100%; } #column50pleft, #column50pright{ width: 49%; margin:2px; padding: 0.5%; background: white; } #column50pleft { float:left; } #column50pright { float:right; } HTML: <div id="column"> <div id="column50pleft"> </div> <div id="column50pright"> </div> </div> – Linkage

Answer 16

div {
    columns: 2;
    column-gap: 2em;
    column-fill: auto;
    height: 20em;
}

Bergeman

Answer 17

You can put two inline-blocks side by side and align to the left within a container div.

<div style='text-align:left'>
<div style='width:40%;display:inline-block;'>Column 1</div>
<div style='width:45%;display:inline-block'>Column 2</div>
</div>

<div style='text-align:left'>
<div style='width:40%;display:inline-block;'>Column 1</div>
<div style='width:45%;display:inline-block'>Column 2</div>
</div>

<div style='text-align:left'>
<div style='width:40%;display:inline-block;'>Column 1</div>
<div style='width:45%;display:inline-block'>Column 2</div>
</div>

Hopping

Answer 18

#content {
  display: flex;
}

#right {
  /* The last child, the one you wanted it to take up all the remaining space */
  flex-grow: 1;
}

Should you restrict other columns (but the last one) give them max-width: calc(100% / var(--column-count)); style, and give their parent --column-count: N; to columns' (where N is the desired column count, which you can mutate via JS and columns will adapt).

Binford