1. Home
  2. Forums Index
  3. Browser Side / CSS 1:59 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

3 column layout where all 3 are the same height

         

ccrookston

12:24 am on Apr 24, 2011 (gmt 0)

10+ Year Member



I'm really having a hard time with this, and I'm about too scrap the div layout and go with tables. I'm trying to build a 3 column layout where all three columns are the same height.

Pretty much anything I try ends up looking like this, which won't do at all:
<snip>

Based on my current HTML & CSS, it looks great so long as the content does not go past the end of the screen:
<snip>

But if it does, it looks like this:
<snip>

Here's my current code: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">
<head runat="server">
 <title>trying to learn css</title>
</head>
<body style="height:100%;">
<div style="margin:auto; width:1000px; height:100%;">

<div style="width:200px; float:left; height:100%; background-color: grey;">
hey<br />hey<br />hey<br />hey<br />hey<br />hey
hey<br />hey<br />hey<br />hey<br />hey<br />hey
hey<br />hey<br />hey<br />hey<br />hey<br />hey
hey<br />hey<br />hey<br />hey<br />hey<br />hey
hey<br />hey<br />hey<br />hey<br />hey<br />hey
hey<br />hey<br />hey<br />hey<br />hey<br />hey
</div>

<div style="width:600px; float:left; background-color:Green; height:100%;">center content</div>

<div style="width:200px; float:right; height:100%; background-color: red;">
hey<br />hey<br />hey<br />hey<br />hey<br />hey
hey<br />hey<br />hey<br />hey<br />hey<br />hey
</div>

</div>

</body>
</html>


Any suggestions?

[edited by: alt131 at 1:03 pm (utc) on Nov 27, 2011]
[edit reason] Thread Tidy - 404 [/edit]

ccrookston

12:26 am on Apr 24, 2011 (gmt 0)

10+ Year Member



On the third pic, I'm seeing that layout in FF 3.6.16 and IE 8.0.

alt131

6:03 am on Apr 26, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'm about too scrap the div layout and go with tables. I'm trying to build a 3 column layout where all three columns are the same height.
Using divs-for-layout in the way you are is much the same as using tables-for-layout, so that might be an option that works best for you. However, the css property table/row/cell orders divs to behave in a way that is similar to tables. Some older browsers that support this need the full "table" structure, but try:
body {display:table}
the first, or "wrapper" div {display:table-row)
and the other divs
div {display:table-cell}

topr8

7:30 am on Apr 26, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



the most usual way is to have faux columns: eg put an image/background color in the body elemnt, this will make it appear as though the columns go down to the bottom of the page even if they don't.

hoangvu

2:57 am on Apr 27, 2011 (gmt 0)

10+ Year Member



two ways to do
1. fix height in css
2. using javascript and css to solve this

sumen

8:57 am on Apr 29, 2011 (gmt 0)

10+ Year Member 



¡¡XHTML CODE£º
¡¡¡¡Example Source Code
¡¡¡¡<body>
¡¡¡¡<div id="header">
¡¡¡¡<h1>Header</h1>
¡¡¡¡</div>
¡¡¡¡<div id="left">
¡¡¡¡Port side text...
¡¡¡¡</div>
¡¡¡¡<div id="right">
¡¡¡¡Starboard side text...
¡¡¡¡</div>
¡¡¡¡<div id="middle">
¡¡¡¡Middle column text...
¡¡¡¡</div>
¡¡¡¡<div id="footer">
¡¡¡¡Footer text...
¡¡¡¡</div>
¡¡¡¡</body>¡¡¡¡Below CSS Code£º
¡¡¡¡Example Source Code

¡¡¡¡body {
¡¡¡¡margin: 0px;
¡¡¡¡padding: 0px;
¡¡¡¡}
¡¡¡¡div#header {
¡¡¡¡clear: both;
¡¡¡¡height: 50px;
¡¡¡¡background-color: aqua;
¡¡¡¡padding: 1px;
¡¡¡¡}
¡¡¡¡div#left {
¡¡¡¡float: left;
¡¡¡¡width: 150px;
¡¡¡¡background-color: red;
¡¡¡¡}
¡¡¡¡div#right {
¡¡¡¡float: right;
¡¡¡¡width: 150px;
¡¡¡¡background-color: green;
¡¡¡¡}
¡¡¡¡div#middle {
¡¡¡¡padding: 0px 160px 5px 160px;
¡¡¡¡margin: 0px;
¡¡¡¡background-color: silver;
¡¡¡¡}
¡¡¡¡div#footer {
¡¡¡¡clear: both;
¡¡¡¡background-color: yellow;
¡¡¡¡}

[edited by: tedster at 6:19 pm (utc) on Apr 29, 2011]
[edit reason] no personal links, please [/edit]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 1:59 pm May 1, 2026