PDA

Click to See Complete Forum and Search --> : [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!!! :p), 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:

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 :D
rpgfan3233
11-15-2008, 09:29 PM
I do have indentations, it seemed to paste into my quote block without them :D

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

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
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' :p):

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


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