?
Solved

Howto: Split a div into three columns...

Posted on 2005-03-03
6
Medium Priority
?
396 Views
Last Modified: 2012-08-13
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
Comment
Question by:neomage23
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
6 Comments
 
LVL 6

Expert Comment

by:benwiggy
ID: 13452502
As far as I know there is only such a solution, would you like that instead?
0
 
LVL 6

Expert Comment

by:benwiggy
ID: 13452507
Sorry, I meant only such a solution with tables.
0
 
LVL 3

Accepted Solution

by:
farkit earned 500 total points
ID: 13452626
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 6

Expert Comment

by:benwiggy
ID: 13452742
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
 
LVL 6

Expert Comment

by:benwiggy
ID: 13452755
You also might want to add in this line:
body { margin-top: 0; margin-left: 0; margin-right: 0; margin-bottom: 0 }
0
 
LVL 6

Author Comment

by:neomage23
ID: 13454146
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses
Course of the Month11 days, 13 hours left to enroll

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question