www.webdeveloper.com
Results 1 to 7 of 7

Thread: [RESOLVED] <div> as <table> and background-color issue

  1. #1
    Join Date
    Nov 2008
    Posts
    4

    resolved [RESOLVED] <div> as <table> and background-color issue

    Here's a simple example of as close as I've gotten trying to be a good programmer and learn some newer techniques (when I was your age...we made <tr> and <td> tags ... up hill! ... both ways!! ... and we 'liked' it!!! ), and I've hit a bit of a wall understanding how to deal with height.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
    xml:lang="en-gb" lang="en-gb" >

    <head>
    <style type="text/css">
    body
    {
    align: left;
    color: #ffffff;
    font-family: Century Gothic, Arial, Helvetica;
    background-color: #333333;
    }
    div#break {
    clear: both;
    }
    div#bodywrap {
    width: 810px;
    background-color: #000000;
    padding: 10px 10px 10px 10px;
    }
    div#mainwrap {
    clear: both;
    text-align: left;
    background-color: #660000;
    }
    div#main_l {
    float: left;
    width: 539px;
    text-align: left;
    background-color: #660000;
    }
    div#main_r {
    float: left;
    width: 271px;
    text-align: left;
    background-color: #000000;
    }
    div#main_lp {
    padding: 5px;
    }
    </style>
    </head>

    <body>
    <div align="center">
    <div id="bodywrap">
    <div id="mainwrap">
    <div id="main_l"><div id="main_lp">Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left </div></div>
    <div id="main_r">Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right </div>
    </div>
    <div id="break" />
    </div>
    </div>

    </body>
    </html>
    I'm trying to get div#main_l to be that color for as tall as div#main_r ends up being, or vice versa, depending on the content (which will vary, can be text, or images...beef or chicken, at this point, we don't know).

    With tables, the cell with the most stuff wins, and everyone else in the row complied. Here, it seems to break down when the 'floating' begins. I tried playing the absolute, and that doesn't work so well. Position = relative was 'close' in some cases, until you start using ctrl+ to increase the font size, and then the relative position starts to **** and make a nasty mess out of it.

    So I'm 'really' close, at least I think. background-color: transparent works fine right up until I start floating those divs, then they seem to lose the ability to be transparent.

    Any ideas? Is this one of those situations where you have to use a table with one row and two columns and 'then' load it up with all the divs and spans you need?

    Thanks in advance!

  2. #2
    Join Date
    May 2008
    Posts
    381
    The `break' is in the wrong place. If you used indentation, you'd see that it is outside of `mainwrap'. Without it being inside of `mainwrap', your floats won't clear properly:

    Code:
    Right Right Right Right Right </div>
    </div>
    <div id="break" /> <!-- Move this line up one to fix it. -->
    </div>
    Tested in Fx3, Opera, Google Chrome and IE8b2 (with IE8 mode, IE7 mode and IE7 emulation mode). I hope this helps!

  3. #3
    Join Date
    Nov 2008
    Posts
    4
    Yeah that did, thanks a bunch!

    I do have indentations, it seemed to paste into my quote block without them

  4. #4
    Join Date
    May 2008
    Posts
    381
    Quote Originally Posted by notebene View Post
    I do have indentations, it seemed to paste into my quote block without them
    Ah, I see now. You should use a code block rather than a quote block. Code blocks preserve your indentation. Glad I could help! ^_^

  5. #5
    Join Date
    Nov 2008
    Posts
    4
    Quote Originally Posted by rpgfan3233 View Post
    The `break' is in the wrong place. If you used indentation, you'd see that it is outside of `mainwrap'. Without it being inside of `mainwrap', your floats won't clear properly:

    Code:
    Right Right Right Right Right </div>
    </div>
    <div id="break" /> <!-- Move this line up one to fix it. -->
    </div>
    Tested in Fx3, Opera, Google Chrome and IE8b2 (with IE8 mode, IE7 mode and IE7 emulation mode). I hope this helps!
    Actually there's still a problem

    That solves the issue when the content of the left div is always smaller than the right, but if you fill up that left div with a lot of 'lefts' so it has more content than the right side, the right side is only as high as it's content and doesn't grow as the left div grows.

    So I guess I'm back to square one.

  6. #6
    Join Date
    May 2008
    Posts
    381
    Well, there is a technique known as faux columns. Basically, you apply a vertically-tiled background-image to your wrapper div, and then your columns appear to be real columns. You wouldn't need background colors then. Your background image could be 1 pixel high, with the specified widths for your columns' backgrounds.

    Check it out @ A List Apart - http://www.alistapart.com/articles/fauxcolumns/

  7. #7
    Join Date
    Nov 2008
    Posts
    4
    Quote Originally Posted by rpgfan3233 View Post
    Well, there is a technique known as faux columns. Basically, you apply a vertically-tiled background-image to your wrapper div, and then your columns appear to be real columns. You wouldn't need background colors then. Your background image could be 1 pixel high, with the specified widths for your columns' backgrounds.

    Check it out @ A List Apart - http://www.alistapart.com/articles/fauxcolumns/
    What's funny is I started down this road before, and had 'everything' that site was talking about except one important thing. I had a 100x2 black image, and through I could start it at 539px and 'repeat', and it wouldn't 'back' bleed, if that makes any sense. I think that's a poor implementation, if you ask me (unless I'm missing something). If I say I want to start something at 539px and repeat it 'both' horizontally and vertically, I should be able to.

    At any rate, while the article didn't specifically say it, it hinted at the fact that I 'must' only use repeat-y, and the logical conclusion is that my placeholder image be the width I want, with the height being a few pixels.

    Implemented it, works like a champ (and this time...I'll use 'code' ):

    (note: mb_black.png attached, if anyone wants to test this and finds the solution in this discussion useful)

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml" 
       
    xml:lang="en-gb" lang="en-gb" >

    <
    head>
    <
    style type="text/css">
    body
    {
        
    alignleft;
        
    color#ffffff;
        
    font-familyCentury GothicArialHelvetica;
        
    background-color#333333;
    }
    div#break {
        
    clearboth;
    }
    div#bodywrap {
        
    width810px;
        
    background-color#000000;
        
    padding10px 10px 10px 10px;
    }
    div#mainwrap {
        
    text-alignleft;
        
    background#660000 url(images/mb-black.png) repeat-y 539px 0px;
    }
    div#main_l {
        
    floatleft;
        
    width539px;
        
    text-alignleft;
    }
    div#main_r {
        
    floatleft;
        
    width271px;
        
    text-alignleft;
    }
    div#main_lp {
        
    padding5px;
    }
    </
    style>
    </
    head>

    <
    body>
    <
    div align="center">
    <
    div id="bodywrap">
    <
    div id="mainwrap">
        <
    div id="main_l"><div id="main_lp">Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left 
            Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left 
            Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left 
        
    </div></div>
        <
    div id="main_r">Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right </div>
        <
    div id="break" />
    </
    div>
    </
    div>
    </
    div>

    </
    body>
    </
    html
    You can test it by taking out a few lines of 'left' in the 'main_lp' div and putting them back. Desired effect achieved!

    Note: I 'still' question the implementation of repeat on background and background-repeat, however. It seems it would be far more flexible if my background control image could only be a few pixels wide, and I could tell it exactly where I want it, and when I say 'repeat', it never repeats to the 'left' of my starting horizontal position (or above my starting vertical).

    At any rate (I say that a lot). All your input was greatly appreciated, got me down the right path each time.

    Peace!
    Attached Images Attached Images

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles