opposing floats

**fodo** · 02-11-2009, 01:01 PM

I want to have a header where a logo is positioned to the left and a menu to the right, but they wouldbe on the same level.
I have tried floating both elements and then clearing the floats to no avail.
can anyone help please.
link http://217.46.159.226/authorbank/

css

Code:

body{
	margin:0;
	padding:0;
}
#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}

#top h1
{
padding: 0;
margin: 0;
}
#menu{
	float:right;
}
#logo img{
	float:left;
}
*.float-divider{
	clear:both;
	display:block;
}
#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
#post{
	width:159;
	margin-left:5px;
}
.posts{
	font-size:10px;
}
#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 1em;
}

#content
{
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
max-width: 36em;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}

#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }

Mark up

Code:

<body>
<div id="container">
<?php
outputSearchBox ();
?>
<div id="top">
<img id="logo" src="images/logo.png"/>
<div id="menu">
<div class="underlinemenu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#">Authors</a></li>
<li><a href="#">Publishers</a></li>
<li><a href="wipedemo.htm">Community</a></li>
<li><a target="_blank" href="http://217.46.159.226/authorbank/wordpress/index.php">Blog</a></li>
<li><a href="#">Storyboard</a></li>
</ul>
</div>
</div>
<div class="float-divider"></div>
</div>
<div id="leftnav">

**Snookerman** · 02-11-2009, 01:08 PM

Try adding this to your css code:

Code:

#top {
overflow: hidden;
}
#logo {
float: left;
}

Good luck!

**fodo** · 02-11-2009, 01:33 PM

Thanks, but no change.

**Snookerman** · 02-11-2009, 01:40 PM

I have used that on the page you posted before and it worked fine so you must be doing some mistake. Could you please post a link to the page where you are testing this so I can take a look?

**fodo** · 02-11-2009, 04:53 PM

link is http://217.46.159.226/authorbank/index.php
Thanks

**Snookerman** · 02-11-2009, 05:08 PM

The code I posted is not being used on that page. Could you please add it to your css code? I have done that myself and it worked fine, here's a screenshot:
Attachment 2483

**fodo** · 02-11-2009, 05:41 PM

Hi,
Its included, but I dont get the effect you get.

Code:

#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
overflow:hidden;
}

#top h1
{
padding: 0;
margin: 0;

}
#menu{
	float:right;
}
#logo{
	float:left;
}
*.float-divider{
	clear:both;
	display:block;
}

**Snookerman** · 02-11-2009, 06:05 PM

Is this the css file you put it in: http://217.46.159.226/authorbank/includes/layout.css?
I can't see the code I posted there. Just copy and paste it to the bottom of the page and it will work just fine. If you are testing this on a different page than the one you posted, please post a link to that page.

Good luck!

**fodo** · 02-11-2009, 06:12 PM

Hi,
I checked the layout code and you are correct - the changes are not there.
The editor i am using shows the code changed but its not.
I have used a different editor and different machine and changed the code which now works but the columns have lost integrity.
i have put the clear floats in. Can u see my error?
Thank you for your patience, much appreciated.

**Snookerman** · 02-11-2009, 06:27 PM

No, I can't see any error because the code is still not there. Are you sure you are not testing this on a different page? In any case, you have a mistake on the page you posted, you closed the quotes in the wrong place here:

Code:

<link href="/authorbank/includes/menu.css" media="screen" rel="stylesheet" type="text/css />"
<link href="/authorbank/includes/sidemenu.css" media="screen" rel="stylesheet" type="text/css />"

Change it to:

Code:

<link href="/authorbank/includes/menu.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/authorbank/includes/sidemenu.css" media="screen" rel="stylesheet" type="text/css" />

Fix those and then add the code I posted and you should be fine. Again, if you are testing this on a different page and it's still not working out for you, please post a link to that page, otherwise I can't do much more to help you.

Good luck!

Thread: opposing floats

Thread Tools

Search Thread

opposing floats

Bookmarks

Bookmarks

Posting Permissions