...

View Full Version : Divs floating left are stacking beneath each other



alex1111
08-22-2010, 12:26 AM
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 :)


<!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>



#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;
}

ee8
08-22-2010, 12:56 AM
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.
http://www.codingforums.com/showthread.php?t=184782

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.

optimus203
08-22-2010, 03:25 AM
Try this. Should work out:



<!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>

alex1111
08-22-2010, 03:41 AM
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!

optimus203
08-22-2010, 04:03 AM
This link (http://css.maxdesign.com.au/floatutorial/) might help clarify. The method we used is demonstrated in #6.

alex1111
08-22-2010, 10:40 AM
thanks guys, ill look forward to getting all that read up today!

abduraooft
08-22-2010, 10:59 AM
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 (http://validator.w3.org/#validate_by_input) 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
#Navigation div{
float:left;
} into your CSS, it'll give you the desired output.

alex1111
08-22-2010, 08:16 PM
Validator (http://validator.w3.org/#validate_by_input) 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
#Navigation div{
float:left;
} into your CSS, it'll give you the desired output.

Validator, love it! thanks very much.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum