Posted by Froefel on 07/27/07 09:23

Thanks to Ben C I jumped a huge step forward. Knowing that tables need
a width=100% in order to take up the entire width of a container
whereas DIV's do that without specifying a width fixed all my problems
(well, at least the ones described in my post).

Armed with this knowledge, I can now go back and get rid of the
container table as well and use floating DIV's. Thanks to everyone for
your input.

-- Hans



On Jul 26, 11:06 pm, Ben C <spams...@spam.eggs> wrote:
> On 2007-07-26, Froefel <hansdeschry...@gmail.com> wrote:
>
> > I'm trying to do something very basic, using CSS instead of tables.
> > Doing it the table-way I would have been done in 5 minutes... trying
> > to accomplish it in CSS it's taken me over 2 hours already. I'm sure
> > someone with CSS knowledge has a 5-minute solution to my problem...
> > Anyway, just venting a little bit.. here goes:
>
> > I'm trying to create a box with a header, using DIVs. The box should
> > look like this:
>
> > ----------------------------------------------
> >| Panel Header |
> >|--------------------------------------------|
> >| Panel Content |
> >| |
> >| |
> >|--------------------------------------------|
>
> > The Panel Header should have a left and rigfht margin of 5px and a top
> > and bottom margin of 2px. The Header has a gradient background image
> > and should not have a border.
> > The Panel Content should have an all-round margin of 5px and a 1px
> > border.
>
> > The CSS I have so far is:
> > .PanelHeader {
> > width:100%;
>
> ^^^^^^^^^^
>
> Leave this out
>
> > height:15px;
> > padding:2px 5px 2px 5px;
> > cursor: pointer;
> > vertical-align: middle;
> > background-image: url(images/bg-collapsepanel_green.png);
> > background-repeat:repeat-x;
> > color:#FFF;
> > font-weight:bold;
> > }
> > .PanelContent {
> > border:1px solid #334444;
> > width:100%;
>
> ^^^^^^^^^^^
>
> And this
>
> > padding:5px;
> > }
>
> > The markup is something like this:
> ><table cellspacing="0" cellpadding="0" style="width:100%">
> > <tr>
> > <td style="width:50%">Some content on the left</td>
> > <td style="width:50%">
> > <div class="PanelHeader">Header text</div>
> > <div class="PanelContent">Content text</div>
> > </td>
> > </tr>
> ></table>
>
> I thought you were trying to do without a table?
>
> > I'm having 2 problems:
> > 1. The Content portion stick out by 2px to the right instead of being
> > aligned with the Header portion
>
> Don't use width: 100% and that will go away. Width sets the width of the
> content area, borders padding and margin are extra.
>
> > 2. The Header and Content are wider than the TD in which they are
> > contained. Because the TD is part of a table that has a width=100%,
> > the Header and Content DIVs actually extend beyond the browser window.
>
> You almost never need width: 100% on normal flow block boxes (things
> like divs). They're not like tables (whose auto width is
> "shrink-to-fit"). Instead their auto width is "greedy".
>
> > Now I have read up on how both margin and padding add pixels to the
> > element's basic dimensions. but if that's the case, how on earth can
> > one create the effect of INNER margins or padding, like how it works
> > for tables??
>
> You can't although there are some proposed CSS3 properties (things like
> box-sizing: border-box) but most of the time you don't need to. Just
> don't set widths on divs at all and they will slot into their containers
> perfectly.

[Back to original message]