Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    float:right not floating all the way right?

    everything else in my content box seems to understand the width of the content box and aligns correctly. but one element i have set a "float:right;" to refuses to float to the absolute right edge of my content box.

    i am probably overlooking something VERY minor, my brain is so fried on this!

    here is a diagram:


    Thanks!!

    xxx
    Last edited by blinky; 05-12-2011 at 02:21 PM.

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    You might have a right margin set on that element stopping it from floating all the way to the right.

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thanks for your reply!
    i can't seem to locate a right-margin on that element, let alone one wide enough to interfere with the float like that, though.


  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello blinky,
    Wrapping that ul in an unnamed inline styled div and pulling it back up level with your h3 with a negative margin may not be the most semantic way to accomplish that.

    Maybe try something like this instead -
    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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {background: #fc3;}
    #wrapper {
    	margin: 0 auto;
    	max-width: 900px;
    	padding: 0;
    	width: 100%;
    	overflow: auto;
    	background: #fff;
    }
    #label {
    	margin: 50px 0 100px;
    	overflow: auto;
    	background: #ccc;
    }
    h3 {float: left;}
    ul.subcategories {float: right;}
    	ul.subcategories li {
    		float: left;
    		margin: 0 20px 0 0;
    		list-style: none;
    	}
    
    </style>
    </head>
    <body>
    	<div id="wrapper">
            <div id="label">
                <h3>Cruce Signati</h3>
                 <ul class="subcategories">
                     <li>Black Label</li>
                     <li><a href="http://www.doesnotequal.com.au/shop/category/cruce-signati/white-label/">White Label</a></li>
                 </ul>
             <!--end label--></div>
        <!--end wrapper--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thanks for your reply! i tried the code you recommended in my style sheet and removed the element style from the div.

    as this is wordpress i can't set up the page exactly how you've suggested as a lot of it is generated with php.


    the code i have put into the style sheet doesn't seem to have worked, the menu is now back to where it was before, kind of hanging low and still not floating right.

    but i agree that the element style was a poor choice so have gone without that for now.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    ul.categories is bumped over by the unnamed div that contains your search form.

    To show that, remove the top: -82px; from the inline styling on your forms container and you can see it slide down and fill the space to the right of ul.categories.

    Wordpress and php or not, you're going to need to learn to use floats to position elements side by side.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    blinky (05-12-2011)

  • #7
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks Excavator I see what you mean.

    So if I want both of these elements floating right, how can I apply this to the search form? too? I tried applying a class to the div containing the search form to specificy a right float and now it's misaligned again.

    I am finding it so confusing for something that seems like it should be so simple!

  • #8
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Nevermind I have fixed it now I just needed to re-arrange the elements! Thanks


  •  

    Posting Permissions

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