Welcome to WebmasterWorld Guest from 54.196.233.239

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)



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)



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 5+ 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 topr8 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)



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)



 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]

 

Featured Threads

Hot Threads This Week

Hot Threads This Month