SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float right and left issue.

    A while ago, I asked how to float a div with a fixed width to the left, whilst keeping the one to the right 100% of the remaining width. I accomplished this like so:
    Code HTML4Strict:
    <div id="navigation">
    Blah blah blah.
    </div>
    <div id="wrapper">
    Blah blah blah.
    </div>
    Code CSS:
    div#navigation{
    width: 150px;
    margin-left: 10px;
    float: left;
    }
     
    div#wrapper{
    margin-left: 160px;
    }

    Now though, I have a second issue. Inside the wrapper div, I have two more, and for the sake of argument, I'll call them main and right. What I would like, is the same again, right floating to the right, and main taking up 100% of the remainder of the remainder. So, I tried the same technique, and it doesn't work, the right div stays below the main.

    Do I need to do something fancy, or is it the same principle?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It's completley the same principle. If you post a site I can tell you where you went wrong .
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Floats must come first before the static content you want to wrap so you should be floating #right before you have the content for #main. It's exactly the same as you have already done but on the other side.


    Code:
    #right{
        float:right;
        width:150px;
        background:blue;
        margin:0 10px 0 ;
        display:inline;
    }
    #main{
        margin-right:170px;
        background:red;
    }
    Code:
    <div id="wrapper">
        <div id="right">
            <p>This is the right text : This is the right text : This is the right text : This is the right text : This is the right text : This is the right text : This is the right text : This is the right text : This is the right text : This is the right text : This is the right text : This is the right text : This is the right text : This is the right text : This is the right text : This is the right text : This is the right text : This is the right text : This is the right text : This is the right text : This is the right text : This is the right text : </p>
        </div>
        <div id="main">
            <p>This is the main content : This is the main content :This is the main content :This is the main content :This is the main content :This is the main content :This is the main content :This is the main content :This is the main content :This is the main content :This is the main content :This is the main content :This is the main content :This is the main content :This is the main content :This is the main content :This is the main content :This is the main content :This is the main content :This is the main content :This is the main content :</p>
        </div>
    </div>
    However the wrapper div would seem superfluous as you are just making a 3 column layout and you could float one column left followed by one column right and then set the next div to have a margin left and a margin-right equal to each floats width.

  4. #4
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Site is here:
    http://www.adamcoppard.co.uk/test.html

    Yes, they are my CSS files I'm linking too, except all the HTML / CSS pages are password protected, and it was just easier this way

  5. #5
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, Paul, I know I am going to sound like a pain, but I can't achieve that with my markup, in essence. It's a form, split over two div's, and taking the right out messes everything up. Is there another way to go about what I'm trying to achieve?

  6. #6
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many apologies Paul, I see what you mean. Moved the categories fieldset before the main, and it worked, just like you said it would ;-)


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
  •