Split Div Into 2 Columns Using CSS
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:
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!
17 Answers 17
This works good for me. I have divided the screen into two halfs: 20% and 80%:
#left content in here #right content in there When you float those two divs, the content div collapses to zero height. Just add
after the #right div but inside the content div. That will force the content div to surround the two internal, floating divs.
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.
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.
I’d encourage readers to check out my other answer as well. I think it’s actually better than this one.
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.
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.
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.
How to organize page layout with div’s
I have a question for the more experienced programmers here. How can I best organize the div’s to have like a left side, a middle side and a right side? I am doing my website now for a while and I spend half a day moving div’s around because they don’t stay in place after I put another one in and I want to work with the relative option. Also what I do is get them into position with big negative numbers. It just does not seem to be the right way to do things. I also get scrolbars when everything fits on the screen. Working in designmode in dreamweaver cs3 is not possible, because everything is tumbling all over each other. I am hoping for some input on how to do this better. thanks, Richard
It’s a bit unclear what you’re asking for. There’s no right way to do all CSS layouts, we need to know what exactly you’re trying to achieve to provide good advice.
7 Answers 7
In my opinion, here are some basic principles to keep in mind when structuring your site with CSS:
- Positioning: A common mistake that visual developers make when constructing their first pure CSS site layout is to use absolute/relative positioning properties. When placing your elements on a page, it is all about the box model and how margins, padding and widths interact with each other. There is no need to use the position property at all until you are further along. There are some exceptions to this rule, but we’ll keep it simple for now.
- Wrappers & containers: Having mentioned the box model above, leads me to my next point. You should be able to position all of your structural elements using the margin property correctly. Sometimes developers mix up padding/margin which results in «unexpected» behavior. Let’s say you want to create header, content, and sidebar elements. On top of that, you want to add content in those elements without messing with the parent elements. You need to set a specific height for your header (px, % etc.), you’ll also need to set widths for your content and sidebar elements. When working with the content within these elements, I typically use another element which acts as a «container» for your content. Steer clear from redefining the size of the «container» element, because you would have already defined this in your parent element. This way, you are free to use margin, padding freely without affecting the size of the parent element. if that made any sense 😉
- Clear your floats: To position your content and sidebar, or other column type elements you are going to have to use the float property on one or more of your elements. An important thing to keep in mind when using float is that you should clear them after you’ve finished a «float set». Meaning, if you have 3 columns, all with the float:left properties set, you should clear them after the set and NOT after each column. It depends on the layout but typically this way you’ll control over floats and you won’t run the risk of unexpectedly floating other elements that don’t need it.
- When in doubt, reset your margin/padding: Differences in browsers are frustrating to say the least. You can help combat this by destroying browser default properties if they are not defined. I always find that if reset the margin/padding to 0 for a questionable element, I can easily correct spacing issues.
- Use the cascade, don’t re-define: Remember that if you’ve already defined a bunch of css properties, and you are working within a child element, you don’t need to redefine properties. Children inherit their parents properties so only define differences.
This will continue to make sense the more you work with it, but I hope this will provide you with some points to keep in mind when structuring a CSS layout. There are some links above that are great resources as well, but I thought I should share some of things I personally think of while working in CSS.
Two column div layout with fluid left and fixed right column
I want to make a two column layout using DIVs, where right column will have a fixed width of 200px and the left one would take all the space that is left. It’s quite easy, if you use tables:
Column 1 Column 2 (always 200px)
7 Answers 7
The following examples are source ordered i.e. column 1 appears before column 2 in the HTML source. Whether a column appears on left or right is controlled by CSS:
Fixed Right
#wrapper < margin-right: 200px; >#content < float: left; width: 100%; background-color: #CCF; >#sidebar < float: right; width: 200px; margin-right: -200px; background-color: #FFA; >#cleared
Column 1 (fluid) Column 2 (fixed) #wrapper < margin-left: 200px; >#content < float: right; width: 100%; background-color: #CCF; >#sidebar < float: left; width: 200px; margin-left: -200px; background-color: #FFA; >#cleared
Column 1 (fluid) Column 2 (fixed) Alternate solution is to use display: table-cell; which results in equal height columns.
another good one, though you don’t need the clearing div, because the wrapper is floated it clears (contains the floated column) already 😉
@clairesuzy: I now see why I need the clearing div. when the column height is not equal, the clearing div ensures the following items (e.g. footer, or the surprise me button in the fiddle) do not interfere with either columns.
Thanks, quite right in this case, I was muddling up another layout I use — link — which builds in an overall containing float/wrapper — the above layout can do any number of sidebars at either side — I use it as a base for just about everything 😉 sorry I got it confused with yours
this works until I add an inside Sidebar, then for some reason the fluid column wraps down underneath the Sidebar.
Here’s a solution (and it has some quirks, but let me know if you notice them and that they’re a concern):
@Hussein inline-block does work in IE6 and 7 it just needs some help, BUT it’s not necessary here I the float is winning, and a display property is ignored when float is used.. I’ll check that though
@clairesuzy Yeah good catch. And I haven’t done css and html stuff in a while, I’ll try to be less sloppy and a little better next time. >.
no worries, it’s a correct solution 😉 — after checking: display: inline-block should not be necessary in above code but display:inline might be useful for IE6 and below because of double margin bug — if it’s encountered
I'm 200px wide I take up the remaining space
and I don't wrap under the right column The above should work, you can put that code in wrapper if you want the give it width and center it too, overflow:hidden on the column without a width is the key to getting it to contain, vertically, as in not wrap around the side columns (can be left or right)
IE6 might need zoom:1 set on the #content div too if you need it’s support