3-column Web Parts Page?

Question

Hello all, I am setting up an asp.net web parts portal for some stuff. I have a [hopefully] really easy question. How can I make the page have 3 major columns?

Right now I have two columns using <div id="leftpanel" style="float: left"> and <div id="rightpanel" style="float: right">. But I cannot figure out how to get a panel in the center. The right panel is basically in the center and there is not a css float: middle/center. So how is a three panel web parts page accomplished?

Answer 1

A table with 3 columns. Add a div in each column.

Keep the style in the divs..not the table

Answer 2

I have just been struggling with this myself. Trying to do the 'pure-div' thing and avoid tables. It is haaaaard.

Your leftPanel wants to float left. Your middlePanel also wants to float left. And your rightPanel wants to clear:both

But good luck with the different browsers, div-content size, etc. etc. I ended up doing what EdB suggests :)

Answer 3

<div class="container">
   <div class="column">
   </div>
   <div class="column">
   </div>
   <div class="column">
   </div> 
</div>
<div class="footer">
</div>

.container{width: 600px;}
.column{float: left; width: 200px;}
.footer{width: 600px; clear: both;}

Answer 4

#wrapper {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 700px;
}

#header {
    margin: 0 0 15px 0;
    background: yellow;
}

#left-side {
    float: left;
    width: 150px;
}

#right-side {
    float: right;
    width: 150px;
}

#center { 
    float: left;
    width: 56%;
}

#footer {
    background: #A2A2A2;
}

And the corresponding HTML:

<div id="wrapper">
    <div id="header">
        HEADER
    </div>
    <div id="left-side">
        SIDE A
    </div>

    <div id="center">
        CONTENT
    </div>

    <div id="right-side">
        SIDE B
    </div>
    /div>
    <div id="footer">
        FOOTER
    </div>
</div>

Answer 5

float the first two left and the last one right.

If that doesn't work, and it sometimes won't, then use Ed B's answer.

Answer 6

Here's a simple guide to the basic CSS layout types:

http://intensivstation.ch/en/templates/