3 Column Layout

December 27, 2023 Post a Comment

Here is what I'm trying to do. I want layout with three columns. Lets call them left, middle and right column. I can't figure out what to do so when the content of main increase t

Solution 1:

I'd suggest checking out this link for a great example of a 3 column liquid layout. Just view the source for the example of the HTML and CSS. He also provides examples of various other layouts (see the tabs at the top of the page).

Solution 2:

Here is an excellent website: http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts that has a whole bunch of different layouts that are all CSS based.

Solution 3:

HTML:

<htmllang="en"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"><title>3 Columns</title></head><body><divclass="container"><divclass="left"><h3>Left Column</h3></div><divclass="center"><h3>Center column</h3>           
    /div>

    <divclass="right"><h3>Right column</h3></div></div><!-- /container --></body></html>

CSS:

.container {width: 800px; border:1px solid red; overflow:auto; }
.left {width: 250px; border:1px dashed green; float:left}
.center {width: 250px; border:1px dashed green; float:left}
.right {width: 250px; border:1px dashed green; float:left}

See the demo here: http://jsfiddle.net/z2SLL/1/

Solution 4:

I would strongly recommend against using the <table> element simply because for semantic reasons, we are not talking about displaying tabulated data.

Instead, exploit the display properties using values like "table", "table-row" and "table-cell". Here is a demo: http://jsfiddle.net/teddyrised/DLaCW/20/. You can see that although the content of each column varies, their overall height follows that of the tallest <div>.

Solution 5:

Maybe the faux columns technique is what you need. Check it out here, here and here.

If you need it to be liquid or with no images (for whatever reason) then you might have to use some javascript like this example or you can check this weird example.

Anyway, with the little information there's not too much to offer because there's a lot of variables and different solutions.

Html5 Cafe