SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Problem with DIV positioning around float in IE

    hi All,

    Here's the problem - http://zvis.com/prob/p1.htm
    What I have on the page is div with class .container (bue border via inline style)
    Code:
    .container {position:relative;height:85%;margin-top:2em}
    WHich has a nested div .main(green border)

    Code:
    .main {border-left:1px solid #aaa; position:relative;
       height:100%; margin-left:11em; padding:0 0 0 1em}
    And that in turn has a table and the the div with right float style, red border

    Code:
    FLOAT: right; MARGIN-LEFT: 0.5em; WIDTH: 120px; HEIGHT: 700px;
    As for the table style:

    Code:
      .gtbl {width:25em;border-collapse:collapse;font-weight:normal}
        .gtbl th, .gtbl td {border:1px solid #aaa;padding:2px 0.5em 2px 0.5em}
        .gtbl th {background:#000 url(/images/titles/plainwb/grdbg2.jpg)}
        .gtbl {width:90%}
        .gtbl td {padding:2px 0.5em 2px 1.5em}
        .gtbl th {font-size:11pt;text-align:center;font-weight:normal}
    I need a way to somehow keep that tbale form jumping below the float. Since table's width is computed as 90% of .main and that doesnt' include popup, or in does an dthen decides that it has to move the table down...
    Firefox causes overlap, which isn't much better either.

    I thought of overflow-x but the .main div isn't overflowing to create scrollbars. Any trick to set the width of the table to the right width somehow using CSS? Or align so it won't end up below the float?
    Have Fun,
    Gator
    zknives.com

  2. #2
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try setting the right and left margins, on the div that contains the table, to the width of the right and left colums.

    Be sure to add any margins or other spacing you have applied to the colums.

    That should keep it centered between them.

    I'm not familar with thit bit of code; Would you explain it?
    FLOAT: right; MARGIN-LEFT: 0.5em; WIDTH: 120px; HEIGHT: 700px;

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DocType
    Try setting the right and left margins, on the div that contains the table, to the width of the right and left colums.


    Be sure to add any margins or other spacing you have applied to the colums.

    That should keep it centered between them.

    I'm not familar with thit bit of code; Would you explain it?
    FLOAT: right; MARGIN-LEFT: 0.5em; WIDTH: 120px; HEIGHT: 700px;

    Ok, I'll try that. But that means if i have text page it won't exactly wrap around the 3rd column tho...

    THat code is the style fo the red bordered div...

    Full snipped would be:
    Code:
    <DIV style="FLOAT: right; MARGIN-LEFT: 0.5em; WIDTH: 120px; HEIGHT: 700px; border:solid 1px red">
     I am a float!
     </DIV>
    Have Fun,
    Gator
    zknives.com

  4. #4
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You know what's weird? I just copied the code from that URL, and pasted it into an HTML file locally ready to start messing with it -- and it works fine. That means it's something in those external style sheets messing it.

    That said, once I put fully qualified URL's into the CSS links, I tried this:
    Code:
    <DIV class=container style="border:solid 1px blue">
     <DIV style="FLOAT: right; MARGIN-LEFT: 0.5em; WIDTH: 120px; HEIGHT: 700px; border:solid 1px red">
     
     I am a float!
     </DIV>
     <DIV class=main style="border:solid 1px green">
     
     
     <P>
     <CENTER>
    And it works fine. The float shouldn't be INSIDE the item you want to float:right; of.

  5. #5
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Zvi
    Ok, I'll try that. But that means if i have text page it won't exactly wrap around the 3rd column tho...
    If your table isn't in a containing div other than the center colum, then put it in a seperate div, give that div the margin settings, and put the whole deal inside the center colum.

    Then put your text in as usual, inside the center colum, and outside the div with the table in it.

    So you'll have a center colum, with 2 blocks in it, 1 will have the table in it, and the other will have the text in it.

    set the margins on the block that has the table in it.

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hiya,

    I've just tried what you suggested and it workes, of course if I reduce browser window to certain point then is still jumping below the float. Even though I set overflow-x:scroll or auto, non of that works in IE. For FF overflow does work as expected.


    Anybody knows what's wrong with IE overflow stuff?
    Have Fun,
    Gator
    zknives.com

  7. #7
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It will at a certain point, if you have a set width defined, a %age value should allow it to resize a bit, depending on nested elements.

    You can also try this inline style for IE(IE only as is, otherwise use JavaScript).

    Code:
     
    <div style="font-family: verdana; text-align: left;
    	font-size: expression(document.body.clientWidth /
    	50)">Your Element</div>
    You might have to play with the size a bit to get it right, it's set to 50 now for average size text.


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
  •