|
CSS - Float And Height Issues
I have a container containing two other divs. One is to be a left floating menu, and the other is to be a right floating content area. However, when I place these divs in a container that contains a background, the container won't expand as information is placed in the menu or the content area. My code looks like this.
HTML: Code: <div class="blog-container"> <div class="blog-menu"> Some Random Menu </div> <div class="blog-content"> Some Random Content </div> </div> CSS: Code:
.blog-container {
position: relative;
text-align: center;
padding-top:15px;
width: 925px;
background-color: #eeeeee;
}
.blog-menu {
float: left;
width: 120px;
border: 1px solid blue;
}
.blog-content {
float: right;
width: 150px;
border: 1px solid red;
}
I really have no idea why it's doing this. Any help would be greatly appreciated. Similar TutorialsHello Just recently I had an idea for a page I wanted to make, the design is basically a 3-column layout with no traditional header or footer, the height of all three columns should run the length of the window/page height the left and rightmost column would have a fixed width or a width in em, the center column width should fill the space in between. If the content is short all columns should extend to the height of the page window, but if the content in any of the columns is longer than the window height they should all extend to reach the bottom of the page and accommodate the content length In my first attempt things didn't go so well, results varied wildly across browsers so I decided to start from scratch bit by bit Bellow is the point at which I reach consistent but undesired behaviour, I have validated and tested the code in Firefox 3/Pale Moon, Internet Explorer 8, Chromium 9, and Opera 11 I would like the end result to work in the above browsers as well as IE7 if possible I should point out now that im not interested in using faux-columns, the layout should not require images, I also wish to have absolute-positioned elements in the columns some time later Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three Columns</title>
<style type="text/css">
*, html, body {
margin: 0;
padding: 0;
font-size: 100%;
}
html, body {
width: 100%;
height: 100%;
}
#maincontainer {
position: relative;
height: 100%;
background: #eee;
}
#left {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
background: #fbb;
height: 100%;
}
#mid {
position: relative;
margin: 0 200px 0 200px;
background: #efe;
height: 100%;
}
#right {
position: absolute;
top: 0px;
right: 0px;
width: 200px;
background: #bbf;
height: 100%;
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="left">
left start<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left end<br />
</div>
<div id="mid">
mid start<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid end<br />
</div>
<div id="right">
right start<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right end<br />
</div>
</div>
</body>
</html>
In the above example it works as long as the content within the columns is shorter than the window height, but if you re-size the window so that the text in the right or left column goes beyond the page, and then scroll to the bottom, the columns do not extend to the bottom of the page so there is a large gap where the content overflows beyond the column What I would like to do from this point is make the columns extend to the bottom of the page when this happens, but I'm not sure how best to proceed I also have a version of the above code which uses floated left and right columns instead of absolute positioned ones, would it be better to work from that? or does it not really matter Thanks in advance I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically?? Code: <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div> <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div> </div> <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div> <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div> </div> I have been trying to find a sloution to making a float:right layer for right navigation to have a height of 100% that is nested within a container that is a position:absolute, but everything I have googled for comes up with no help (or things that don't work.) (see attached pic) Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html><head><title>The Shalom Foundation</title>
<style type="text/css">
<!--
body {
text-align:center;
background-color:#666666;
margin:0 0 50px 0; /* top right bottom left */
}
p{
text-align:justify;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:20px;
line-height:24px;
}
#mainBox {
position:absolute;
right:12px;
top:9px;
padding:0px;
width:733px;
text-align:left;
/* background-color:#999999; */
}
#pageHeader{
height:202px;
background:url(images/layout/header.jpg) no-repeat top left;
padding:0;
margin:0;
text-indent:-15000px;
overflow:hidden;
}
#nav{
position:absolute;
right:546px;
top:178px;
margin:0;
background:url(images/layout/menu.jpg) no-repeat top left;
padding:0;
margin:0;
width:136px;
height:302px;
overflow:hidden;
}
#contentHdr{
position:absolute;
top:178px;
right:125px;
/* background-color:#CCCCCC; */
padding:0;
margin:0;
text-align:right;
width:400px;
height:38px;
overflow:hidden;
}
#contentTop{
position:absolute;
top:220px;
right:110px;
background:url(images/layout/content_top.gif) top left;
padding:0;
margin:0;
text-indent:-15000px;
width:423px;
height:28px;
overflow:hidden;
}
#content{
float:right;
margin:20px 17px 0 0; /* top right bottom left */
background:url(images/layout/content_bg.gif) top left;
padding-left:15px;
padding-right:15px;
padding-top:0;
padding-bottom:0;
width:393px;
overflow:hidden;
}
#rightNav{
float:right;
background-color:#FFFFFF;
padding:0;
margin:0;
width:93px;
height:100%;
clear:both;
overflow:hidden;
}
#pageFooter{
float:right;
background: url(images/layout/footer_matthew5_14.gif) top left;
padding:0;
margin:0;
width:702px;
height:92px;
text-indent:-15000px;
overflow:hidden;
}
-->
</style>
</head>
<body>
<div id="mainBox">
<div id="pageHeader">The Shalom Foundation</div>
<div id="nav">Nav</div>
<div id="contentHdr"><table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"><tr><td valign="middle"><img src="images/layout/hdr_about_us.gif"></td></tr></table></div>
<div id="rightNav"><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"><tr><td>rightNav please work</td></tr></table></div>
<div id="contentTop"></div>
<div id="content"><p>Magnus es, domine, et laudabilis valde: magna virtus tua, et sapientiae tuae non est numerus. et laudare te vult homo, aliqua
portio creaturae tuae, et homo circumferens mortalitem suam, circumferens testimonium peccati sui et testimonium, quia superbis resistis: et tamen
laudare te vult homo, aliqua portio creaturae tuae.tu excitas, ut laudare te delectet, quia fecisti nos ad te et inquietum est cor nostrum, donec
requiescat in te. da mihi, domine, scire et intellegere, utrum sit prius invocare te an laudare te, et scire te prius sit an invocare te. sed quis te
invocat nesciens te?</p></div>
<div id="contentBottom"></div>
<div id="pageFooter">pageFooter</div>
</div>
</body>
</html>
Is there a solution to this? Thanks in advance! What a giant surprise here but I need some assistance with my CSS Float . In FF, Safari, and IE6 everything displays correctly. However, Opera 9.64 and IE7 / IE8 have major issues. I know there are still a few quirks in my physical XHTML mostly Alt attributes not filled in yet (I'm more worried about full cross browser compatibility). I have eliminated tables for everything possible but have had more problems by removing all of them. Live Site: moo-ving dot com I hate to make everyone type it out sorry. Howdy folks. I'm working on a site right now with a fixed sized menu on the left, and a fluid layout to the right of it. I CANNOT get the h1 header to come up to the top in FF!!! Here's the page, and here's the CSS. I found a link on how to do it thru bonrouge's site...but it's not quite working how i want it to. Thanks! I'm new to css web design and am attempting my first full layout. What I would like to do is have a hanging picture in the upper-righthand corner of the page that overlaps the header and content sections. All is well, until I specify a width or height on the content section. Although it looks fine in Firefox, IE either: a) moves the content section down or b) squishes the content to the side (if <!--<?xml version="1.0" encoding="utf-8"?>--> is in the html) Here's some much-simplified code to illustrate the problem: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="images/style_test.css" rel="stylesheet" type="text/css" />
<title>Sandbox</title>
</head>
<style type="text/css">
#header {
background-color: #cccccc;
border: 1px solid #564b47;
}
#content {
background-color: #c6dedf;
border: 1px solid #564b47;
width: 100%;
height: 400px;
}
#hanging {
float: right;
background-color: #ccff99;
border: 1px solid #564b47;
margin: 20px;
padding: 0;
width: 300px;
height: 300px;
clear: right;
}
#footer {
background-color: #cccccc;
border: 1px solid #564b47;
clear: both;
}
</style>
<body>
<div id="hanging"><code>#hanging {<br>
float: right;<br>
background-color: #ccff99;<br>
border: 1px solid #564b47;<br>
margin: 20px;<br>
padding: 0;<br>
width: 300px;<br>
height: 300px;<br>
clear: right;<br>
}</code><p>This SHOULD overlap header & content.</p></div>
<div id="header"><code>#header {<br>
background-color: #cccccc;<br>
border: 1px solid #564b47;<br>
}</code></div>
<div id="content"><code>#content {<br>
background-color: #c6dedf;<br>
border: 1px solid #564b47;<br>
width: 100%; /* hanging doesn't like this */<br>
height: 400px; /* or this in IE*/<br>
}</code></div>
<div id="footer"><code>#footer {<br>
background-color: #cccccc;<br>
border: 1px solid #564b47;<br>
clear: both;
}</code></div>
</body>
</html>
Anyone know a work-around or how to fix this? Thanks! so, i have a form with rounded corners, which i've had no problems with in the past. the problem here is that the background color behind the box with the rounded corners is going to be user-generated and the box itself can change in width. my solution was to float the corners left and right and have the rest filled in the middle. works perfectly in firefox, giving the middle element an automatic width with margins on either side equal to the size of the corner images. however, IE decided to add in extra space between the 3 elements. ive tried giving the elements a display:inline-block property, but it didnt help. Code:
#petition_letter {
width: 330px;
margin: 25px auto 0;
}
.lettertop .left, .lettertop .right {
display: block;
width: 15px;
height: 15px;
background-image: url(lettertop.gif);
background-repeat: no-repeat;
}
.letterbottom .left, .letterbottom .right {
display: block;
width: 15px;
height: 40px;
background-image: url(letterbottom.gif);
background-repeat: no-repeat;
}
.letterbottom .right { width: 40px; }
.lettertop .left { float: left; background-position: top left; }
.lettertop .right { float: right; background-position: top right; }
.letterbottom .left { float: left; background-position: bottom left; }
.letterbottom .right { float: right; background-position: bottom right; }
.lettertop .middle, .letterbottom .middle {
display: block;
height: 15px;
margin: 0 15px;
background: #fff;
}
.letterbottom .middle {
padding-bottom: 25px;
padding-left: 15px;
margin-right: 40px;
}
.lettercontent {
border-bottom: 1px solid #fff;
background-color: #fff;
padding: 0px 30px;
font-size: 12px;
}
<div id="petition_letter">
<div class="lettertop">
<span class="left"></span>
<span class="right"></span>
<span class="middle"></span>
</div>
<div class="lettercontent textColor">
blah blah
</div>
<div class="letterbottom">
<span class="left"></span>
<span class="right"></span>
<span class="middle"></span>
</div>
</div>
Hey all... I'm doing some testing in Firefox, and I've encountered a problem. Code: <div style="background-color: #FF9801; height: 33px; width: 99px; text-align: center; display: inline; padding-top: 8px;">Help</div> My intention here is to create a box that is 99px high, 33px wide, and with the text in the middle. In IE6, this appears to be fine. However, when testing it out in FF, I don't get the spacing that I want. Here's the kicker: When I add the float element, (float: left), it comes out the way I want it to. But it does seem to add a bit of whitespace above and to the left of it. I don't want the whitespace! Can anyone help with a compromise that will work in both browsers? My CSS usage has been pretty light until up to this issue. Thanks in advance! Greetings, Basic Layout is: Page-Containter -> Header-Container -> Side-Container -> Content-Container -> Footer-Container Header is normal Side is a Float Left with a width of 250 Content has a left margin of 260 (to allow for the Side-Container) Footer is normal. Pretty basic. In the content area there are more divisions to handle different sections of data. The problem is that in some of the content sections, I need to have dynamically allocated "blocks" of data that form psuedo "columns". I do this by doing a float:left on each of the content blocks. (generally a 250px width) That way if I show 1 or 5, they all snug up next to each other and wrap properly in the browser. Still pretty basic. Until ... drum roll please ... the next section. Since the content is "float:left", it's removed from the layout and the following sections will just "snug up" next to the last content block. I want the section to "clear" the previous content division, but don't really have a clean way to declare the "height" of that division, due to the dynamic nature of the data. Silly Rabbit ... just do a clear:left !! In IE it works fine. In Firefox, the clear:left command is clearing the previous container! (side-container ... aka: left nav bar) First question: Which browser is right? is IE right and the clear:left should be contained to it's own division? or is firefox right and the clear:left checks all float:left regardless of division? Second question: If IE is right, what is the fix ... if Firefox is right, how should I actually structure this? How come sometimes when I try to float left a div next to another div, it appears underneath the original and not all next to it? <div1></div1> <div2></div2> If I use float left on div1, div2 appears underneath div1, not next to it? confused beyond help! Hi, I have been working my way through the awesome 'Beginning CSS Web Development' by Simon Collison (highly recommended). I have also been studying and using other recourses online too. I am now toying with CSS and have created the following test page. consumer-review [dot] org [dot] uk [slash] test_lorum_ipsum [dot] html The External Style Sheet can be found at consumer-review [dot] org [dot] uk [slash] css [slash] default [dot] css I am pretty happy with it in Firefox 2. However there are three problems that no one has so far been able to help me with? Could you be the CSS genius that solves the problem? I hope so! 1) In IE6 the two floating elements (the smaller boxes on the right) don't appear where they should - they jump around the page and sometimes the content of them doesn't appear at all! Is there a simple code fix for this? 2) In Firefox 2 and Safari the links in the footer don't seem to be accessible (on my two PCs anyway), the pointer icon simply doesn't change to allow you to click! This is pretty strange! 3) In IE7 the titles/anchors that you jump to from the top of the page don't highlight. They highlight a nice yellow in Firefox! Is is possible for IE7 to highlight headers when they are jumped to via an anchor? I have been playing with this page for ages, there is probably plenty of redundant / clumsy code in the CSS sheet. Apologies for that, have only been learning for a few weeks and will neaten up when understand a bit more! I will also speed up the page loading. Thanks for any code suggestions / advice / assistance anyone can give. Good luck. Kind regards Theo. Hi all, Been playing about with some CSS for a simple e-comm site. Mockup here. There seems to be a few issues though between IE/FF. Thats all I've been able to test on so far though. The site validates properly as far as I can tell so that doesn't seem to be a problem. In Firefox, the left hand bottom sidebox overflows the page (the footer doesn't go below it). In IE it seems to be fine. In IE, the padding on the right hand side of the main content header box is not the same as the left side. Also, the main left bullet list is royally arsed up. At the moment, I can't spot any more issues than that. As I continue development and start to add more features, then I will probably crop up with more issues. The HTML for the site is here. The CSS for the site is here. Suggestions on how to fix it would be much appreciated. Cheers, Computer I tried to use height:auto, and put it into the main container, then I put it in the div that is floated. Nothing works in firefox for me. Ive tried searching on google but I cant find anything that works. Basically, its not just an issue with floats, in general, what is the correct way to set divs, to auto expand to cover what is inside and that works in IE, Firefox and safari, is there a way to ? Thanks in advanced. accidentally duplicate posted due to problem with server at school. please close and or delete this thread I have a page which contains a header / right column / left column / footer. header, left, footer have black background right has white background when the right column grows, taller then the left column the left column has a white area, how do I get the columns to have the same height so that the color fills the entire area.... i was able to reverse the problem so that the left stayed all black, but then the right was white and black. I need them both to be able to grow, causing depending on where the user is on the site, the left can have more then the right and vice versa ... I know this has been asked a million times, I have tried all the suggested fixes in this forum and others and none seem to work. please help ....... here is the code ... thats driving me up the wall. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fixed Width CSS Layouts - 2 Column - fw-14-2-col</title>
<style type="text/css">
html { /* for good browsers */
height: 100%;
}
* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
height:100%;
}
#wrapper {
margin: 0 auto;
width: 780px;
background: #ffffff;
}
#header {
color: #FFFFFF;
width: 780px;
float: left;
padding: 0px;
height: 45px;
margin: 0px 0px 0px 0px;
background: #000000;
}
#subwrap {
height:100%;
background:#FF0000;
}
#leftcolumn {
color: #FFFFFF;
background: #000000;
margin: 0px 0px 0px 0px;
padding: 10px;
height:100%;
width: 180px;
float: left;
}
#rightcolumn {
float: right;
color: #000000;
background: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 5px;
height:100%;
width: 560px;
display: inline;
}
#footer {
border: 1px solid #FF0000;
width: 780px;
clear: both;
color: #FFFFFF;
background: #000000;
margin: 0px 0px 0px 0px;
padding: 0px;
}
</style>
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
<h2>Header</h2>
</div>
<!-- End Header -->
<div id="subwrap">
<!-- Begin Left Column -->
<div id="leftcolumn">
Link 1<br />
Link 2<br />
Link 3<br />
Link 4<br />
Link 5<br />
Link 6<br />
Link 7<br />
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="rightcolumn">
<p><font color="#FF0000" ><b>FIXED</b></font> - this div should be ALL white. it should be white all the way down to the footer( red line )</p>
<br />
<p><font color="#FF0000"><b>BUG</b></font> - left column should stretch all the way down to the footer when right column grows.
<p> </p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
</div>
<!-- End Right Column -->
</div>
<!-- Begin Footer -->
<div id="footer">
<h2>Footer</h2>
</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>
first off, not sure what happened with that last post but i couldn't even edit or reply to it to fix it. so i'll try again. in firefox and ie i am having a problem making the center column stretch to 100% window size when the content within is not sufficient to take up the space of the browser window. have tried using min-height and height equaled to 100% in the body and center column. neither of which made any change. here is my css code: Code:
body, html {
font: 12px/1.5 Verdana, Arial, sans-serif;
color: #99ccff;
background-color: #ffffff;
margin: 0;
padding: 0;
}
img {
border: 0;
}
#centerColumn {
position: relative;
background: #ffffff url(images/columnBack.gif) center 0 repeat-y;
width: 800px;
left: 50%;
top: 0;
margin: 0 0 0 -400px;
}
#banner {
position: relative;
background: url(images/banner.jpg) center center no-repeat;
width: 788px;
height: 100px;
left: 6px;
top: 0;
z-index: 20;
}
#navigator {
position: relative;
background: transparent url(images/navBack.jpg) 0 0 no-repeat;
width: 788px;
height: 29px;
left: 6px;
border-top: 3px solid #99ccff;
border-bottom: 3px solid #99ccff;
z-index: 20;
}
#navList {
position: relative;
top: 3px;
left: 0;
margin: 0 112px 0 112px;
padding: 0;
z-index: 20;
}
a#nav1 {
display: block;
position: absolute;
background: transparent url(images/navIntroduction.jpg) 0 0 no-repeat;
width: 144px;
height: 29px;
left: 0;
top: -3px;
z-index: 10;
}
a#nav1:hover {
background-position: 0 -29px;
}
a#nav2 {
display: block;
position: absolute;
background: transparent url(images/navAboutUs.jpg) 0 0 no-repeat;
width: 144px;
height: 29px;
left: 144px;
top: -3px;
z-index: 10;
}
a#nav2:hover {
background-position: 0 -29px;
}
a#nav3 {
display: block;
position: absolute;
background: transparent url(images/navOnlineApplication.jpg) 0 0 no-repeat;
width: 144px;
height: 29px;
left: 288px;
top: -3px;
z-index: 10;
}
a#nav3:hover {
background-position: 0 -29px;
}
a#nav4 {
display: block;
position: absolute;
background: transparent url(images/navCalculators.jpg) 0 0 no-repeat;
width: 144px;
height: 29px;
left: 432px;
top: -3px;
z-index: 10;
}
a#nav4:hover {
background-position: 0 -29px;
}
#contentSpace {
position: relative;
background-color: transparent;
width: 788px;
left: 6px;
top: 0;
z-index: 20;
}
#contentHolder {
position: relative;
background-color: #ffffff;
width: 542px;
left: 0;
top: 0;
float: left;
clear: right;
z-index: 20;
}
#contentHolder h1 {
text-align: left;
font: 14px Verdana, Arial, sans-serif;
font-weight: bold;
font-style: italic;
margin: 10px 0 20px 20px;
}
#contentHolder h2 {
text-align: right;
font: 14px Verdana, Arial, sans-serif;
font-weight: bold;
margin: 0 15px 15px 0;
}
#contentHolder h3 {
text-align: left;
font: 12px Verdana, Arial, sans-serif;
font-weight: bold;
margin: 2px 0 0 0;
}
#contentHolder p {
text-align: left;
text-indent: 10px;
margin: 10px 15px 15px 20px;
}
#contactHolder {
position: relative;
background: #ffffff url(images/contact.jpg) center 20px no-repeat;
width: 242px;
height: 310px;
top: 0;
float: left;
clear: right;
z-index: 20;
}
#legal {
position: relative;
background-color: #ffffff;
font: 10px Verdana, Arial, sans-serif;
text-align: center;
width: 788px;
height: 14px;
left: 6px;
border-top: 3px solid #99ccff;
border-bottom: 3px solid #99ccff;
clear: both;
z-index: 20;
}
Hello, sorry to post another problem but I am trying to give my website a minimum height and it's just not working. I have written body {min-height:100%;} and even put html.body{min-height:100%} then i've created a container with min-height 100% and it doesn't create anything. So I changed it to #container {min-height 768px;} and put everything inside that div. This creates a box 768px high but doesn't extend when the content goes beyond that. to view this please visit #www. wheretoflyguide .com# and click 'add entry'. you will see that the content_area div which holds the main component extends down but the wrapper doesn't. The hideous colours are for illustrating the problems rather than design taste! Appreciate your help. I'm having trouble with a div's height not extending to the page height. It extends to the viewport height, but will not go any further. Here's an image illustrating my problem. Code: http://img.thesocs.com/img.php?r=FzRq0oq9Zm84dQFiCU The entire page is wrapped in a div with an id of #wrapper. Inside #wrapper is #header (blue in the image) and #main (green in the image). The image is an edited screencap of the entire page. The difference between the viewport height and the page height is the red arrow. The problem is that no matter how tall #main gets, #header does not grow taller than the viewport originally is. If the viewport is 700px tall, #header stays 700px tall, even if #main is 21000px tall. Also, I've given the html & body tags the "height: 100%;" property along with #wrapper and #header. Here's the CSS for these divs. Code: html, body {
margin: 0;
background: #FFF;
color: #000;
height: 100% !important;
min-height: 100%;
}
#wrapper {
margin: 0;
width: 970px;
height: 100% !important;
min-height: 100%;
}
#header {
margin: 0;
padding: 10px;
width: 200px;
background: #000;
color: #FFF;
position: absolute;
height: 100% !important;
min-height: 100%;
}
#main {
position: absolute;
left: 230px;
top 0px;
width: 740px;
}
Here's the stripped down HTML for the page. 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" dir="ltr" lang="en-US">
<head>
<title>[ TITLE HERE ]</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
[ HEADER & MENU HERE }
</div><!-- #header -->
<div id="main">
[ CONTENT HERE ]
</div><!-- #main -->
</div><!-- #wrapper -->
</body>
</html>
So can anyone tell me what I am doing wrong? How can I get #header to grow to the full height of the page, rather than the viewport? |
|||||||