homepage Welcome to WebmasterWorld Guest from 54.197.147.90
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, Moderator: open

CSS Forum

    
Wrapper, Footer, Floats?
Could it be a float problem? Footer not at bottom, wrapper height not 100%
Estef




msg:3540985
 10:55 am on Jan 5, 2008 (gmt 0)

Greetings!

I believe that I'm at the verge of having a CSS overload with the project I'm working on--hence the reason for being up at 4:30 in the morning...

I'm am fairly new to CSS and, oddly enough, it makes sense to me--but I have lots of learning to do. I still wonder why I didn't dive into it sooner.... it would have made things easier for me at the moment. Anyway, the problem I'm having probably deals with the #wrapper div for my layout. I didn't know I was having a problem until I tried to position a #footer at the bottom of the page and then hell broke loose. I googled for solutions and found and tried many, but nothing really worked. The footer was being placed at the end of the #primary-content div for some odd reason. I replaced the color of the #wrapper div to see if the height was stretched all the way to the bottom of the page, but it stopped at about the end of the #primary-content div. I have several divs contained inside the wrapper. Could it be a float issue? I am not sure what I'm overlooking.

Any help trying to figure this one out would be greatly appreciated.

Thanks in advance!

HERE'S MY CSS CODE:

html, body {
margin: 0;
text-align: center;
height: 100%;
min-height: 100%;
}

#wrapper {
width: 780px;
margin: 0 auto;
margin-top: 0;
padding: 0;
z-index: 0;
position: relative;
height: 100%;
}

html>body #wrapper {
height: auto;
}

#header {
width: 100%;
height: 135px;
margin: 0;
padding: 0;
}

#logo h1 a {
background-image: url("../styles/images/layouts/jot_royal/jotlogo.jpg");
background-repeat: no-repeat;
display: block;
font-size: 0!important;
text-align: right;
width: 276px!important;
height: 103px;
border: 0;
font-size: 0!important;
text-align: right;
margin: 0;
padding: 0;
float: left;
text-indent: -90000px;
}

#header .slogan {
padding-left: 90px;
text-align: left;
color: #CCCCCC;
font-type: Bookman Old Style, Times New Roman, Arial;
font-size: 11px;
font-style: italic;
position: relative;
top: 107px;
left: -184px;
}

#navbar{
padding: 0;
margin: 0;
position: relative;
top: -20px;
left: 10px;
float: left;
}

#navbar ul {
width: 100%;
background: transparent url('none') repeat-x 0 0;
height: 30px;
list-style-type: none;
}


#navbar li {
display:block;
float:left;
text-align:center;
height: 30px;
padding: 0 3px 0 3px;
line-height: 20pt;
}

#navbar li a {
height: 30px;
color: #8C6B3B;
font-type: Arial, Times New Roman, Bookman Old Style;
text-decoration: none;
background-color: transparent;
display:block;
padding: 0 3px 0 3px;
}

#navbar li a:hover,
#navbar li a:active {
background: transparent url('none') repeat-x 0 0;
display:block;
padding: 3px 3px 0 3px;
color: #FFFFCC;
}

#primary-content {
width: 100%;
height: 100%;
position: absolute;
margin-bottom: 55px;
}

.menu { text-align: left; margin: 10px; height: 100px; font-size: 10pt; font-family: arial; position: absolute; top: 17px; left: 8px; z-index: 100;}
.menu ul { margin: 0pt; padding: 0pt; position: relative; z-index: 500; list-style-type: none; width: 13em; }
.menu li { background-color: #0A0A0A; float: left; }
.menu li.sub { background-color: #0A0A0A;}
.menu table { position: absolute; border-collapse: collapse; top: 0pt; left: 0pt; z-index: 100; font-size: 1em; margin-top: -1px; }
.menu a, .menu a:visited { border: 1px solid #000000; display: block; text-decoration: none; height: 2em; line-height: 2em; width: 13em; color: #E29C2D; padding-left: 1em; font-weight: normal; font-style: normal; font-variant: normal; text-transform: none; }
.menu b { float: right; margin-right: 5px;}
* html .menu a, * html .menu a:visited { width: 13em; }
* html .menu a:hover { border-color: #000000; color: #ffffcc; background-color: #0A0A0A; position: relative; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li:hover { position: relative; }
.menu a:active, .menu a:focus { border-color: #000000; color: #ffffcc; background-color: #0A0A0A; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li:hover > a { border-color: #000000; color: #ffffcc; background-color: #0A0A0A; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li ul { padding: 2em; visibility: hidden; position: absolute; top: -2em; left: 12em; background-color: transparent; }
.menu li:hover > ul { visibility: visible; }
.menu ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul a:hover ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul { visibility: visible; }

#myGallery
{
width: 540px;
height: 220px;
position: relative;
top: 10px;
left: 198px;
margin: 0;
padding: 0;
z-index: 2;
float: left;
}

#sub-content {
width: 95%;
height: 200px;
border: none;
background-color: #0A0A0A;
margin: 0 auto;
margin-bottom: 20px;
padding-top: 15px;
padding-bottom: 15px;
position: relative;
top: 248px;
}

#box1 {
text-align: left;
padding: 0px 10px 10px 10px;
border-right: solid #000000 1px;
width: 275px;
height: 100%;
float: left;
}

#box2 {
text-align: left;
padding: 0px 10px 10px 10px;
width: 400px;
height: 100%;
float: left;
}

#footer {
width: 100%;
height: 45px;
background-color: #37183D;
margin: 0 auto;
font-size: 10px;
color: #190318;
position:absolute;
}

--------------------------------------------------
AND HERE'S MY BASIC HTML CODE:

<div id="wrap">
<div id="header">
<div id="logo">
<p class="slogan">
</p>
</div>

<div id="navbar"> </div>

<div id="primary-content">
<div id="myGallery"></div>
<div id="menu"></div>
</div>

<div id="sub-content">
<div id="box1"></div>
<div id="box2"></div>
</div>

</div><!--End of wrapper-->

<div id="footer"></div>

 

HarryM




msg:3541006
 12:23 pm on Jan 5, 2008 (gmt 0)

Looking at your html, you have 11 <div> tags, but only 10 </div> tags.

Estef




msg:3541146
 5:41 pm on Jan 5, 2008 (gmt 0)

I'm sorry, I left out the </div> for #header. Here's the upgrade:

<div id="wrap">
<div id="header">
<div id="logo">
<p class="slogan">
</p>
</div>

<div id="navbar"> </div>
</div> <!--End of header-->

<div id="primary-content">
<div id="myGallery"></div>
<div id="menu"></div>
</div>

<div id="sub-content">
<div id="box1"></div>
<div id="box2"></div>
</div>

</div><!--End of wrapper-->

<div id="footer"></div>

mayest




msg:3541200
 7:04 pm on Jan 5, 2008 (gmt 0)

Just curious, as I'm the last one you would ask for CSS and HTML help: Why is your footer div placed outside of the wrapper div? I always place mine right before closing the wrapper.

Also, have you tried putting clear:both; into the CSS for the footer div?

Estef




msg:3541209
 7:15 pm on Jan 5, 2008 (gmt 0)

I placed the #footer outside of the #wrapper div and used a Javascript code to attach the footer to the bottom of the page. I have recently added the .clear { clear: both;} code to see if it worked, but I still have had no luck. It made sense to me to place the footer outside the wrapper so that as the content in the wrapper grows, it essentially would push the footer to the bottom of the window. I found this article and tried it out, but my footer is still showing up in the middle of the page. I believe my wrapper div is not stretching 100%, but I have come to a dead end trying to figure out what to do to fix it. It seams as if the wrapper is only containing the divs up to #content-primary and not a thing in #content-secondary.

Here's the url for the article I found:

[edited by: SuzyUK at 7:56 pm (utc) on Jan. 5, 2008]
[edit reason] no URI's, thanks [/edit]

Estef




msg:3541210
 7:18 pm on Jan 5, 2008 (gmt 0)

Just a little correction: The correct names for the divs are #primary-content and #sub-content.

[edited by: Estef at 7:46 pm (utc) on Jan. 5, 2008]

Estef




msg:3541222
 7:45 pm on Jan 5, 2008 (gmt 0)

I thought that maybe if I show you a screen shot of what's happening, it'd be easier to figure something out.
The first link shows my layout as it appears, and I've changed the wrapper's background color in the second one for you to see where my wrapper seems to be stopping.

Screen shots: <snip>

Here's a look at my html code now:

<div id="wrap">
<div id="header">
<div id="logo">
<p class="slogan">
</p>
</div>

<div id="navbar"> </div>
</div><!--End of header-->

<div id="primary-content">
<div id="myGallery"></div>
<div id="menu"></div>
</div>

<div id="sub-content">
<div id="box1"></div>
<div id="box2"></div>
</div>

</div><!--End of wrapper-->

<div id="footer">
footer content here.
</div>
<div class="clear">&nbsp;</div>

[edited by: SuzyUK at 7:55 pm (utc) on Jan. 5, 2008]
[edit reason] no URL's or screenshots, thanks [/edit]

SuzyUK




msg:3541225
 7:53 pm on Jan 5, 2008 (gmt 0)

Estef, Welcome to WebmasterWorld!

I think you have more problems than you think :o

The wrapper div, is not "containing" anything, or at least not very much, the reason your wrapper goes down the page is due to the 100% height which is set on it. The footer is coming immediately after it.

Your problems are not so much floats as too much use of positioning.
Absolutely Positioned divs are removed from the flow, they do not take up any room (wrapper does not wrap around them!), relatively positioned elements are "offset" from their in flow place on the page by their co-ordinates, but the space they would've originally taken up if they hadn't been offset remains for them (so slogan for example moves to the left but the space it takes up remains under the header where it would've been)

I think you would get on better if you removed the height restrictions, removed the absolute positioning and tried the layout using floats (perhaps use absolute positioning for the slogan)

.. btw the layout doesn't work at all in IE7, there is horizontal scroll and footer is way off the right - but again these I think the differences can be corrected by relaxing the amount of positioning.

added: the above reply is based on the CSS code given in the first post not the shots that were snipped

[edited by: SuzyUK at 7:58 pm (utc) on Jan. 5, 2008]

Estef




msg:3541346
 11:03 pm on Jan 5, 2008 (gmt 0)

Thank you, Suzy for your advice. I decided to start from scratch and monitoring my divs to ensure they were contained were they needed to. I removed the absolute positioning, floated my divs, and removed unnecessary heights. The footer is finally at the end of the wrapper; however, I think my content is "spewing" out of my wrapper. I tried to keep a close watch on my divs' heights by attributing them bright colors for me to see on the screen. I'd appreciate it if you could take a look at it:

CSS:

html, body {
margin: 0;
height: 100%;
min-height: 100%;
background-color: #000000;
background-image: url('../styles/images/layouts/jot_royal/royalbg.jpg');
background-attachment: fixed;
background-position: top center;
background-repeat: no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 22px;
color: #FFFFFF;
text-align: center;
}

* {padding: 0; margin: 0;}
p {margin-top: 0;}

#wrap {
background-color: green;
width: 780px;
w\idth: 780px;
height: 100%;
margin: 0 auto;
margin-top: 0;
padding: 0;
z-index: 0;
position: relative;
text-align: left;
}

#header {
background-image: url('../styles/images/layouts/jot_royal/topbg.jpg');
background-repeat: no-repeat;
background-position: left top;
width: 100%;
height: 135px;
margin: 0;
padding: 0;
}

#header .slogan {
padding-left: 90px;
text-align: left;
color: #CCCCCC;
font-type: Bookman Old Style, Times New Roman, Arial;
font-size: 11px;
font-style: italic;
position: relative;
top: 107px;
left: -184px;
}

#navbar{
padding: 0;
margin: 0;
position: relative;
top: -20px;
left: 10px;
float: left;
}

#content {
width: 100%;
padding: 0;
background-color: none;
margin: 0;
position: relative;
float: left;
}

#menu-container {
width: 200px;
height: 240px;
padding-left: 8px;
padding-top: 18px;
float: left;
background-color: blue;
position: relative;
z-index: 100;
}

#flash-container {
width: 560px;
height: 240px;
padding-left: 10px;
padding-top: 15px;
float: left;
background-color: yellow;
position: relative;
left: -15px;
z-index: 2;
}

#box-container {
width: 95%;
background-color: #0A0A0A;
position: relative;
float: left;
margin-left: 15px;
}

.box1 {
width: 275px;
height: 200px;
float: left;
text-align: left;
padding: 0px 10px 10px 10px;
border-right: solid #000000 1px;
}

.box2 {
text-align: left;
padding: 0px 10px 10px 10px;
width: 400px;
height: 200px;
float: left;
}

#footer {
margin: 0px auto;
position: relative;
background-color: #37183D;
width: 780px;
padding: 5px 0;
clear: both;
}

.clear {
clear: both;
}

HTML CODE:

<div id="wrap"><!--Begin wrap-->
<div id="header"><!--Begin header-->
<div id="logo"><!--Begin logo-->
<p class="slogan"></p>
</div><!--End logo-->

<div id="navbar"><!--Begin navbar--></div><!--End navbar-->
</div><!--End header-->

<div id="content"> <!--Begin content-->
<div id="menu-container"><!--Begin menu-container-->
<div id="menu"><!--Begin menu--></div><!--End menu-->
</div><!--End menu-container-->

<div id="flash-container">
<div id="myGallery">
</div><!--End myGallery-->
</div><!--End flash-container-->

<div id="box-container">
<div class="box1"> could this work? </div>
<div class="box2"> I wonder... </div>
</div><!--End box-container-->
</div><!--End content-->
</div><!--End wrap-->
<div id="footer"><!--Begin Footer--> This is the footer. </div><!--End Footer-->
<div class="clear">&nbsp;</div>

[edited by: SuzyUK at 7:44 am (utc) on Jan. 6, 2008]
[edit reason] snipped excess code [/edit]

SuzyUK




msg:3541534
 11:15 am on Jan 6, 2008 (gmt 0)

OK, yea, that works better, though I still see unnecessary, IMHO, relative positioning the content is now being contained, by the wrapper

I think my content is "spewing" out of my wrapper.

Yes, it's overflowing which is the default - this time the wrapper background is being restricted by the 100% height. When an element has a height set on it, it will get no bigger than that height, so then if content exceeds height, whether too much content, or due to resolution, font-size changes etc, then the content will overflow the boundaries of it's containing box.

I would change the wrapper to min-height: 100%; - this won't work in IE6 and below but if it's crucial to the layout there is a workaround - I would work on those little bits last though ;) I also presume the other heights set throughout the template, e.g. box1, box2 are to show content areas. I don't recommend using height restrictions at all in layouts except when you're sure that the element/box cannot grow, e.g. image, flash container.

WRT the relative positioning, for example the slogan, I suggested using Absolute Positioning for that instead of Relative because this layout might actually benefit from removing that particular element from the flow in order to stick it on the left side. Because you're using relative positioning it's not physically moving it but is offsetting it, i.e. it is leaving, or reserving, the space where it should be (there's space under logo) Then you are using a negative top position for the navbar, but because you're also then using relative positioning to move the navbar up over the slogans "space", there is still space reserved for where the navbar should be so there is still a gap in there somewhere, it'll just appear to be under the navbar now. This will not be obvious as you have a height set on the header, but I would suggest removing all heights and then you will see the true flow.

Relative positioning is a funny thing and should be used sparingly, it is most often used to make an element into a "containing block [w3.org]" - in simple terms this means if you then want to position further elements inside these containing blocks they will take their position from the containing block instead of the viewport. Relative positioning also causes IE to do strange things at times, so IMHO is best avoided for crucial layout. You should be able to use margins, including negative margins, for up/down left/right placement of blocks - it will be much more stable.

One last thing, is the Box Model, padding and borders will add to the width/height of elements so if you want to add them after you have the layout sorted you should consider adding them to elements that are inside your main layout blocks, if you add them to the main blocks be aware that it will adjust the dimensions. e.g. see my code below and see that I've added a <ul> inside the navbar and applied the left spacing to it rather than the navbar container itself.

here's some sample CSS which could go with your HTML, removing all but one instance of relative positioning.. and changing the slogan to absolute.. heights are removed except for visual reasons so you can see that it is all now fitting snugly together. There are some comments in the CSS, but if it's not clear enough just ask:
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #000;
color: #fff;
text-align: center; /* IE center */
}

#wrap {
text-align: left; /* reset per IE center above */
position: relative; /* to make this the containing block; */
min-height: 100%;
background-color: green;
width: 780px;
margin: 0 auto; /* compliant center */
}
* html #wrap {height: 100%; /* for IE6 and below, min-height equivalent */ }

#header {
background: #ccc;
/*height: 135px; removed to show there's no gaps*/
}

#header .slogan {
position: absolute;
color: #fff;
top: 107px;
left: -94px;
}

#navbar{
background: #0f0;
color: #000;
}

#navbar ul {
margin: 0; padding: 0; list-style: none;/* zero bullets and ul defaults */
margin-left: 10px;
}

#content {
/*position: relative; */ /* possibly not needed */
float: left; /* float parent to contain floated children */
width: 100%;
background: #eee;
}

#menu-container {
float: left;
width: 200px;
height: 240px;
background-color: blue;
}

#flash-container {
float: left;
width: 560px;
margin-left: 20px;
height: 240px;
background-color: yellow;
}

#box-container {
float: left;
width: 680px;
margin-left: 50px;
background-color: #dad;
}

.box1 {
float: left;
width: 275px;
height: 200px;
border-right: 1px solid #000;
}

.box2 {
float: left;
width: 400px;
height: 200px;
}

#footer {
width: 780px;
margin: 0px auto;
background-color: #37183D;
padding: 5px 0;
}

PS: I also added a word or two of text inside each div in your HTML

-Suzy

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