PDA

View Full Version : nested divs spilling out of container div fix


scrufffydoo
12-30-2008, 12:23 PM
Hi all

I used a standard CS3 layout for a new page of 3 columns (2 sidebar) 1 header and footer but I just couldn't get the 2 sidebars to stay within a container I added. Every time I added content the columns extended into the footer. This niggle wasn't visible in IE but was in FF. Anyway after I found a fix which seems to work very well so thought I'd share it.

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
copy it into your css and then add the class to the container div and it holds all the divs within it in place. I am getting an error code as unsupported css for the content value so if anyones got any advice on an alternative I'd love to hear it. :)

I'm also having problems with FF inserting a horiz space at the top of my footer (although its fine in IE) and am struggling to get rid of the 'floating non float bug' error message for my div ID credit card logo (line 110) apparently this occurs when you have a centred no floating div following a floated one :confused: any help greatly appreciated

thanks

html
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>scrooz online fasteners</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
#sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
#sidebar1 { padding-top: 20px; }
#sidebar2 { padding-top: 0px; }
#mainContent { zoom: 1; padding-top: 20px;}
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<style type="text/css">
<!--
-->
</style>
</head>

<body>
<div id="wrapper">

<div id="header">
<div id="toprightmenu">
<!-- Begin Vista-Buttons.com -->
<script type="text/javascript"> var vbImgPath="assets/js/toprightmenuindex-files/"</script>
<script type="text/javascript" src="assets/js/toprightmenuindex-files/scwzu27.js"></script>
<noscript><a href="<A href="http://vista-buttons.com">Website">http://vista-buttons.com">Website Button Makers by Vista-Buttons.com v2.81</a></noscript>
<!-- End Vista-Buttons.com -->
<div id="toprightmenureflect"></div>
<!--end #toprightmenu--></div>
<h1><span class="style3">headergggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggg</span></h1>
<div id="mainlogobox"><img src="images/mainlogofinal.jpg" alt="mainlogo" width="380" height="140" longdesc="images/mainlogofinal.jpg" /></div>
<!-- end #header --></div>
<div id="navbarcontainer">
<div id="navbuttonbar">
<!-- Begin Vista-Buttons.com -->
<script type="text/javascript"> var vbImgPath="assets/js/navbarindex-files/"</script>
<script type="text/javascript" src="assets/js/navbarindex-files/sca2zkp.js"></script>
<noscript><a href="<A href="http://vista-buttons.com">Website">http://vista-buttons.com">Website Button Makers by Vista-Buttons.com v2.81</a></noscript>
<!-- End Vista-Buttons.com -->
<!--end #navbuttonbar--></div>
<!--end #navbarcontainer--></div>

<div id="navbarreflect"></div>
<div class="clearfix" id="container">
<div id="banner"></div>

<div id="sidebar1">
<p>menu </p>
<div id="leftsidemenubox">
<ul id="mainleftnavlist">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>
<li>item 12</li>
<li>item 13</li>
<li>item 14</li>
<li>item 15</li>
<li>item 16</li>
<li>item 17</li>
<li>item 18</li>
<li>item 19</li>
<li>item 20</li>
</ul>
<!--end #leftsidemenubox--></div>
<!-- end #sidebar1 --></div>

<div id="sidebar2">
<!-- Begin Vista-Buttons.com -->
<script type="text/javascript"> var vbImgPath="assets/js/sidebar2index-files/"</script>
<script type="text/javascript" src="assets/js/sidebar2index-files/scgfg1p.js"></script>
<noscript><a href="<A href="http://vista-buttons.com">Website">http://vista-buttons.com">Website Button Makers by Vista-Buttons.com v2.81</a></noscript>
<!-- End Vista-Buttons.com -->
<div id="sidebar2offer1">Content for id "sidebar2offer1" Goes Here </div>
<div id="sidebar2offer2">Content for id "sidebar2offer2" Goes Here </div>
<div id="sidebar2offer3">Content for id "sidebar2offer3" Goes Here </div>
<!-- end #sidebar2 --></div>

<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. SeLorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Semmodo porttitor, felis. Nam blandit quam ut lacus. onec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce 800 variusurna id quam. Semmodo porttitor, felis. Nam blandit quam ut lacus.
<!-- end #mainContent -->
</p>
</div>
<br class="clearfloat" />
</div>
<!--end #wrapper--></div>

<div id="footer">
<div id="footernavbox">home | store | terms and conditions| contact us| my account</div><div id="copyright">copyright 2008 scrooz pty ltd</div>

<div id="creditcardlogo">
<div><img src="images/creditcardsblackreflectbg.gif" alt="creditcardlogo" width="160" height="60" longdesc="images/creditcardsblackreflectbg.gif" /></div>
</div>
<p>timber screws | chipboard screws | type 17 screws | drywall screws | collated screws| tek screws | self drilling sc rews|stainless steel screws | self tapping screws | coach screws | rivets | high tensile bolts | mild steel bolts | nuts | locking nuts | threaded bars | washers | screwbolts | sleeve anchors | hardware | masonry fixings | roofing fasteners | nails| drill bits | holesaws | screwdriver bits |</p>
<!-- end #footer --></div>
</body>
</html>

------------------------------------------------------------------

css
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #000000;
margin: 0px; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0px;
z-index: 1;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#banner {
height: 155px;
background-image: url(images/mainbanneroption3.jpg);
background-color: #999999;
}
#container {
width: 980px;
text-align: left; /* this overrides the text-align: center on the body element. */
z-index: 6;
background-color: #FFFFFF;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;

}
#footer {
background-color: #000000;
width: 980px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
color: #666666;
font-family: "Trebuchet MS", Verdana;
font-size: 12px;
}
#footernavbox {
font-family: "Trebuchet MS", Verdana;
font-size: 12px;
color: #FFCC66;
text-align: left;
padding: 0px;
width: 780px;
float: left;
}
#copyright {
font-family: "Trebuchet MS", Verdana;
font-size: 10px;
text-align: right;
color: #FFFFFF;
width: 200px;
float: left;
}
#creditcardlogo {
margin-top: 40px;
margin-bottom: 0px;
width: 300px;
margin-left: auto;
text-align: center;
margin-right: auto;
}

#header {
background-color: #FFFFFF;
width: 980px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
padding: 0px;
z-index: 3;
height: 170px;
}
#header h1 {
font-family: "Trebuchet MS", Verdana;
font-size: small;
font-style: normal;
color: #FFFFFF;
text-align: left;
vertical-align: top;
margin: 0px;
padding: 0px;
}
#leftsidemenubox {
margin: 0px;
padding: 0px;
background-color: #FFCC33;
width: 140px;
clear: both;
}
#mainContent {
z-index: 8;
background-color: #FFFFFF;
padding: 0px;
margin-top: 0px;
margin-right: 160px;
margin-bottom: 0px;
margin-left: 160px;
border-bottom-style: none;
}
#mainlogobox {
float: left;
height: 140px;
width: 380px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#mainleftnavlist {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
font-family: "Trebuchet MS", Verdana;
font-size: 12px;
color: #999999;
}
#navbarcontainer {
height: 35px;
background-color: #000000;
font-family: Arial, Helvetica, sans-serif;
z-index: 4;
background-image: url(images/background-navbar-3000px.jpg);
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
}
#navbuttonbar {
padding: 0px;
height: 35px;
width: 980px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
z-index: 5;
margin-bottom: 0px;
background-image: url(images/background-navbar-3000px.jpg);
background-color: #000000;
}
#navbarreflect {
background-color: #FFFFFF;
height: 35px;
width: 100%;
background-repeat: repeat;
background-image: url(images/navbarbg1.jpg);
margin-top: 3px;
}
#sidebar1 {
float: left; /* since this element is floated, a width must be given */
background-color: #999999;
z-index: 7;
width: 140px;
color: #000000;
margin: 0px;
padding: 0px;
position: relative;
clear: both;
}
#sidebar2 {
float: right;
width: 140px;
padding: 0px;
background-color: #999999;
color: #000000;
clear: right;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#sidebar2offer1 {
background-color: #FFCC66;
height: 80px;
}
#sidebar2offer2 {
background-color: #FF9933;
height: 90px;
}
#sidebar2offer3 {
height: 150px;
background-color: #00FF66;
}

#toprightmenu {
margin: 0px;
padding: 0px;
float: right;
height: 100px;
width: 175px;
}
#toprightmenureflect {
float: right;
height: 25px;
width: 175px;
background-image: url(images/toprightmenureflect.jpg);
padding: 0px;
margin-top: 2px;
}

#wrapper {
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
z-index: 2;
}

domedia
12-30-2008, 05:47 PM
the above method is 4 years old.
Try this:
.cleafix {
overflow: hidden;
height: 1%;
}
instead. It does the same thing and it's cross browser :)

scrufffydoo
12-31-2008, 01:40 AM
thanks a lot, that's a much leaner fix and works like a charm.:-) Its my first site with full css (although I have been tempted to bang the odd table in) , I can see the power of it although its pretty frustrating to learn ,but worth it in the long run I guess fior the shear amount of design options.


current drama is - for some reason my left nav menu grows by around 4 lines in firefox (footer text also drops a line)but is OK in IE, spent ages on it and am baffled, any ideas anyone?

thanks

domedia
12-31-2008, 04:54 AM
thanks a lot, that's a much leaner fix and works like a charm.:-) Its my first site with full css (although I have been tempted to bang the odd table in) , I can see the power of it although its pretty frustrating to learn ,but worth it in the long run I guess fior the shear amount of design options. Excellent, once you get more into it you'll never look back :)


current drama is - for some reason my left nav menu grows by around 4 lines in firefox (footer text also drops a line)but is OK in IE, spent ages on it and am baffled, any ideas anyone?

thanks Put it online and give us the URL. Plenty of people willing to help you through this 8)

scrufffydoo
12-31-2008, 05:14 AM
whats the best way to upload it (freespace etc) as I don't have the ftp details for the space Ive ordered yet. thanks

domedia
12-31-2008, 01:28 PM
Any webspace will do.

scrufffydoo
01-01-2009, 03:40 AM
OK its uploaded and viewable at www.scroozdev.net (http://www.scroozdev.net) its just the index page at the mo, ignore the text and buttons etc, I'll add the detail once the layouts ok.

I got round most of the FF problems by changing the design to avoid them but am still stumped on the extending left column along with a '3px text jog' error message for the small header text at the top.

Oh and happy new year to all from down under :-D

scrufffydoo
01-01-2009, 09:56 AM
text jog now fixed

scrufffydoo
01-02-2009, 12:34 AM
still can't figure this left column issue, anyone got any ideas?

domedia
01-02-2009, 02:11 PM
The LI's in your menu have no margins or padding set, so you're getting default values for these in FF and IE.
Set some values for '#mainleftnavlist li' and you should start to some more consistency.

scrufffydoo
01-02-2009, 03:03 PM
thanks, tried it but no joy, for some reason the sidebar isn't contained by the container even though its wrapped in its div tags :confused: so I reckon that must be part of the problem. tempted to just delete the whole bar and start again.

domedia
01-02-2009, 06:06 PM
That's not how it works. The sidebar will grow based on content.
I added margin and padding the to the LI's and got same height in both browsers.

scrufffydoo
01-02-2009, 08:58 PM
just switched on again this morning and it worked for me now as well, maybe I didn't refresh my browser properly late last night :rolleyes: thanks a million for the help.

Im used to print so don't quite think in the evil ways of the web yet, incidentally the lynda.com tuts are excellent and thoroughly recommended.