Log in

View Full Version : 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


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



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

#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:
2483
fodo
02-11-2009, 05:41 PM
Hi,
Its included, but I dont get the effect you get.


#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 (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:

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

<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!
fodo
02-11-2009, 08:09 PM
Thanks Snookerman. I need to figure this out. Your code is now posted and should be on the link I gave.
I am going to review my development set up and make sure its ok.
Thank you for your help
fodo
02-12-2009, 05:01 PM
Ok, Now works in FF but not IE 7.
Any ideas?
Snookerman
02-12-2009, 05:16 PM
Try adding this to your css:

#menu {
float: right;
}

Good luck!