SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict trigger's Avatar
    Join Date
    Jun 2003
    Location
    Eagan
    Posts
    342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS not floating right...

    I got a element called middlebox, the css is
    #middlebox{
    width: 100%;
    position: relative;
    border-top-width: thin;
    border-top-style: solid;
    border-top-color: #CCCCCC;
    height: auto;
    }
    and there are three elements in there, left container, center container, and right container. The css is
    #leftcontainer{
    background: #E9D611;
    margin: 0 auto;
    padding: 0 0 0;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    position: relative;
    width: 13%;
    border-right-width: 0.25em;
    border-right-style: solid;
    border-right-color: #CCCCCC;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: #CCCCCC;
    border-top-width: thin;
    border-top-style: solid;
    border-top-color: #FFFFFF;
    left: 0;
    float: left;
    height: 100%;
    overflow: hidden;
    }
    #centercontainer{
    position: relative;
    width: 70%;
    left: 15%;
    }
    #rightcontainer{
    position: relative;
    width: 13%;
    border-bottom-width: thin;
    border-left-width: thin;
    border-bottom-style: dashed;
    border-left-style: dashed;
    border-bottom-color: #002196;
    border-left-color: #002196;
    float: right;
    height: 100%;
    top: 0%;
    padding-bottom: 0.5em;
    display: block;
    }
    The containers aren't showing up in horizontal line, what's up? Is it borders or margins or something? In Firebird/Mozilla its fine, but in Opera and IE the right container wraps to another line, and shows below.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,300
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Are you putting the floats first in the html.
    e.g.
    Code:
    <div id="middlebox">
    <div id="leftcontainer">left</div>
    <div id="rightcontainer">right</div>
    <div id="centercontainer">centre</div>
    </div>
    (This is not causing you any problems as you have used no values but be careful when you use top and left as it doesn't apply to floats. Use margin-top etc when referring to floats. Otherwise if the float has a position relative statement then the float stops becoming a float and becomes a positioned element.)

    Paul

  3. #3
    SitePoint Addict trigger's Avatar
    Join Date
    Jun 2003
    Location
    Eagan
    Posts
    342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no I'm not, so I should look at elements above it in the html, and see if there is anything with top or left attributes? If the middlebox has a clear: both; attribute it doesn't seem to fix it either, which doesn't make sense. I wish I could just apply percentage values to borders....

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,300
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I got the above code to display ok. I just copied it from above and used the html I posted. There were three boxes along the top all on one line ok.

    Are you using a full doctype?

    If you want it exact you will need to put padding and borders on an inner element so that you make up your 100% etc. (Remember that IE also has a rounding bug that if you add elements up to make 100% IE may round them higher. (Just try two floats at 50% and then resize the screen in IE to see the effect.))

    Paul

  5. #5
    SitePoint Addict trigger's Avatar
    Join Date
    Jun 2003
    Location
    Eagan
    Posts
    342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm using the
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    doctype. Should I be using the strict doctype? My css is http://www.nasi.com/test/style.css and my page is http://www.nasi.com/test.htm. I just can't get my finger on it!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,300
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I've only had a quick look at your page. Are you talking about the rightcontainer that has the letters PDFS in it. It appears on the right hand side but jumps up and down a line as the browsers is resized smaller. You need to set the width smaller as I think you are experiencing the rounding bug I spoke of earlier.

    e.g.
    Code:
    #rightcontainer{
     position: relative;
     width: 14%;
    etc....
    Also you are still working in quirks mode because you have left comment tags above the doctype. Ie6 assumes quirks mode if the doctype isn't the first line of the code. However, taking the comment line out will leave you with a few more things to fix, so it's up to you.

    (In my previous post I wan't very clear about the floats. What I meant to say was make sure that your left and right floated items come before the content, however I don't think it applies to your code as you are using relative positioning for the content.)

    Paul

  7. #7
    SitePoint Addict trigger's Avatar
    Join Date
    Jun 2003
    Location
    Eagan
    Posts
    342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thanks, and some more thoughts

    Thanks for the advice, especially on the IE quirks mode. I'll have to give that a try. What other problems do you anticipate once I get into Standards mode?

    I noticed that even if I nest an absolute div within a relatively positioned one, it seems to mess up the relative positioning of my other divs in Mozilla. For example, my topbox contains a absolutely positioned div for my upper left logo, because if I didn't, the two menus on the right weren't floating right. Then in Mozilla, my bottombox div (relatively positioned) was at the top of the doc. Assigning bottom: 0; to that element seemed to fix it.

    I'm still getting the nasty horizontal scrollbar in Mozilla, too. So if you have any idea what I'm doing wrong there, please tell me.

    Thanks for your help, you really are a SitePoint Guru.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,300
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm still getting the nasty horizontal scrollbar in Mozilla, too. So if you have any idea what I'm doing wrong there, please tell me.
    The reason for the scroll bars is that you have widths adding up to 100% but you also have padding and borders added. In the correct box model the padding and borders are added to the content which is why you get the scroll bar in Mozilla. In Ie6 you are still working in quirks mode which uses the broken box model and padding and borders are contained within the 100% width which means you don't get a scrollbar.

    You may need to re-jig your code by applying borders and padding to the inner element and just declare the width on the outer element. Although this does sometimes make the code a little more complicated due to the extra nesting, but many times you have inner elements (such as <p>) etc that you can apply padding to anyway.

    The best way to achieve consistency between your targetted browsers is to use a full doctype with uri (don't use the xml prologue either) and then test each element as you go in each browser. This way you will spot differences before you build on them and as you found out it can be tricky to accomodate them afterwards.

    Hope some of this helps.

    Paul

  9. #9
    SitePoint Addict trigger's Avatar
    Join Date
    Jun 2003
    Location
    Eagan
    Posts
    342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you've helped me a lot! Thank you very much. Feel free to keep giving me suggestions on my css, and if you want, keep an eye, because I'll be adding stuff in daily now.That fixed a lot, and with the way I've structured my divs, it wasn't hard at all to eliminate the padding on the containing blocks. Thanks again, I really appreciate the help. I was close to going back to tables.


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
  •