Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS/HTML Why are my divs colliding?

    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.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,703
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    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.

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    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.
    Last edited by gingerbread; 01-10-2012 at 03:20 PM. Reason: extra info

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,703
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    No, your error is:
    Code:
    <div id="blogfeed"></div>

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello gingerbread,
    I couldn't help but notice your statement that you validated -
    I've validate my css - no problems.
    There is also a validator for your markup that would catch your missing ".
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Jan 2012
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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!!!!!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •