Simple CSS box question

Discussion in 'HTML' started by Froefel, Jul 26, 2007.

  1. Froefel

    Froefel Guest

    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
    Froefel, Jul 26, 2007
    #1
    1. Advertising

  2. On Jul 26, 6:14 am, Froefel <> 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...


    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.
    Travis Newbury, Jul 26, 2007
    #2
    1. Advertising

  3. Froefel

    Froefel Guest

    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


    On Jul 26, 1:34 pm, Travis Newbury <> wrote:
    > On Jul 26, 6:14 am, Froefel <> 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...

    >
    > 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, Jul 26, 2007
    #3
  4. On Jul 26, 10:28 am, Froefel <> wrote:
    > 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...
    Travis Newbury, Jul 26, 2007
    #4
  5. Froefel

    Neredbojias Guest

    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.

    --
    Neredbojias
    Half lies are worth twice as much as whole lies.
    Neredbojias, Jul 26, 2007
    #5
  6. Froefel wrote:
    > 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


    --
    www.daszeichen.ch
    remove nixspam to reply
    Bernhard Sturm, Jul 26, 2007
    #6
  7. Froefel

    Ben C Guest

    On 2007-07-26, Froefel <> 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.
    Ben C, Jul 26, 2007
    #7
  8. Froefel

    dorayme Guest

    In article
    <>,
    Travis Newbury <> wrote:

    > On Jul 26, 6:14 am, Froefel <> 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...

    >
    > 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
    dorayme, Jul 26, 2007
    #8
  9. Froefel

    dorayme Guest

    In article
    <>,
    Froefel <> 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...


    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.

    --
    dorayme
    dorayme, Jul 26, 2007
    #9
  10. Froefel

    Froefel Guest

    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 <> wrote:
    > On 2007-07-26, Froefel <> 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.
    Froefel, Jul 27, 2007
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Steve Letford

    Simple Find Dialog Box Question

    Steve Letford, Oct 19, 2003, in forum: ASP .Net
    Replies:
    3
    Views:
    311
    John Soulis [MSFT]
    Oct 23, 2003
  2. Gnarlodious
    Replies:
    4
    Views:
    17,577
    elizas
    May 5, 2010
  3. Replies:
    29
    Views:
    874
    Ben C
    Mar 21, 2008
  4. richard
    Replies:
    12
    Views:
    752
    dorayme
    Mar 9, 2010
  5. Matt  Koidin

    Simple Check Box Question

    Matt Koidin, Jun 17, 2005, in forum: Ruby
    Replies:
    8
    Views:
    137
    Hal Fulton
    Jun 22, 2005
Loading...

Share This Page