Mon, 2008-06-30 16:47
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
thanks in advance...
Mon, 2008-06-30 19:32
#1
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.
Mon, 2008-06-30 19:35
#2
LadynRed wrote:Easiest way
Easiest way to do this is using the faux columns method. It'll save you a lot of headaches.
Yep.
Mon, 2008-06-30 20:11
#3
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?
Mon, 2008-06-30 21:45
#4
Ken Nielsen wrote:I tried to
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 
Tue, 2008-07-01 14:29
#5
Thank you to all - I really
Thank you to all - I really appreciate your help.
Wed, 2008-07-02 16:17
#6
Triumph wrote:Ken Nielsen
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
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
Wed, 2008-07-02 17:56
#7
Ken Nielsen wrote: What I
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.
Wed, 2008-07-02 21:54
#8
Couple of possible solutions ...
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