|
|
Posted by Ben C on 07/26/07 21:06
On 2007-07-26, Froefel <hansdeschryver@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]
|