On 4/9/12 8:16 PM, Ghodmode wrote:
On Tue, Apr 10, 2012 at 6:43 AM, David
Hucklesby<huckle...@gmail.com> wrote:
On 4/9/12 10:11 AM, Marie-Ange Demeulemeester wrote:
Hi, I need a block with two columns.
Despite of the quite simple code by using a table, I’ve tried to
have the same result with DIV.
The requirements are:
· The columns have an equal height
· Each column has a different background-color
· 2 columns: first column always width 100px, second the
rest of the screen (100% minus 100px)
· The title and rule has to have the whole width of the
second column, and not equal to the width of the text in that
column. (Not OK in FF, in Chrome, )
· This must be X-browser: IE6+, FF 3+; Chrome, Safari
My tryout:
http://users.telenet.be/MarieAnge/banner1.html
If somebody can simplify the code, please don’t hesitate.
I found two ways to do it without using tables, but they both have
some problems.
You can find my results at http://www.ghodmode.com/testing/marie I'll
also post the code at the bottom of this message.
-- DIV.thirdbanner -- The first one uses CSS tables, which don't
work in IE7 or earlier.
-- DIV.secondbanner -- The second one just uses floats and
positioning, but requires a fixed height for just about all of the
containers. You only really have to set a fixed height for the
outermost div, though, because the others are set to height:100%.
[...]
Nice one, Vince.
One small issue: The div.colimg (float) sitting beside div.coltxt (new
block formatting context) -- your second solution -- does not need the
100px left margin. For some reason Webkit makes div.coltxt 100px too
short, and you end up with a 100px gap on the right. Remove margin-left
and Webkit agrees with Mozilla.
--
Cordially,
David
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
