Announcement

**tracknut** · Aug 18, 2011, 10:50 AM

That should be doable, but it depends on your css for all those styles you list. Can you show the css, or even better a link to the actual web page where you're testing this?

Dave

**Allen89** · Aug 18, 2011, 11:00 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>test!</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>

<div id="tmenu">
<ul>
<li>Home</li>
<li>Home Page</li>
<li>Contact us</li>
<li>Photos</li>
<li>Help</li>
</ul>
</div>

<div id="lmenu">
<h3>Right menu</h3>
<ul>
<li>Home</li>
<li>Home Page</li>
<li>Contact us</li>
<li>Photos</li>
<li>Help</li>
</ul>
</div>

<div class="content">

<h1>Here my content goes</h1>

</div>





<div id="rmenu">
<h3>Left menu</h3>
<ul>
<li>Home</li>
<li>Home Page</li>
<li>Contact us</li>
<li>Photos</li>
<li>Help</li>
</ul>
</div>





</body>

</html>

Code:

body {

margin:0 auto;
padding:10px;
background:blue;
border: 3px solid yellow;
width:700px;
height:900px;

}

div#tmenu li {

list-style:none;
float:left;
padding:10px;

}


div#lmenu li {

list-style:none;

}

div#rmenu li {

list-style:none;


}

div#rmenu {

float:left;

}

.content {

float:left;

}

**resdog** · Aug 18, 2011, 11:11 AM

First, you're confusing me because in your #lmenu, you have the text that says "Right Menu" and in #rmenu, your text says "Left Menu". Regardless of the text inside, here's the css you need to accomplish what you want:

Add these styles:

Code:

#tmenu {
	width: 700px;
        overflow: hidden;
}
#lmenu {
	float:left;	
}

and change the #rmenu from "float: left;" to "float: right;".

**Allen89** · Aug 18, 2011, 11:57 AM

Originally posted by resdog View Post

First, you're confusing me because in your #lmenu, you have the text that says "Right Menu" and in #rmenu, your text says "Left Menu". Regardless of the text inside, here's the css you need to accomplish what you want:

Add these styles:

Code:

#tmenu {
	width: 700px;
        overflow: hidden;
}
#lmenu {
	float:left;	
}

and change the #rmenu from "float: left;" to "float: right;".

Thank you so much! It works perfectly and sorry for the confusion. Can you explain why did you use "overflow"? I don't get it.

**resdog** · Aug 18, 2011, 12:05 PM

because all of the elements inside the #tmenu div are floated, #tmenu isn't defined. Adding the overflow:hidden allows the items underneath it to treat it as a block element and go under it.

Announcement

HTML sequence and positioning

HTML sequence and positioning

Comment

Comment

Comment

Comment

Comment