Re: Simple CSS box question
- From: Froefel <hansdeschryver@xxxxxxxxx>
- Date: Fri, 27 Jul 2007 09:23:15 -0000
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...@xxxxxxxxx> wrote:
On 2007-07-26, Froefel <hansdeschry...@xxxxxxxxx> 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.
.
- References:
- Simple CSS box question
- From: Froefel
- Re: Simple CSS box question
- From: Ben C
- Simple CSS box question
- Prev by Date: Re: Firefox displays too high table
- Next by Date: Re: Firefox displays too high table
- Previous by thread: Re: Simple CSS box question
- Next by thread: Re: Simple CSS box question
- Index(es):
Relevant Pages
|
