SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2002
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Float Left + 100% Table doesnt work in IE?

    I am trying to get 100% tables to sit to the right of a float:left div. It works perfect in Firefox, but in IE the 100% tables get bumped to the bottom of the div.

    Please look at my example here:

    http://musicalfans.net/floatleft.html

    Does anyone know a way to fix this in IE? Ive tried getting it to work all day. I tried using 100% divs, 100 tables, 100% tables in divs, Spans, all with no avail. I dont know if there's a goofy margin:-100 IE fix or something. I would make the tables a fixed size, but once they get bumped under the div they need to stretch to 100%.

    Thanks in advance for the help.

  2. #2
    SitePoint Zealot MacRankin's Avatar
    Join Date
    Sep 2002
    Location
    London
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, i've had a little look, and i've completely changed the code for you. Perhaps you'll get a little more mileage out of it than say with all those table cells...

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>Nested_Layout</title>
    <meta name="generator" content="BBEdit 6.1.2">

    <style type="text/css" media="screen">

    body {
    background-color: #999;
    }


    #container {
    width: 98%;
    height: 400px;
    margin: 0 auto;
    border: 1px solid #000;
    background-color: #fff;
    }

    #left_nav {
    float: left;
    text-align: center;
    width: 15%;
    height: 400px;
    background-color: #FC9;
    }

    #desk_top {
    float: right;
    text-align: center;
    width: 85%;
    height: 400px;
    background-color: #FCF;
    }

    #nav_block {
    margin: 0 auto;
    width: 98%;
    height: 25px;
    border: 1px solid #000;
    }


    .cell_blocks {
    margin: 0 auto;
    width: 98%;
    height: 25px;
    border: 1px solid #000;
    }

    </style>


    </head>
    <body>

    <div id="container">

    <div id="left_nav">
    ????
    <div id="nav_block">
    ????
    </div>
    </div>

    <div id="desk_top">
    ????
    <div class="cell_blocks">
    ????
    </div>
    <br>
    <div class="cell_blocks">
    ????
    </div>
    <br>
    <div class="cell_blocks">
    ????
    </div>
    <br>
    <div class="cell_blocks">
    ????
    </div>
    <br>
    <div class="cell_blocks">
    ????
    </div>
    <br>
    <div class="cell_blocks">
    ????
    </div>
    <br>
    <div class="cell_blocks">
    ????
    </div>
    <br>
    <div class="cell_blocks">
    ????
    </div>
    <br>
    <div class="cell_blocks">
    ????
    </div>
    <br>
    <div class="cell_blocks">
    ????
    </div>
    </div>
    </div>

    </body>
    </html>
    We Brits do things differently. But we still get shot at.

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2002
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That wont work because the text wraps fine, but the wrapping divs go under div y. The divs themselves (or tables) have a background color and border and need to wrap around div-y. Is there any way to get a styled box to wrap around div y as well?

  4. #4
    SitePoint Zealot
    Join Date
    Oct 2002
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just curious, what does " *{padding:0;margin:0;} " do? I've never used an asterisk in css

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The * is the universal selector so in this case it means every element gets 0 margins/padding. You can also use it to select every element within another, e.g. #myDiv * { height: 20px } will make everything contained within #myDiv 20px high.

  6. #6
    SitePoint Zealot
    Join Date
    Oct 2002
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    anyone know how to make the div in MacRankin's example wrap with the text? Right now it goes under the other div :/


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
  •