back to basics on divisions

Discussion in 'HTML' started by richard, Apr 13, 2008.

  1. richard

    richard Guest

    Why do I continously have this problem every time I work with
    divisions?

    Seems like it anyway.
    What I want is simple. I've done it before and every blasted time I
    keep running into these problems.

    Think of a simple table layout witn two rows.
    The second and subsequent row(s) has two cells.

    So I lay it out with a containing division as the "table".
    Row 1, cell 1, is the "title" or header.
    In a table this would get a colspan of 2.

    Row 2 therefor has 2 cells. So in divisions, they should be floated
    right?
    Well when I put the floats in, the second row cells refuse to be
    contained within the "table".

    What's the trick to contain the data within the cells as I want them?
    I just can't seem to figure it out again.


    <div class="atable">
    <div class="row1">Title</div>
    <div class="row2cell1">Text</div>
    <div class="row2cell2">Data</div>
    </div>

    A site that shows me what I want to do would be better for me to look
    at. Trying to find one through google is a frickin joke.
    richard, Apr 13, 2008
    #1
    1. Advertising

  2. richard wrote:

    > Why do I continously have this problem every time I work with
    > divisions?


    I can answer that...

    > Think of a simple table layout witn two rows.


    So why don't you just use a table?

    --
    -bts
    -Friends don't let friends drive Vista
    Beauregard T. Shagnasty, Apr 13, 2008
    #2
    1. Advertising

  3. richard wrote:
    > Why do I continously have this problem every time I work with
    > divisions?


    <snip>

    > What's the trick to contain the data within the cells as I want them?
    > I just can't seem to figure it out again.
    >
    >
    > <div class="atable">
    > <div class="row1">Title</div>
    > <div class="row2cell1">Text</div>
    > <div class="row2cell2">Data</div>
    > </div>
    >
    > A site that shows me what I want to do would be better for me to look
    > at. Trying to find one through google is a frickin joke.


    Because you fail to understand that by default floats are not supposed
    to be contained within their "container" parent block, see example when
    an image is set to display as block and floated withing a paragraph...


    http://www.w3.org/TR/CSS21/visuren.html#img-float2p
    Visual formatting model

    If you a "atable" to contain your floats you either have to add a
    clearing element after your floats within "atable" or change overflow
    property of "atable" to auto or hidden...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Apr 13, 2008
    #3
  4. richard

    dorayme Guest

    In article <>,
    richard <> wrote:

    > What's the trick to contain the data within the cells as I want them?
    > I just can't seem to figure it out again.
    >
    >
    > <div class="atable">
    > <div class="row1">Title</div>
    > <div class="row2cell1">Text</div>
    > <div class="row2cell2">Data</div>
    > </div>
    >
    > A site that shows me what I want to do would be better for me to look
    > at. Trying to find one through google is a frickin joke.


    Fancy this sort of thing at all:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Menu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css" media="all">
    div {border: 1px solid; text-align: center;}
    ..atable {width: 40em;}
    ..row2cell1 {float:left; width:50%;}
    </style>
    </head>
    <body>
    <div class="atable">
    <div class="row1">Title</div>
    <div class="row2cell1">Text</div>
    <div class="row2cell2">Data</div>
    </div>
    </body>
    </html>

    ?

    --
    dorayme
    dorayme, Apr 13, 2008
    #4
  5. richard

    richard Guest

    On Mon, 14 Apr 2008 08:23:14 +1000, dorayme
    <> wrote:

    >In article <>,
    > richard <> wrote:
    >
    >> What's the trick to contain the data within the cells as I want them?
    >> I just can't seem to figure it out again.
    >>
    >>
    >> <div class="atable">
    >> <div class="row1">Title</div>
    >> <div class="row2cell1">Text</div>
    >> <div class="row2cell2">Data</div>
    >> </div>
    >>
    >> A site that shows me what I want to do would be better for me to look
    >> at. Trying to find one through google is a frickin joke.

    >
    >Fancy this sort of thing at all:


    Precisely what is so confusing to me as to why MY version was not
    working. I figure it has something to do as to when the float is
    placed in the css. If you place it at the end of the list, nothing
    seems to work right. So I'll try to remember to put float first.

    Thanks.













    >
    ><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    ><html>
    ><head>
    ><title>Menu</title>
    ><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    ><style type="text/css" media="all">
    >div {border: 1px solid; text-align: center;}
    >.atable {width: 40em;}
    >.row2cell1 {float:left; width:50%;}
    ></style>
    ></head>
    ><body>
    ><div class="atable">
    > <div class="row1">Title</div>
    > <div class="row2cell1">Text</div>
    > <div class="row2cell2">Data</div>
    ></div>
    ></body>
    ></html>
    >
    >?
    richard, Apr 14, 2008
    #5
    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. time waster
    Replies:
    5
    Views:
    782
    informant
    Nov 17, 2003
  2. Dennis M. Marks

    Positioning Divisions with CSS

    Dennis M. Marks, Dec 10, 2003, in forum: HTML
    Replies:
    1
    Views:
    563
    Terry Joyce
    Dec 10, 2003
  3. Richard
    Replies:
    3
    Views:
    398
    Richard
    Jan 10, 2004
  4. Richard
    Replies:
    5
    Views:
    474
    rblah
    Jan 17, 2004
  5. Richard
    Replies:
    1
    Views:
    369
Loading...

Share This Page