asked on

Howto: Split a div into three columns...

Hello Experts!

What is the best CSS to use to split a <div> into three columns?

e.g.

<div id="wrap">
<div id="column1left"></div>
<div id="column2middle></div>
<div id="column3right></div>
</div>

Obviously this can be done with absolute positioning, but I would like to know how to do it so the design can adjust to different browser window sizes.

-thanks -neo

benwiggy

As far as I know there is only such a solution, would you like that instead?

benwiggy

Sorry, I meant only such a solution with tables.

ASKER CERTIFIED SOLUTION

farkit

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

benwiggy

farkit thats good - how about:

<html>
<head>
<title>Untitled</title>
<style type="text/css">
#wrap{width:100%;height:100%;border:1px solid;}
#wrap #column1left{float: left; height: 100%; width:33%; background-color:red;}
#wrap #column2middle{float: left; height: 100%; width:34%; background-color:blue;}
#wrap #column3right{float:left; height: 100%; width:33%; background-color:green;}

</style>
</head>

<body>
<div id="wrap">
<div id="column1left">Column1</div>
<div id="column2middle">Column2</div>
<div id="column3right">Column3</div>
</div>

</body>
</html>

benwiggy

You also might want to add in this line:
body { margin-top: 0; margin-left: 0; margin-right: 0; margin-bottom: 0 }

neomage23

ASKER

farkit! nice job...that totally did it. I am now one step closer to having my "ultimate" CSS template.

Benwiggy...first you said it could only be done with tables, then you added "height:100%" check out this other question I asked the other day for COBOLdinosaur's rendition of why to not use height:100%.

https://www.experts-exchange.com/questions/21335192/Trying-to-get-a-top-bar-and-a-leftnav-to-work.html#13445445

Thanks! -neo