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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Divs floating left are stacking beneath each other

    Hey all,

    Im having a slight issue when floating my navigation divs left. The nav bar is made of 6 divs all nested in a container div. They are all set to float left and the container is of sufficient width to allow the fit.

    [ 1 ][ 2 ][ 3 ][ 4 ][ 5 ][ 6 ]

    In dreamweaver design view everything looks fine but when viewed in browser the divs stack one on top of the other.
    [ 1 ]
    [ 2 ]
    [ 3 ]
    [ 4 ]
    [ 5 ]
    [ 6 ]

    Any ideas as to why this might be happening? Bit confused as on previous sites I haven't had issues floating, think im missing something obvious.

    thanks in advance

    Code:
    <!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>Alex Rossell - Portfolio</title>
    <link href="CSS/Main Stylesheet.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    body {
    	margin-bottom: 0px;
    	margin-top: 0px;
    }
    -->
    </style></head>
    
    <body>
    
    <Div id= "wrapper">
    	
      <div id= "banner"><img src="Images/Site images/cloud-fantasy-960-x1000_01.gif" width="960" height="151" alt="Banner" /></div>
        
        <div id="Navigation"> 
        
        <div id="1"><img src="Images/Site images/cloud-fantasy-960-x1000_02.gif" width="11" height="24" /></div> 
        <div id="2"><img src="Images/Site images/cloud-fantasy-960-x1000_03.gif" width="49" height="24" /></div> 
        <div id="3"><img src="Images/Site images/cloud-fantasy-960-x1000_04.gif" width="20" height="24" /></div>
        <div id="4"><img src="Images/Site images/cloud-fantasy-960-x1000_05.gif" width="59" height="24" /></div>
        <div id="5"><img src="Images/Site images/cloud-fantasy-960-x1000_06.gif" width="19" height="24" /></div>
        <div id="6"><img src="Images/Site images/cloud-fantasy-960-x1000_07.gif" width="69" height="24" /></div>
        <div id="7"><img src="Images/Site images/cloud-fantasy-960-x1000_08.gif" width="733" height="24" /></div>
        
        
      </div>
        
    <div id= "Main"><img src="Images/Site images/cloud-fantasy-960-x1000_09.gif" width="960" height="775" alt="Content Area" /></div>
        
    <div id= "footer"><img src="Images/Site images/cloud-fantasy-960-x1000_10.gif" width="960" height="50" alt="Footer" /></div>
    
    
    
    </Div> <!-- close wrapper"-->  
    
    </body>
    </html>
    Code:
    #wrapper {
    	height: auto;
    	width: 960px;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    #wrapper #Navigation {
    	width: 960px;
    	float: left;
    	height: auto;
    }
    
    #wrapper #Navigation #1 img {
    	float: left;
    	height: auto;
    	clear: left;
    }
    #wrapper #Navigation #2 img {
    	float: left;
    	height: auto;
    }
    #wrapper #Navigation #3 img {
    	float: left;
    	height: auto;
    	width: auto;
    }
    #wrapper #Navigation #4 img {
    	float: left;
    	height: auto;
    	width: auto;
    }
    #wrapper #Navigation #5 img {
    	float: left;
    	height: auto;
    	width: auto;
    }
    #wrapper #Navigation #6 img {
    	float: left;
    	height: auto;
    	width: auto;
    }
    
    #wrapper #Main img {
    	float: left;
    	height: auto;
    	width: auto;
    }
    Last edited by alex1111; 08-22-2010 at 12:30 AM.

  • #2
    ee8
    ee8 is offline
    New Coder
    Join Date
    Dec 2009
    Posts
    14
    Thanks
    2
    Thanked 1 Time in 1 Post
    alex... sounds like it may be something similar to this old issue I had. Take a quick look, may be helpful or give you an idea on how to fix your issue.

    I'm not that good, so I can't help specifically.
    Spacing on top and bottom of pictures in Firefox using script...

    See post #4 and further down, where gusblake is mentioning them not lining up on 1 line and starts talking about the float:left. Sounds similar to your issue.

  • #3
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Try this. Should work out:

    Code:
    <!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>Alex Rossell - Portfolio</title>
    <link href="CSS/Main Stylesheet.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body {
    	margin-bottom: 0px;
    	margin-top: 0px;
    }
    
    #wrapper {
    	height: auto;
    	width: 960px;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    #wrapper #Navigation {
    	width: 960px;
    	height: 24px;
    }
    #wrapper #Navigation div {
    	float: left;
    	height: auto;
    	width:auto;
    	display:inline;
    }
    #wrapper #Navigation #1 {
    	clear: left;
    }
    #wrapper #Main img {
    	float: left;
    	height: auto;
    	width: auto;
    }
    </style>
    </head>
    
    <body>
    
    <div id= "wrapper">
    	
      <div id= "banner"><img src="Images/Site images/cloud-fantasy-960-x1000_01.gif" width="960" height="151" alt="Banner" /></div>
        
      <div id="Navigation">
        <div id="1"><img src="dave-snowman-peace.jpg" width="11" height="24" /></div> 
        <div id="2"><img src="dave-snowman-peace.jpg" width="49" height="24" /></div> 
        <div id="3"><img src="dave-snowman-peace.jpg" width="20" height="24" /></div>
        <div id="4"><img src="dave-snowman-peace.jpg" width="59" height="24" /></div>
        <div id="5"><img src="dave-snowman-peace.jpg" width="19" height="24" /></div>
        <div id="6"><img src="dave-snowman-peace.jpg" width="69" height="24" /></div>
        <div id="7"><img src="dave-snowman-peace.jpg" width="733" height="24" /></div>
      </div>
        
    <div id= "Main"><img src="Images/Site images/cloud-fantasy-960-x1000_09.gif" width="960" height="775" alt="Content Area" /></div>
        
    <div id= "footer"><img src="Images/Site images/cloud-fantasy-960-x1000_10.gif" width="960" height="50" alt="Footer" /></div>
    
    </div> <!-- close wrapper"-->  
    
    </body>
    </html>
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #4
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thats great and I can see how it works, but could you explain why the long way round I had taken didn't work?

    Thanks a lot, appreciate it!

  • #5
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    This link might help clarify. The method we used is demonstrated in #6.
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #6
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks guys, ill look forward to getting all that read up today!

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,802
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Quote Originally Posted by alex1111 View Post
    thats great and I can see how it works, but could you explain why the long way round I had taken didn't work?

    Thanks a lot, appreciate it!
    Validator is your friend! You can't have a number as the value of an id attribute.

    Now, if you remove all those ids and related styles and just add
    Code:
    #Navigation div{
    float:left;
    }
    into your CSS, it'll give you the desired output.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Validator is your friend! You can't have a number as the value of an id attribute.

    Now, if you remove all those ids and related styles and just add
    Code:
    #Navigation div{
    float:left;
    }
    into your CSS, it'll give you the desired output.
    Validator, love it! thanks very much.


  •  

    Posting Permissions

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