CSS/HTML Why are my divs colliding?

gingerbread · 01-10-2012, 12:10 PM

Hello!

For some reason, me footer is colliding with content in a previous div.

HTML:

Code:

<p class="dividertext">latest blog posts</p>
<div id="blogfeed></div>

<br />

<div class="footer">
<ul class="foot">
  <li><a class="foot" href="http://url.com/terms.html">terms and conditions</a></li>
  <li><a class="foot" href="http://url.com/privacy.html">privacy policy</a></li>
  <li><a class="foot" href="http://url.com/disclaimer.html">disclaimer</a></li>
  <li><a class="foot" href="http://url.com/contact.html">contact us</a></li>
</ul>



<div id="copyright"><p>copyright 2011  | marketing (pty) ltd. </p></div>
</div>

CSS:

Code:

.footer, .push {
height: 10em;
background-color: black;
color: #808080;
font-family: "Lucida Sans Unicode", Tahoma, sans-serif;
font-weight: bold;
font-size: 0.82em;
    border-top-style: dotted;  
    border-width: 0.5px;
    border-color: #1a1a1a;
}

a.foot:link {color: #808080; text-decoration: none;}
a.foot:visited {color: #808080; text-decoration: none;}
a.foot:hover {color: #00dbdb; text-decoration: underline;}
a.foot:active {color: #808080; text-decoration: none;}

 ul.foot {
    	list-style-type: none;
    	display: inline;
	max-width: 945px;
   	 padding-left: 0px;
   	 padding-top: 15px;
   	 margin-top: 2em;
   	 margin-left: 0px;
   	 margin-bottom: 25px;
   	 font-size: 0.82em;
   	 color: #808080;
   	 font-family: "Lucida Sans Unicode", Tahoma, sans-serif;
	font-weight: bold;
}
 
  ul.foot li {
    	margin-top: 0.5em;
	display: inline;
	max-width: 945px;
}

#blogfeed {
	background-color: #171717;
	width: 245px;
	height: 255px;
	margin-bottom: 2em;
}

This is what firebug shows:

Code:

<div id="blogfeed></div> <br /> <div class=" footer"="">

They are on the same line for some reason.

Any ideas or help would be immensly appreciated!!!

Thank you.

VIPStephan · 01-10-2012, 12:22 PM

If Firebug shows HTML like this then there’s clearly something wrong. Look at the attributes in the footer div. And I already see where it’s coming from: you forgot the closing quote on the blogfeed div’s ID attribute.

gingerbread · 01-10-2012, 03:18 PM

Quote:

Originally Posted by VIPStephan

If Firebug shows HTML like this then there’s clearly something wrong. Look at the attributes in the footer div. And I already see where it’s coming from: you forgot the closing quote on the blogfeed div’s ID attribute.

Hello, thank you for the reply.

I did include it:

HTML:

Code:

<p class="dividertext">latest blog posts</p>
<div id="blogfeed></div>

firebug:

Code:

div id="blogfeed></div> <br /> <div class=" footer"="">

I've validate my css - no problems.

VIPStephan · 01-10-2012, 03:59 PM

No, your error is:

Code:

<div id="blogfeed"></div>

Excavator · 01-10-2012, 04:24 PM

Hello gingerbread,
I couldn't help but notice your statement that you validated -

Quote:

I've validate my css - no problems.

There is also a validator for your markup that would catch your missing ".

gingerbread · 01-10-2012, 04:28 PM

Quote:

Originally Posted by Excavator

Hello gingerbread,
I couldn't help but notice your statement that you validated -

There is also a validator for your markup that would catch your missing ".

Many thanks to you as well as VIPStephan. I will make it a habit of validating my mark up.

Thanks!!!!!