homepage Welcome to WebmasterWorld Guest from 54.166.108.167
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

    
Div Layer Height
joshffr




msg:4320411
 10:22 am on Jun 1, 2011 (gmt 0)

Hi, I'm pretty new to coding complete Div/CSS layouts and I'm having a bit of a problem at the moment. I'm trying to make a layout that looks like the following: [i232.photobucket.com...]

As you can see the left navigation bar and the content bar extend all the way down to the bottom of the footer Div. I've got this far coding it: [ffrebirth.com...]

The navigation bar and the content bar don't extend to the bottom of the footer Div and I have no idea why. My initial thought was to wrap both of them in a Div layer with height:500px; and set both the navigation Div and content Div to height:100%;. However this caused the text to overflow below the footer and outside of the layout, min-height didn't work either.

Here's the code and CSS:

<body>
<div id="wrapper">
<div id="layoutbg">
<div id="topnavigation"><div id="topnavigationhome"><img src="assets/bullet.png" width="11" height="11" alt="Final Fantasy" /> Final Fantasy Rebirth</div><div id="topnavigationlinks"><img src="assets/bullet.png" width="11" height="11" alt="Final Fantasy" /> VII <img src="assets/bullet.png" width="11" height="11" alt="Final Fantasy" /> VIII <img src="assets/bullet.png" width="11" height="11" alt="Final Fantasy" /> IX <img src="assets/bullet.png" width="11" height="11" alt="Final Fantasy" /> X <img src="assets/bullet.png" width="11" height="11" alt="Final Fantasy" /> X-2 <img src="assets/bullet.png" width="11" height="11" alt="Final Fantasy" /> XII <img src="assets/bullet.png" width="11" height="11" alt="Final Fantasy" /> XIII <img src="assets/bullet.png" width="11" height="11" alt="Final Fantasy" /> Versus XIII</div></div>
<div id="banner"><img src="assets/banner.jpg" width="785" height="125" alt="Final Fantasy" /></div>
<div id="navigation"><img src="assets/navigation.png" width="149" height="27" alt="Final Fantasy" />
<div id="navigationtextholder"><h1>Coverage</h1>
<ul class="navigationlinks">
<li>Final Fantasy VII</li>
<li>Final Fantasy VIII</li>
<li>Final Fantasy IX</li>
<li>Final Fantasy X</li>
<li>Final Fantasy X-2</li>
<li>Final Fantasy XII</li>
<li>Final Fantasy XIII</li>
<li>Final Fantasy Versus XIII</li></ul>

<h1>Site Related</h1>
<ul class="navigationlinks">
<li>Home</li>
<li>Affiliation</li></ul>

<h1>Affiliates</h1>
<ul class="navigationlinks">
<li>Your Link Here?</li></ul>
</div></div>
<div id="contentarea"><img src="assets/content.png" width="97" height="27" alt="Final Fantasy" />
<div id="contenttextholder">
Content
</div></div>
<div id="footer"><div id="copyright">Website copyright Final Fantasy Rebirth &copy; 2005-2011. No copyright infringement intended. FINAL FANTASY is a registered trademark of Square Enix Co., Ltd.</div></div>
</div>
</div>
</body>


CSS:
@charset "utf-8";
/* CSS Document */
body { margin-top:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
background-image:url(assets/bg.gif);
}

h1 { background-image:url(assets/h1bg.gif);
background-repeat:no-repeat;
width:140px;
height:17px;
margin:0px;
text-indent:15px;
font-size:12px;
font-weight:bold;
}

ul.navigationlinks { list-style: none;
margin-left:-40px;
margin-top:0px;
margin-bottom:5px;
}

/* Layout Styles */
#wrapper { width: 795px;
margin: 0 auto;
}

#layoutbg { width:795px;
position:absolute;
background-color:#03080a; }

#topnavigation { width:785px;
height:24px;
border:1px #000000 solid;
background-image:url(assets/topnavigationbg.gif);
background-repeat:repeat-x;
background-position:top;
margin: 0 auto;
margin-top:5px;
margin-bottom:3px;
font-size:12px;
font-weight:bold;
position:relative;
}

#topnavigationhome { float:left;
height:24px;
margin-top:4px;
}

#topnavigationlinks { text-align:right;
float:right;
height:24px;
margin-top:4px;
}

#banner { width:785px;
height:125px;
border:1px #000000 solid;
margin: 0 auto;
margin-left:5px;
float:left;
}

#navigation { width:150px;
border:1px #000000 solid;
background-image:url(assets/navicontentbg.png);
background-repeat:repeat-x;
background-position:top;
background-color:#0a171d;
margin-top:3px;
margin-left:3px;
float:left;
}

#navigationtextholder { width:140px;
margin: 0 auto;
word-wrap: break-word;
}

#contentarea { width:629px;
border:1px #000000 solid;
background-image:url(assets/navicontentbg.png);
background-repeat:repeat-x;
background-position:top;
background-color:#0a171d;
margin-top:3px;
margin-left:3px;
margin-right:5px;
float:right;
}

#contenttextholder { width:619px;
margin: 0 auto;
word-wrap: break-word;
}

#footer { width:785px;
border:1px #000000 solid;
background-image:url(assets/footerbg.gif);
background-repeat:repeat-x;
background-position:top;
height:24px;
float:left;
margin: 0 auto;
margin-top:3px;
margin-bottom:5px;
position:relative;
}

#copyright { height:24px;
margin-top:4px;
text-align:center;
}


Any ideas as to why it's not working properly? Thanks.

 

alt131




msg:4321466
 9:14 am on Jun 3, 2011 (gmt 0)

Hi joshffr [webmasterworld.com], and welcome to WebmasterWorld :)
The navigation bar and the content bar don't extend to the bottom of the footer Div and I have no idea why.
Without an explicit height they will expand to contain the content. If the content is too "short" to fill the space down to the footer, they won't expand that far.

... wrap both of them in a Div layer with height:500px; and set both the navigation Div and content Div to height:100%;. However this caused the text to overflow below the footer and outside of the layout, min-height didn't work either.
An element with height:100% will be 100% the height of its parent. So if the parent was height:500px the child elements will take that for both height and min-height. Both nav and content are floated, which means they are removed from the normal flow - and that means they expand regardless of the other elements. What you saw is expected behaviour - although not what was wanted ;)

Section 9.5 [w3.org] of the css recommendations deals with floats, and if you scroll down to just before the start of section 9.5.1 there are two pictires. The first one illustrates what I expect was happening.

Making this work is quite possible, but the "best" technique depends on the browser/versions you are supporting. What you are wanting seems to be a a fixed-width, 2-col, 100% height, full width header and footer. A search on combinations of those terms will bring up plenty of suggestions.

joshffr




msg:4322103
 11:17 pm on Jun 4, 2011 (gmt 0)

Thanks for the advice.

Took me a while but I finally managed to get it sorted. Ended up using a faux background and clearing the floats.

Kind of cheating but it works! :D

alt131




msg:4322160
 9:08 am on Jun 5, 2011 (gmt 0)

joshffr, good to hear you have it resolved :)

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