PDA

View Full Version : Container Div



drumsinheaven
Mar 24th, 2010, 06:42 AM
Hello, I am having trouble getting my container div to stay wrapped around the divs that are inside the container. I have a drop shadow border that should be around the container div, but the div will only wrap around the header even though the code is around my other divs. Any help is much appreciated.

Let me know if you need any additional info. The css file is attached.



<!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>SQN Corp.</title>
<style type="text/css">
.textright {
text-align: right;
padding-right: 30px;
font-size: 10px;
}
</style>
<link href="sqn.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="lb">
<div id="rb">
<div id="bb"><div id="blc"><div id="brc">
<div id="tb"><div id="tlc">
<div id="trc"><div id="header">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="contact.html" id="current">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="contact.html">News</a></li>
<li><a href="contact.html">Links</a></li>
</ul>
</div>
</div>
<div id="mainbox">
<h4>Header</h4>
<p>Text</p>
<p class="textright">Contact Us</p>
<h4>Headefr</h4>
<p>Text</p>
<p class="textright">Contact Us</p>
<h4>Header</h4>
<p>Text</p>
<p class="textright">Contact Us</p>
<h4>Services for the already existing company:</h4>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<p class="textright">Contact Us</p>
</div>
</div></div></div></div>
</div></div></div></div>

</div>

<div id="footer">
<p>text</p>
</div>
</body>
</html>


Here is the css:



@charset "UTF-8";
/* CSS Document */

body {
background-color:#FFF;
}
body, td, th {
font-family: Verdana, Geneva, sans-serif;
font-size: 11pt;
}
#container {
width: 80%;
width: 828px;
margin-right: auto;
margin-left: auto;
position: relative;
}
#navcontainer a {
color:#000;
text-decoration:none;
}
#navcontainer a:hover {
color:#F60;
}
/* */

#tlc, #trc {
zoom: 1
}
#tlc, #trc, #blc, #brc {
background-color: transparent;
background-repeat: no-repeat;
}
#tlc {
background-image:url(Images/tlc.gif);
background-position: 0% 0%;
}
#trc {
background-image:url(Images/trc.gif);
background-position: 100% 0%;
}
#blc {
background-image:url(Images/blc.gif);
background-position: 0% 100%;
}
#brc {
background-image:url(Images/brc.gif);
background-position: 100% 100%;
}
#tb, #bb {
background-color: transparent;
background-repeat: repeat-x;
}
#tb {
background-image:url(Images/tb.gif);
background-position: 0% 0%;
}
#bb {
background-image:url(Images/bb.gif);
background-position: 50% 100%;
}
#rb {
background-image:url(Images/rb.gif);
background-position: 100% 0%;
background-repeat: repeat-y;
}
#lb {
background-image:url(Images/lb.gif);
background-position: 0% 100%;
background-repeat: repeat-y;
}
#header {
width: 520px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
padding-left: 260px;
height: 49px;
background-image: url(Images/logo_header.png);
background-position: left bottom;
background-repeat: no-repeat;
padding-top: 35px;
}
#navcontainer {
margin-left: 30px;
padding: 0;
height: 20px;
}
/*Fat Erik's Pipelist*/
#navlist {
list-style: none;
padding: 0;
margin: 0;
}
#navlist li {
display: inline;
margin-left: 20px;
}
#navlist li:before {
content: "|";
padding-right: 20px;
}
#navlist li:first-child:before {
content: "";
}
/*IE workaround*/
/*All IE browsers*/
* html #navlist li {
border-left: 1px solid black;
padding: 0 0.4em 0 0.4em;
margin: 0 0.4em 0 -0.4em;
}
/*Win IE browsers - hide from Mac IE\*/
* html #navlist {
height: 1%;
}
/*End hide*/
/*Mac IE 5*/
* html #navlist li:first-child {
border-left: 0;
}
#mainbox {
padding-top: 0px;
padding-right: 2px;
padding-bottom: 6px;
border-bottom-width: medium;
border-bottom-style: double;
border-bottom-color: #CCC;
border-top-width: medium;
border-top-style: double;
border-top-color: #CCC;
float: left;
padding-left: 2px;
margin-top: 10px;
margin-right: 24px;
margin-bottom: 10px;
margin-left: 24px;
}
#boxcontainer {
font-size: 12px;
clear:both;
margin-right: 12px;
margin-left: 12px;
}
#footer {
clear: both;
padding: 4px;
text-align: center;
}

Excavator
Mar 24th, 2010, 09:00 AM
Hello drumsinheaven,
Since your #footer is not enclosed in #container the clear:both; you put on it can't do anything.
To clear the floats in #container, add overflow: auto; like this -
#container {
width: 80%;
width: 828px;
margin-right: auto;
margin-left: auto;
position: relative;
overflow: auto;
}

See about clearing floats with overflow (http://www.quirksmode.org/css/clearing.html).


For a float to work (http://css.maxdesign.com.au/floatutorial/) properly, it must have a width. Something like this -

#mainbox {
padding-top: 0px;
padding-right: 2px;
padding-bottom: 6px;
border-bottom-width: medium;
border-bottom-style: double;
border-bottom-color: #CCC;
border-top-width: medium;
border-top-style: double;
border-top-color: #CCC;
width: 350px;
float: left;
padding-left: 2px;
margin-top: 10px;
margin-right: 24px;
margin-bottom: 10px;
margin-left: 24px;
}


Good job on the valid code by the way :thumbsup: