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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Dec 2004
    Location
    Manchester, UK
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Forget tables.. I need CSS...

    I'm working on my own website at the moment and I'm aiming to avoid tables as much as possible using plenty of CSS.

    One question:

    To achieve a band across the page containing two adjacent boxes I previously did this.

    Code:
    <table width="100%" height="100" cellpadding="0" cellspacing="0">
        <tr>
            <td width="500" bgcolor="#EEEEEE">Something here</td>
            <td bgcolor="#FAFAFA">This is at the right and fills the remaining width</td>
        </tr>
    </table>

    See it fills the entire page width, shows as two blocks but the left one is a fixed width. With CSS I'm pulling my hair out trying to get it working in both IE and CSS using XHTML Strict. I'm trying (except I'm using an external stylesheet):

    Code:
    <div style="width:500px; height:100px; padding:0px; margin:0px; background-color:#EEEEEE; display:block; float:left">
        Something here
    </div>
    <div stlye="height:100px; padding:0px; margin:0px; background-color:#FAFAFA; display:block; float:left">
        This is at the right and fills the remaining width
    </div>

    Can somebody help me out please It's getting the right hand side DIV to fill the remaining width that's causing me the headeache.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    you may be able to try something like width:inherit; im not too sure on how many browsers support this, IE doesn't display it properly it leaves a slight gap, FF does it right though go figure, but you may be able to disguise the bug by making the containing div the same background color as the div that is using width:inherit; or make the div not have a background color and just set the background color to the containing div
    Code:
    <div style="width:100%;">
    <div style="width:500px; height:100px; padding:0px; margin:0px; background-color:#EEEEEE; float:left">
        Something here
    </div>
    <div style="width:inherit; height:100px; padding:0px; margin:0px; background-color:#FAFAFA;">This is at the right and fills the remaining width</div>
    </div>
    if you float the second div width:inherit doesn't work
    Last edited by _Aerospace_Eng_; 03-19-2005 at 10:56 PM.

  • #3
    Regular Coder
    Join Date
    Dec 2004
    Location
    Manchester, UK
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks I'll give it a go. IE is always a pain

  • #4
    Regular Coder
    Join Date
    Dec 2004
    Location
    Manchester, UK
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK I tried it but in IE it has a small gap as you say, and in NS / Moz it stretches the inherited div to 100% (overlapping).

    Man, tables were so much easier LOL

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    works fine for me
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>RailEurope - Article page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    body {
    margin:0px;
    padding:0px;
    }
    </style>
    </head>
    
    <body>
    <div style="width:100%;background-color:#FAFAFA;">
    <div style="width:500px; height:100px; background-color:#EEEEEE; float:left;">Something here
    </div>
    <div style="width:inherit; height:100px;">This is at the right and fills the remaining width</div>
    </div>
    </body>
    </html>
    o you shouldn't be displaying an element that is already a block element as block again, you had display:block; for your first div that might be the problem


  •  

    Posting Permissions

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