8 replies [Last post]
SBee
Offline
newbie
Last seen: 14 years 1 week ago
Joined: 2003-12-15
Posts: 5
Points: 0

HI-

I am having a problem with getting 3 divs on my page to all stretch to 100%. I have every div set to 100% height, a wrapper div around all 3 set to 100% height. Is there a way to get this to work?

Here is a link to the problem:

or a link to the whole thing:

http://www.shawnbee.com/simple.html

Or the code:

CSS:

html,body{margin:0;padding:0; height: 100%;}
body{font:12px/16px Tahoma, Arial, Helvetica, Trebchet 'MS', Verdana,sans-serif;color:#333333;}

div#navigation{float:left;width:242px; height:100%; background:#999999; line-height:15px; }

div#wrapper{height:100%;}

div#container{width:968px; height:100%; margin:0 auto}

div#content{float:right;width:184px; height:100%; background:#fffde5;}

div#capabilities{float:right;width:154px; height:100%; padding-left:20px; padding-right:10px; background:#fffde5;}

div#main{float:left;width:538px; height:100%;}

div#footer2{float:left; width:100%; margin-top:40px;}

HTML:

Title

Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text

Text
Text
Text
Text
Text
Text
Text
Text
Text

Text
Text
Text
Text
Text
Text
Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation

This would be the footer

thanks in advance...

LadynRed
Offline
Regular
TN
Last seen: 13 years 22 weeks ago
TN
Timezone: GMT-6
Joined: 2004-10-12
Posts: 14
Points: 0

Easiest way to do this is

Easiest way to do this is using the faux columns method. It'll save you a lot of headaches.

Triumph (not verified)
Anonymous's picture
Guru

LadynRed wrote:Easiest way

LadynRed wrote:

Easiest way to do this is using the faux columns method. It'll save you a lot of headaches.

Yep.

Ken Nielsen
Offline
Regular
Last seen: 14 years 30 weeks ago
Joined: 2007-12-13
Posts: 34
Points: 0

I tried to reply to this

I tried to reply to this with a link to the faux columns article but got an error message saying I needed higher authority. Maybe I don't have clearance to post the link?

Triumph (not verified)
Anonymous's picture
Guru

Ken Nielsen wrote:I tried to

Ken Nielsen wrote:

I tried to reply to this with a link to the faux columns article but got an error message saying I needed higher authority. Maybe I don't have clearance to post the link?

What exactly did the error say? Please post it in the Site Discussion forum.

I'll post the link for you: Faux columns Tongue

SBee
Offline
newbie
Last seen: 14 years 1 week ago
Joined: 2003-12-15
Posts: 5
Points: 0

Thank you to all - I really

Thank you to all - I really appreciate your help.

Ken Nielsen
Offline
Regular
Last seen: 14 years 30 weeks ago
Joined: 2007-12-13
Posts: 34
Points: 0

Triumph wrote:Ken Nielsen

Triumph wrote:
Ken Nielsen wrote:

I tried to reply to this with a link to the faux columns article but got an error message saying I needed higher authority. Maybe I don't have clearance to post the link?

What exactly did the error say? Please post it in the Site Discussion forum.

I'll post the link for you: Faux columns Tongue

What I really wanted to ask is 'why not use a table?' - wouldn't this be the easiest, most widely supported and sure-fire way to guarantee that two columns would always remain the same height? It seems like the faux columns approach is merely a 'work around' to fool the columns into behaving. With tables, they actually behave by nature.

Any thoughts on that?

Thank You,

Ken

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 49 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Ken Nielsen wrote: What I

Ken Nielsen wrote:

What I really wanted to ask is 'why not use a table?' - wouldn't this be the easiest, most widely supported and sure-fire way to guarantee that two columns would always remain the same height? It seems like the faux columns approach is merely a 'work around' to fool the columns into behaving. With tables, they actually behave by nature.

Any thoughts on that?

It's a violation of good semantic code practice. Markup should reflect meaning, and tables are for tabular content. If the content is not tabular then tables shouldn't be used.

In my mind that alone is sufficient reason.

Here's a link to a page with some other reasons.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

greg420blues
greg420blues's picture
Offline
Enthusiast
Denton, TX
Last seen: 14 years 12 weeks ago
Denton, TX
Timezone: GMT-5
Joined: 2006-01-17
Posts: 74
Points: 0

Couple of possible solutions ...

LadynRed wrote:

Easiest way to do this is using the faux columns method. It'll save you a lot of headaches.

I've got a couple possible solutions for you. FIRST is using the unobtrusive NiftyCorners javascript. It's a sweet little package that will semantically round the corners of a div for you. WHAT? You don't need that? Well it's also got a GREAT little function where you can tell it to make divs with the same class to be the same height. I use it exclusively now.

The OTHER method I've used in the past was the Equal Height Columns based on the "One True Layout" method. You can find it here:

http://positioniseverything.net/articles/onetruelayout/equalheight

Greg Altuna
BrownCo Media
http://www.browncomedia.com/