• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 409
  • Last Modified:

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

0
neomage23
Asked:
neomage23
  • 4
1 Solution
 
benwiggyCommented:
As far as I know there is only such a solution, would you like that instead?
0
 
benwiggyCommented:
Sorry, I meant only such a solution with tables.
0
 
farkitCommented:
You mean something like this?

<html>
<head>
      <title>Untitled</title>
<style type="text/css">
      #wrap{width:302;height:300px;border:1px solid;}
      #wrap #column1left{float: left;width:100px; background-color:red;}
      #wrap #column2middle{float: left;width:100px; background-color:blue;}
      #wrap #column3right{float:left;width:100px; 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>
0
Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

 
benwiggyCommented:
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>
0
 
benwiggyCommented:
You also might want to add in this line:
body { margin-top: 0; margin-left: 0; margin-right: 0; margin-bottom: 0 }
0
 
neomage23Author Commented:
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%.

http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_21335192.html#13445445

Thanks! -neo
0

Featured Post

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now