Re: [css-d] position with div in stead of table

[John D]

Personally, I use tables whenever necessary and style them using CSS.  You 
don't have to continue using DIV if it isn't working correctly.  Also, the cost 
of your time has to be taken into account when designing a site.  After all, we 
all have to make money some how whether it is using tables & CSS or DIVs & CSS.

Use DIVs as far as you can but don't hesitate to use an odd table code to 
position something quickly.

Good Luck.


> From: lriv...@mosasaur.com
> Date: Mon, 16 Apr 2012 13:48:06 -0500
> To: css-d@lists.css-discuss.org
> Subject: Re: [css-d] position with div in stead of table
> 
> This reminds me of a rant I have boiling.
> 
> Did the people who designed CSS ever, once, ask a designer what kind of stuff 
> they would want to build for the web? Seriously, that doing this and aligning 
> things in the center of other things are such common questions just annoys me 
> tremendously. Why should/is this something that requires so much 
> jiggery-pokery?
> 
> Whew. I feel better now.
> 
> On Apr 9, 2012, at 12:11 PM, 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.
> > 
> > 
> > 
> > Thanks.
> > -- 
> > Marie
> > __
> > 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/
> 
> -- 
> Lorin Rivers
> Mosasaur: Killer Technical Marketing <http://www.mosasaur.com>
> <mailto:lriv...@mosasaur.com>
> 512/203.3198 (m)
> 
> 
> __
> 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/
  
__
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/

Re: [css-d] position with div in stead of table

[Laura Kunz]

At 01:48 PM 4/16/2012, you wrote:

much jiggery-pokery?



And this works for you?

Here, I've been using bubble gum and bailing wire.

Okay. Thanks for the tip!



__
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/

Re: [css-d] position with div in stead of table

[Lorin Rivers]

This reminds me of a rant I have boiling.

Did the people who designed CSS ever, once, ask a designer what kind of stuff 
they would want to build for the web? Seriously, that doing this and aligning 
things in the center of other things are such common questions just annoys me 
tremendously. Why should/is this something that requires so much jiggery-pokery?

Whew. I feel better now.

On Apr 9, 2012, at 12:11 PM, 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.
> 
> 
> 
> Thanks.
> -- 
> Marie
> __
> 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/

-- 
Lorin Rivers
Mosasaur: Killer Technical Marketing 

512/203.3198 (m)


__
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/

Re: [css-d] position with div in stead of table

[Philippe Wittenbergh]

On Apr 10, 2012, at 2:28 PM, Ghodmode wrote:

> On Tue, Apr 10, 2012 at 12:28 PM, David Hucklesby  wrote:
> ...
>> 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.
> 
> Thanks David.  That's a good catch.  That left margin is entirely unnecessary.
> I should've tested it in webkit.
> 
> I think that margin was left over from an earlier attempt in which I had the
> left block (colimg) absolutely positioned.
> 
> I think I understand why it's shorter than intended.  Since I didn't set a 
> width
> and it's not floating, div + margin should take up the width of the
> div.fourthbannertxt -100px for div.colimg...  I think.

Not really, it is a bug, still present in release Safari and (I think… ) 
release Chrome.
https://bugs.webkit.org/show_bug.cgi?id=79046
(bug has been fixed in nightly webkit builds)

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/






__
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/

Re: [css-d] position with div in stead of table

[Ghodmode]

On Tue, Apr 10, 2012 at 12:28 PM, David Hucklesby  wrote:
...
> 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.

Thanks David.  That's a good catch.  That left margin is entirely unnecessary.
I should've tested it in webkit.

I think that margin was left over from an earlier attempt in which I had the
left block (colimg) absolutely positioned.

I think I understand why it's shorter than intended.  Since I didn't set a width
and it's not floating, div + margin should take up the width of the
div.fourthbannertxt -100px for div.colimg...  I think.

What I don't get is why that gap is on the right instead of the left.  I thought
the margin would bump up against the right edge of the image inside of
div.colimg.  I know that margins ignore floating elements, but I thought it
wouldn't ignore non-floating contents of floating elements.  I was wrong ...

The webkit developer tools shows the left edge of the div.coltxt (including
margin) is at the left edge of div.fourthbannertxt, behind div.colimg, not at
the right edge of the image like I would've expected.

I definitely had a misconception here because Firebug also shows the left edge
of the div.coltxt (including margin) at the left edge of div.fourthbannertxt...
The margin of div.coltxt is ignoring div.colimg and its img in both Firefox and
Webkit.

hehe ... never stop learning :)

--
Vince

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

Re: [css-d] position with div in stead of table

[David Hucklesby]

On 4/9/12 8:16 PM, Ghodmode wrote:

On Tue, Apr 10, 2012 at 6:43 AM, David
Hucklesby 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/

Re: [css-d] position with div in stead of table

[Ghodmode]

On Tue, Apr 10, 2012 at 6:43 AM, David Hucklesby  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%.

Unless the content changes dynamically, I think this is a viable solution with
good support for older browsers that we shouldn't support any more :P

To get the right height I rounded up the computed height of the contents,
divided by the font size to get em, and set it explicitly to that.  It didn't
fit in IE6, so I added 1 more em.

If you do it this way, you'll have to change the height whenever you change the
content.

-- IE6/7 --
I think David was right with regard to tables and IE6/7 support, but I
personally feel that we don't need to support IE6/7 any more.  So, I would
choose the first method.  Of course that depends on your situation and the
requirements of your page.

If you visit my page (http://www.ghodmode.com) in IE7 or earlier, you get a nice
little bar at the top telling you that the site may not render correctly in your
browser.

--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com


> Well, I was about to reply affirmatively when I noticed you seem to have
> an unstated requirement - that the image is vertically centered! The
> only way to get this working in IE 6 and 7, along with your other
> requirements, is the solution you came up with - namely, an actual
> table. While there are many ways to make the columns *appear* to be
> equal height, table display is the only way I know to get actual heights
> to match. While you can apply table display in browsers with good CSS
> 2.1 support, this does not include IE 6 and 7. Sorry.
>
> Hopefully someone on this list will prove me wrong. :)
> --
> Cordially,
> David



My results:



  
  Banner
  
  body {
  }

  div.thirdbanner {
width: 95%;
margin: 30px 2.5%;
border: 3px solid #666;
  }
  div.thirdbannercontent {
display: table;
width: 100%;
background-color: #ddd;
  }
  div.thirdbannertxt {
display: table-row;
  }
  div.thirdbannertxt div.colimg {
display: table-cell;
vertical-align: middle;
width: 100px;
  }
  div.thirdbannertxt div.coltxt {
display: table-cell;
background-color: #aaa;
padding-left: 0.5em;
  }
  div.thirdbannertxt div.coltxt h3 {
background-color: #ccc;
padding: 0.5em 0.5em 0.5em 0;
margin: 0 0.5em 0 0;
  }

  div.fourthbanner {
position: relative;
left: 2.5%;
width: 95%;
height: 11em;
  }

  div.fourthbannercontent {
background-color: #ddd;
border: 3px solid #666;
height: 100%;
  }

  div.fourthbannertxt {
height: 100%;
  }

  div.fourthbannercontent div.colimg {
height: 100%;
width: 100px;
position: relative;
float: left;
  }

  div.fourthbannercontent div.colimg img {
display: block;
position: absolute;
width: 100px;
height: 84px;
top: 50%;
margin-top: -42px;
  }

  div.fourthbannercontent div.coltxt {
overflow: auto;
margin-left: 100px;
background-color: #aaa;
padding-left: 0.5em;
height: 100%;
  }

  div.fourthbannercontent div.coltxt h3 {
margin: 0 0.5em 0 0;
padding: 0.5em 0.5em 0.5em 0;
background-color: #ccc;
  }
  



  

  
http://users.telenet.be/MarieAnge/x.jpg";>
  
  
Title
highlighted text normal text link normal text

bullet list1
bullet list2


tekst under rule
  

  



  

  
http://users.telenet.be/MarieAnge/x.jpg";>
  
  
Title
highlighted text normal text link normal text

bullet list1
bullet list2


tekst under rule
  

 

Re: [css-d] position with div in stead of table

[David Hucklesby]

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.



Well, I was about to reply affirmatively when I noticed you seem to have
an unstated requirement - that the image is vertically centered! The
only way to get this working in IE 6 and 7, along with your other
requirements, is the solution you came up with - namely, an actual
table. While there are many ways to make the columns *appear* to be
equal height, table display is the only way I know to get actual heights
to match. While you can apply table display in browsers with good CSS
2.1 support, this does not include IE 6 and 7. Sorry.

Hopefully someone on this list will prove me wrong. :)
--
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/

Re: [css-d] position with div in stead of table

[David Laakso]

On Mon, Apr 9, 2012 at 1:11 PM, Marie-Ange Demeulemeester <
marie.demeulemees...@gmail.com> wrote:

> Hi,
> I need a block with two columns.
>
>





> · 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.
>
>
>
> Thanks.
> --
> Marie




Marie,

You'll find some methods that will be of interest to you here

and note that to hit Redmond you'll need to declare a doctype  regardless
of the method you pick...

Best,
David Laakso



-- 
Chelsea Creek Studio
http://ccstudi.com
__
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/

Re: [css-d] position with div in stead of table

[Tim Arnold]

On Mon, Apr 9, 2012 at 1:11 PM, 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.
>
>
>
> Thanks.
> --
> Marie


Chris Coyier has a good roundup of the most common ways to achieve this:

http://css-tricks.com/fluid-width-equal-height-columns/



-- 

tim.arn...@gmail.com
__
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/