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 6 of 6

Thread: floats

  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts

    floats

    I got a minor problem with floats.

    While i like to sue floats to set out some aspects of my pages (forms for example) i'm unable to due to the layout of my design on my current site. I have two nav bars, both floated to the left and cleared left so that one sits above the other and content wraps around them.

    The problem with this is that i cant use any floats inside the content area or they just flick down to level with the 2nd sidebar and onwards.

    Any ideas how i can use floats from within the content div. I'd prefer not to have to add any uneccesary markup.

    http://readme.resource-locator.com
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #2
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Excuse me if this is offensively obvious, but have you tried float:right;
    clear:none;?

    *Untested theory

    I take no responsibility for the above nonsense.


    Left Justified

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Iowa / Notre Dame
    Posts
    538
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What about wrapping both sidebars with one div, absolutely positioning that div to the far left edge of the body, and then giving the content div a left margin equal to that of the sidebar's width?

    I hope that wasn't too confusing... I don't think it will add any extraneous code due to the fact that it should allow you to eliminate some of your already existing divs.

    Also, I think it would probably work to just float your new div left instead of using absolute positioning, though floats confuse me a little too much to be able to be sure on this.
    My Site {Mike's Adventures}

    Yikes, forums are almost too much fun.

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I could do it that way, but due to the elastic nature of the design (all sizes in EMs) i cant use abs pos.

    Also that would reqiure me to group both menu bars together, which they are not really. They are separate entities and i want to leave them that way so alternate stylesheets can move them about to different places, in fact the members box probably wont even be a sidebar in the next sheet i do.

    In the Source order the boxes are arranged as follows:

    <div id="menu">
    ...
    <div id="members">
    ...
    <div id="content">

    and sicne the first two are floated, any floated elements form then on begin in line with the top of the last floated element - which is halfway down the page.

    Can anyone come up with a way of doing this design without floats or abs pos maybe? i dont need the course for it, just gimme an explanation of how you'd approach it and i'll give it a go.
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    See you in court...

    While i like to sue floats
    Obviously, when you start to sue floats, you can't expect them to cooperate...

    No, seriously: I tried a crude example with two left-floated divs, the second one cleared left, two right-floated divs, the second cleared right and a non-floated content div, with inside the last a left- and right-floated p and a normal non-floated p.
    All sort of ended up in the places I figured.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    but did you have to add any additonal wrappers to make it work?

    And what order did you have them in in the source.

    cos to have


    Code:
    Box1            Box3
    
    Box2            Box4
    you have ato do:
    box1 float: left;
    box3 float: right;
    box2 float: left;
    box4 float: right;


    Not that i cant change the order of the bits, but the way they are now makes sense if you kill the stylesheet.
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)


  •  

    Posting Permissions

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