float: right inverting the order of the items/container top margin not working

**naiani** · 01-30-2008, 06:35 PM

Hi everyone!

I'm working on a new design and I don't why the hell when I apply float:right to a horizontal menu, the items have their order inverted.

It's supposed to be:
Home About Resume Links Contact

But when I apply float:right to the #menu ul li a, the order turns into:
Contact Links Resume About Home

I had never seen such thing before.

Here's the CSS:

Code:

html, body {
	height: 100%;
}

body {
	background-color: #fff;
	margin: 0;
	padding: 0;
	font-size: 75%;
	color: #000;
}

hr {
	display: none;
}

div#container {
	background: url(bgbarra2.png) repeat-y 0 0;
	margin: -1px 0 0;
	padding: 0;
	width: 700px;
	min-height: 100%;
	text-align: left;
	border-right: 1px solid #000;
	border-top: 1px solid #000;
}

div#title {
	margin: 0;
	padding: 0;
	width: 252px;
	float: left;
	text-align: right;
}

div#title h1 {
	display: none;
}

img#nome {
	padding: 20px 10px 0 0;
}

img#deco {
	margin-right: 2px;
	/*border-right: 2px solid #000;*/
}

div#content {
	margin: 0 1em 0 262px;
	padding: 0;
}

div#menu {
	width: 100%;
	font-size: 1.4em;
	font-weight: bold;
}

div#menu ul {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	float: right; /* This apparently isn't doing anything, although I know it's supposed to be here */
}

div#menu ul li {
	display: inline;
}

div#menu ul li a {
	float: right; /* This is the problematic one */
	color: #000;
	border-bottom: 3px solid #f00;
	text-decoration: none;
	margin: 0 3px;
	padding: 0;
}

div#clear {
	clear: left;
}

* html #container {
	height: 100%;
}

The weird thing is that I've used the same horizontal menu technique, and this is the first time I have problems with it.

Here's the html:

HTML Code:

<html>
	<head>
		<title>Naiani</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	
	<body>
		<div id="container">
			<div id="title">
				<h1>Naiani</h1>
				<img id="nome" src="title.png" /><br />
				<img id="deco" src="rodape.gif" />
			</div>
			<hr />		
			<div id="content">
				<div id="menu">
					<ul>
						<li><a href="#">Home</a></li>
						<li><a href="#">About</a></li>
						<li><a href="#">Resume</a></li>
						<li><a href="#">Links</a></li>
						<li><a href="#">Contact</a></li>
					</ul>
				</div>
				<p>Random Text</p>
				<p>Last Photo</p>
			</div>
			<div id="clear"></div>
		</div>
	</body>
</html>

I've tried this html both WITH and WITHOUT the #menu div, but the results are the same.

There's another issue: if you notice the div#container section, it has a top border of 1px, and -1px top margin. I had to do this because, for some reason, if I set the top margin to 0, it won't do anything, the top margin is still there, as if it's set to 10px or something. I have no idea why is that.

Can someone help me with both things? Thanks!

**Veronica** · 02-01-2008, 06:04 PM

Take out both places where you have float:right
If you're trying to get the menu to be on the right side of the page, instead use text-align:right for the entire div

Code:

div#menu {
	width: 100%;
	font-size: 1.4em;
	font-weight: bold;
        text-align:right;

Also, it looks as if there should be a <div> tag in front of the paragraph with random text.

**Medyman** · 02-02-2008, 02:46 AM

Originally Posted by naiani

Hi everyone!

I'm working on a new design and I don't why the hell when I apply float:right to a horizontal menu, the items have their order inverted.

It's supposed to be:
Home About Resume Links Contact

But when I apply float:right to the #menu ul li a, the order turns into:
Contact Links Resume About Home

It's applying what you asked it to. CSS works in a heirarchical fashion. With that style decleration you're saying for all <li> elements that are linked within the #menu div should float to the right.

So it goes to the menu div...finds <ul>...finds <li> and then floats it to the right. Then, it comes across the second <li> element which also fulfills the style...so the CSS pushes that to the right. But since the 1st <li> was already floated to the right, it can only go so far. So, the 2nd one is placed directly to the left of the first.

In this way, you can a reverse effect.

You can try what the above poster said. Or if you need a float, float the entire div instead of the individual elements

Code:

div#menu { float:right; }

Thread: float: right inverting the order of the items/container top margin not working

Thread Tools

Search Thread

float: right inverting the order of the items/container top margin not working

Bookmarks

Bookmarks

Posting Permissions