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

**notebene** · 11-15-2008, 07:00 PM

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!

**rpgfan3233** · 11-15-2008, 08:40 PM

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!

**notebene** · 11-15-2008, 09:16 PM

Yeah that did, thanks a bunch!

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

**rpgfan3233** · 11-15-2008, 09:29 PM

Originally Posted by notebene

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! ^_^

**notebene** · 11-15-2008, 09:30 PM

Originally Posted by rpgfan3233

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.

**rpgfan3233** · 11-15-2008, 10:48 PM

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/

**notebene** · 11-16-2008, 08:44 AM

Originally Posted by rpgfan3233

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

{

    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 {

    text-align: left;

    background: #660000 url(images/mb-black.png) repeat-y 539px 0px;

}

div#main_l {

    float: left;

    width: 539px;

    text-align: left;

}

div#main_r {

    float: left;

    width: 271px;

    text-align: left;

}

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 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!

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

Thread Tools

Display

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

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions