Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: opposing floats

  1. #1
    Join Date
    Feb 2008
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default opposing floats

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

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Try adding this to your css code:
    Code:
    #top {
    overflow: hidden;
    }
    #logo {
    float: left;
    }
    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Feb 2008
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks, but no change.

  4. #4
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    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?
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  5. #5
    Join Date
    Feb 2008
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

  6. #6
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    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
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  7. #7
    Join Date
    Feb 2008
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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;
    }

  8. #8
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    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!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  9. #9
    Join Date
    Feb 2008
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  10. #10
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    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!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •