homepage Welcome to WebmasterWorld Guest from 50.19.172.0
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
3 column layout where all 3 are the same height
ccrookston



 
Msg#: 4303167 posted 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



 
Msg#: 4303167 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4303167 posted 6:03 am on Apr 26, 2011 (gmt 0)

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

WebmasterWorld Senior Member topr8 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4303167 posted 7:30 am on Apr 26, 2011 (gmt 0)

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



 
Msg#: 4303167 posted 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



 
Msg#: 4303167 posted 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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved