Text in Div breaks structure

Jako posted this at 23:38 — 15th October 2007.

Joined: Sep 2006

I have a nicely laid out web page. (Using XHTML Strict 1.0 and CSS Level2).

All divs floated etc, with a menu on the left and and main content area sitting nicely next to it but with a 10pixel gap between them both.

If i set the background colours then all looks nice and they align perfectly.

But, i have then added tags to the menu div - this then drops the main content div below the last on the menu div.

The text is a lot smaller than the width of the menu div so cannot see a problem there.

Both Divs are contained within a Div called "Container".

Please could someone advise :

Here is the css for the divs

/* Fuchsia color for test purposes only*/
#content
{	
	width: 530px;
	min-height: 500px;
	margin-left: 160px;
	background-color: Fuchsia;
}

#menu 
{		
	border-top: 1px dashed #EDF1F2;
	background-image: url(images/shad.jpg);
	background-repeat: no-repeat;
}		
#menu
{
background-color: #FFFFFF;
	float:left;
	width:140px;
	margin-left: 40px;
	min-height: 500px;
	background-image: url(images/shad.jpg);
	background-repeat: no-repeat;
 }

/* Text inserted into menu Div*/
#menudata 
{
font-size:0.9em;
margin: 0;
padding: 0;
}

#menudata a 
{
display: block;
background: url(images/arrow.gif) no-repeat center left ;
color: #6A849D;
padding: 2px 2px 5px 15px;
margin: 0 0 1px 0;
text-decoration: none;
background-position: 4px;
}

#menudata a:hover 
{
color: #AE6427;
background:  url(images/arrow.gif) no-repeat center left;
background-position: 4px;
}

The HTML is:

<body>

<div id="wrapper">

<div id="container">

	<div id="toplogo">
	</div>
	
<div class="navcontainer">
		
    <ul id="navlist">
        <li><a href="index.html">Home</a></li>
        <li><a href="products.html">Products</a></li>
        <li><a href="manufacture.html">Manufacture</a></li>
        <li><a href="distribution.html">Distribution</a></li>
        <li><a href="news.html">News</a></li>
        <li><a href="brochure.html">Brochure</a></li>
        <li><a href="directions.html">How to find us</a></li>
        <li><a href="contactus.html">Contact us</a></li>
    </ul>
</div></div>
	
	
<div id="menu">
	
    <div id="menudata">
    <a href="#">Alpha</a> 
    <a href="#">Beta</a> 
    <a href="#">Gamma</a> 
    <a href="#">Delta</a>
</div>		

<div id="content">
</div>
	
	
	
</div>

<div id="footer">
	&nbsp;
	
</div>


</body>
</html>

Any advice greatly appreciated.

greg posted this at 12:49 — 16th October 2007.

He has: 1,581 posts

Joined: Nov 2005

you seem to have not ended one DIV somewhere - seemingly "wrapper"

I can't see anything else at first glance, but if there is a div still open it can cause problem, not always as it depends on what the that div does..margins etc.., but of course wants correcting anyway. You dont provide the css for wrapper so I couldn't see if it could be that causing problems

Also if you could provide a link to the page with the problem it sometimes helps trouble shooting greatly
Is it just IE that causes this problem by any chance? have you tried it in Firefox?

Jako posted this at 16:22 — 16th October 2007.

He has: 13 posts

Joined: Sep 2006

The site isn't uploaded yet and is still local.

I have ran the W3C validation and it passes XHTML 1.0 Strict validation, so i don't think there is a closed Div problem.

I have tried Firefox and IE and they both drop the content Div below the menu !!

I'm baffled by it but might look at deleting the existing Divs (nested in the Content Div) and start again.

It would be better to know why and to have found a resolution to the problem but my sanity is best kept intact !!

Thanks for replying btw - it is appreciated.

greg posted this at 20:04 — 16th October 2007.

He has: 1,581 posts

Joined: Nov 2005

This is your code copied and pasted from above
I took out all but the DIV's and didnt count up or down where a div started and ended on the same line

<body>

<div id="wrapper"> COUNT=1

<div id="container"> COUNT=2

<div id="toplogo"></div>
	
<div class="navcontainer"></div>

</div> COUNT=1
	
<div id="menu"> COUNT=2
	
    <div id="menudata"></div>		

<div id="content"></div>
	
</div> COUNT=1

<div id="footer"></div>

</body>
</html>

Seems to me there is a div still open, it ends on COUNT=1...I might still be wrong as I cant see your whole code
and again, if you paste the full CSS file I might be able to help further

JeevesBond posted this at 02:01 — 17th October 2007.

He has: 3,956 posts

Joined: Jun 2002

You're definitely missing a closing div. I saved that code as a file in Amaya, it complained about errors, then I validated it and the validator also complained.

a Padded Cell our articles site!