...

View Full Version : Box shows up over divider



conphill
11-15-2010, 01:29 AM
I am trying to make a container underneath my divider line, but the container appears over my divider line. I thought it was a padding issue, but everything I try doesn't change the issue.

HTML

<div class="divider">
</div>

<div class="container">
Your Website Content Goes Here
</div>


CSS


.divider {
background-image: url(images/divider.jpg);
background-repeat: no-repeat;
float: left;
height: 6px;
width: 960px;
margin-top: 20px;
margin-bottom: 20px;
}

.container {width:900px;
margin-left:auto;
margin-right:auto;
border:4px solid #000000;
border-spacing: 20px;
padding:inherit;
background:#ffffff; }

Excavator
11-15-2010, 01:44 AM
Hello conphill,
Does .divider really need to be floated? There is nothing beside it and that's the reason for floating.

Have a look at this -
<!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>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Comic Sans MS";
background: #FC6;
}
#container {
height: 600px;
width: 980px;
margin: 30px auto;
background: #999;
overflow: auto;
font-size: 0.8em;
}
.divider {
background: #f00 url(images/divider.jpg) no-repeat;
height: 6px;
width: 960px;
margin: 20px auto;
}
.container {
width:900px;
margin: 0 auto;
border: 4px solid #000000;
background: #fff;
}
</style>
</head>
<body>
<div id="container">
<div class="divider"> </div>
<div class="container"> Your Website Content Goes Here </div>
<!--end container--></div>
</body>
</html>

conphill
11-15-2010, 01:53 AM
That works but the issue is I have another divider to separate my header. Getting rid of the float puts the divider in my header.

Full Html/css

HTML

<body>
<!--CONTAINER STARTS-->
<div id="container">
<!--HEADER/NAVIGATION STARTS-->
<div id="top">
<!--WEBSITE TITLE STARTS-->
<div id="title">
<h1><a href="index.html" title="CampusTaps.com">Your Website Name</a></h1>
</div>
<!--WEBSITE TITLE ENDS-->
<!--NAVIGATION STARTS-->
<div id="nav">
<ul class="nav-links">
<li><a href="index.html" title="Home">Home</a></li>
<li><a href="LiquorPrices.html" title="Liquor Prices">Liquor Prices</a></li>
<li><a href="CollegeBars.html" title="College Bars">College Bars</a></li>
<li class="borderx2"><a href="#" title="contact">contact</a></li>
</ul>
</div>
<!--NAVIGATION ENDS-->
</div>
<!--HEADER/NAVIGATION ENDS-->

<div class="divider"
</div>

<div>
<center><iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" align="middle" src="http://maps.google.com/maps/ms?ie=UTF8&amp;msa=0&amp;msid=113726611510896607207.000494a4e9ff048f6cd00&amp;ll=39.358193,-76.616592&amp;spn=0.185819,0.291824&amp;z=11&amp;output=embed"></iframe><br /><small>View <a href="http://maps.google.com/maps/ms?ie=UTF8&amp;msa=0&amp;msid=113726611510896607207.000494a4e9ff048f6cd00&amp;ll=39.358193,-76.616592&amp;spn=0.185819,0.291824&amp;z=11&amp;source=embed" style="color:#0000FF;text-align:left">College Bars</a> in a larger map</small>
</div>

<div class="divider">
</div>

<div class="barbox">
<p>Your Website Content Goes Here</p>
<p>d</p>
dd
dd
</div>


</body>


CSS

* {
margin: 0px;
padding: 0px;
border: none;
}
body {
background-image: url(images/Body-bg.jpg);
background-repeat: repeat-x;
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #c8c8c8;
}
#container {
margin: auto;
width: 850px;
}
#top {
float: left;
width: 850px;
height: 119px;
}
#title {
float: left;
width: 278px;
height: 74px;
padding-top: 45px;
}
#title h1 {
display: block;
float: left;
width: 278px;
height: 74px;
text-indent: -9999px;
}
#title h1 a {
display: block;
width: 100%;
height: 100%;
background-image: url(images/campustapslogosmall.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
#navigation { float: right; }
.nav-links li {
display: block;
float: left;
list-style-type: none;
}
.nav-links li a {
float: left;
width: 120px;
height: 68px;
text-decoration: none;
text-transform: capitalize;
color: #666666;
font-size: 12px;
text-align: center;
padding-top: 51px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #cecece;
}
.nav-links li a:hover {
color: #ffffff;
background-position: center bottom;
}
li.borderx2 {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #cecece;
}

.divider {
background-image: url(images/divider.jpg);
background-repeat: no-repeat;

height: 6px;
width: 960px;
margin-top: 20px;
margin-bottom: 20px;
}



.sidebar-list li {
list-style-type: none;
color: #2C5923;
font-size:14px;
margin-top: 20px;
padding-bottom: 10px;

}

#content {

height: 370px;
width: 650px;
background-image: url(images/LiquorPricesBox.jpg);
background-repeat: no-repeat;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px;
}
#hor-minimalist-b
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
background: #fff;
margin: 45px;
width: 480px;
border-collapse: collapse;
text-align: left;
}
#hor-minimalist-b th
{
font-size: 14px;
font-weight: normal;
color: #039;
padding: 10px 10px;
border-bottom: 2px solid #6678b1;
}
#hor-minimalist-b td
{
border-bottom: 1px solid #ccc;
color: #669;
padding: 6px 8px;
}
#hor-minimalist-b tbody tr:hover td
{
color: #009;
}


.barbox {
width:900px;
margin: 0 auto;
border: 4px solid #000000;
background: #fff;
}


#barbox {
height: 600px;
width: 980px;
margin: 30px auto;
background: #999;
overflow: auto;
font-size: 0.8em;

Excavator
11-15-2010, 02:19 AM
You have another full width element floated, #top, with nothing beside it. No need for a float there either.

Change these bits in your CSS

.divider {
background: #f00 url(images/divider.jpg) no-repeat;
/*float: left;*/
height: 6px;
width: 960px;
margin: 20px auto;
}
#top {
/*float: left;*/
width: 850px;
height: 119px;
}


When posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.

conphill
11-15-2010, 02:39 AM
That works. Thank you. Sorry about the coding



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum