Simple CSS box question

[Froefel]

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%;
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%;
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'm having 2 problems:
1. The Content portion stick out by 2px to the right instead of being
aligned with the Header portion
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.

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

Any help would be greatly appreciated.
-- Hans

 

[Travis Newbury]

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

So I ask you. Is it worth the effort? What will your visitors gain?
Have you had people tell you they will never visit your site because
you used tables for layout? If you are having this much trouble with
"something very basic" what kind of trouble are you going to have when
you run into something more difficult?

Sorry, I don't believe the benefits outweigh the efforts in a straight
conversion of a site. Now, if you were starting from scratch? Then I
would say yea, take a look at CSS layout. But not if you are
converting just to convert.

 

[Froefel]

Actually this is a brand new intranet application in which a lot of
things are a first for me... first ASP.NET project, first time trying
to implement table-less layout... and first time juggling the pros and
cons of Ajax.NET.

So, anyone wanting to help me get the style definition, please let me
know...

-- Hans

 

[Travis Newbury]

Actually this is a brand new intranet application in which a lot of
things are a first for me... first ASP.NET project, first time trying
to implement table-less layout... and first time juggling the pros and
cons of Ajax.NET.

First, top posting is a no-no here.

Now, if you post a URL of your problem you will receive a ton of
answers. Then slowly the conversation will turn to a Flash no flash
argument, and it will end in a huge group hug...

 

[Neredbojias]

Well bust mah britches and call me cheeky, on Thu, 26 Jul 2007 10:14:20 GMT
Froefel scribed:

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

Put a div in a div, the outer of which has no border, margins, or padding.

 

[Bernhard Sturm]

Actually this is a brand new intranet application in which a lot of
things are a first for me... first ASP.NET project, first time trying
to implement table-less layout... and first time juggling the pros and
cons of Ajax.NET.

Sounds challenging. I hope you aren't doing this in a professional
environment, and it's just a try for yourself in order to get hands on
those completely new technologies for you.

So, anyone wanting to help me get the style definition, please let me
know...

give us a URL, and we will give you some hints. For a start: drop your
table wrapper. The box you would like to get should be structured as
follows:

<div id="panelheader"></div>
<div id="panelcontent"></div>

But I can't tell you more about a possible solution, as I can't see the
rest of your source. So post a URL.

cheers
bernhard

 

[Ben C]

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.

 

[dorayme]

So I ask you. Is it worth the effort? What will your visitors gain?
Have you had people tell you they will never visit your site because
you used tables for layout? If you are having this much trouble with
"something very basic" what kind of trouble are you going to have when
you run into something more difficult?

Sorry, I don't believe the benefits outweigh the efforts in a straight
conversion of a site. Now, if you were starting from scratch? Then I
would say yea, take a look at CSS layout. But not if you are
converting just to convert.

Where did he say he had a site in tables and was wanting to
convert? Wanting to know how to do something he can easily do and
has done for a demo here in tables is quite different.

 

[dorayme]

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

Except that the table you provide the code for does not look
anything like the ASCII drawing you present as an illustration of
what is wanted. Best to at least get the table to express what is
wanted and to post a url.

 

[Froefel]

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