Lately I'm finding a lot of absolute divs

Discussion in 'HTML' started by Mr Bean, Apr 1, 2005.

  1. Mr Bean

    Mr Bean Guest

    Like that below.

    Perfectly flexible, easy to use.

    Any pro or con's?

    -----------------------------------------------------------------------------

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html><head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    </script><title>No title</title>

    <style>

    body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size: 100%;
    background-color: silver;
    /*text-align: center;*/
    }


    h1, h2, h3, h4 {
    margin-top: 12px;;
    margin-bottom: 3px;
    margin-left: 8px;
    font-size: 100%;
    font-weight: bold;
    color: #0C3865;
    clear: both;
    }

    h2 {
    font-size: 98%;
    }

    h3 {
    /*padding-left: 20px;*/
    font-size: 95%;
    }

    h4 {
    margin-top: 2px;
    padding-left: 2px;
    margin-bottom: 2px;
    font-size: 93%;
    }



    p {
    display: block;
    font-size: 83%;
    padding-left: 10px;
    margin-top: 2px;
    /*text-indent: 1.2em;*/
    text-align: left;
    margin-bottom: 3px;
    clear: both;
    }

    a, a:active {
    font-size: 100%;
    /*color: #C61000;*/
    font-weight: bold;
    color: #0C3865;
    text-decoration: underline;
    }

    a:hover {
    text-decoration: underline;
    color: #C61000;
    }

    a:visited {
    color: #2c608e;
    }


    #head {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 120px;
    width: 100%;
    background-color: #FFFFEE;
    background-image: url("../img/head_bg01.jpg");
    background-repeat: repeat-x;
    border: 1px solid #000000;
    }

    #leftcol {
    position: absolute;
    top: 123px;
    left: 0px;
    width: 189px;
    border-right: 5px solid #000000;
    background-color: #CCBBDD;
    }

    #rightcol {
    position: absolute;
    top: 123px;
    right: 0px;
    width: 181px;
    border-left: 5px solid #000000;
    background-color: #AACCEE;
    }

    #end {
    clear: both;
    margin-top: 2px;
    border-top: 3px solid #A1BBE4;
    text-align: center;
    font-size: 100%;
    font-weight: normal;
    color: #0C3865;
    padding-top: 5px;
    background-color: #CCCCFF;
    }


    ..central {
    margin-top: 123px;
    margin-left: 189px;
    margin-right: 182px;
    background-color: #FFFFFF;
    }


    </style>


    </head>

    <body>

    <div id="head">


    <h1>Main heading</h1>


    </div>



    <div id="leftcol">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna

    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis
    aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum. </p>
    <p>&nbsp;</div>

    <div class="central">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse cillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt mollit
    anim id est laborum. Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse cillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt mollit
    anim id est laborum. Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse cillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt mollit
    anim id est laborum. Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse cillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt mollit
    anim id est laborum. </p>

    </div>


    <div id="rightcol">


    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna

    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis
    aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum. </p>



    </div>




    </body>
    </html>
    Mr Bean, Apr 1, 2005
    #1
    1. Advertising

  2. Mr Bean

    Ryan Heuser Guest

    Have you browser tested it? IE/FF/Op?

    -Ryan Heuser

    Mr Bean wrote:
    > Like that below.
    >
    > Perfectly flexible, easy to use.
    >
    > Any pro or con's?
    >
    > -----------------------------------------------------------------------------
    >
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    > <html><head>
    >
    > <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    >
    > </script><title>No title</title>
    >
    > <style>
    >
    > body {
    > margin: 0;
    > padding: 0;
    > font-family: Arial, Helvetica, Verdana, sans-serif;
    > font-size: 100%;
    > background-color: silver;
    > /*text-align: center;*/
    > }
    >
    >
    > h1, h2, h3, h4 {
    > margin-top: 12px;;
    > margin-bottom: 3px;
    > margin-left: 8px;
    > font-size: 100%;
    > font-weight: bold;
    > color: #0C3865;
    > clear: both;
    > }
    >
    > h2 {
    > font-size: 98%;
    > }
    >
    > h3 {
    > /*padding-left: 20px;*/
    > font-size: 95%;
    > }
    >
    > h4 {
    > margin-top: 2px;
    > padding-left: 2px;
    > margin-bottom: 2px;
    > font-size: 93%;
    > }
    >
    >
    >
    > p {
    > display: block;
    > font-size: 83%;
    > padding-left: 10px;
    > margin-top: 2px;
    > /*text-indent: 1.2em;*/
    > text-align: left;
    > margin-bottom: 3px;
    > clear: both;
    > }
    >
    > a, a:active {
    > font-size: 100%;
    > /*color: #C61000;*/
    > font-weight: bold;
    > color: #0C3865;
    > text-decoration: underline;
    > }
    >
    > a:hover {
    > text-decoration: underline;
    > color: #C61000;
    > }
    >
    > a:visited {
    > color: #2c608e;
    > }
    >
    >
    > #head {
    > position: absolute;
    > top: 0px;
    > left: 0px;
    > height: 120px;
    > width: 100%;
    > background-color: #FFFFEE;
    > background-image: url("../img/head_bg01.jpg");
    > background-repeat: repeat-x;
    > border: 1px solid #000000;
    > }
    >
    > #leftcol {
    > position: absolute;
    > top: 123px;
    > left: 0px;
    > width: 189px;
    > border-right: 5px solid #000000;
    > background-color: #CCBBDD;
    > }
    >
    > #rightcol {
    > position: absolute;
    > top: 123px;
    > right: 0px;
    > width: 181px;
    > border-left: 5px solid #000000;
    > background-color: #AACCEE;
    > }
    >
    > #end {
    > clear: both;
    > margin-top: 2px;
    > border-top: 3px solid #A1BBE4;
    > text-align: center;
    > font-size: 100%;
    > font-weight: normal;
    > color: #0C3865;
    > padding-top: 5px;
    > background-color: #CCCCFF;
    > }
    >
    >
    > .central {
    > margin-top: 123px;
    > margin-left: 189px;
    > margin-right: 182px;
    > background-color: #FFFFFF;
    > }
    >
    >
    > </style>
    >
    >
    > </head>
    >
    > <body>
    >
    > <div id="head">
    >
    >
    > <h1>Main heading</h1>
    >
    >
    > </div>
    >
    >
    >
    > <div id="leftcol">
    > <p>Lorem ipsum dolor sit amet, consectetur
    > adipisicing elit,
    > sed do eiusmod tempor incididunt ut labore et dolore
    > magna
    >
    > aliqua. Ut enim ad minim veniam, quis nostrud
    > exercitation
    > ullamco laboris nisi ut aliquip ex ea commodo
    > consequat.
    > Duis
    > aute irure dolor in reprehenderit in voluptate velit
    > esse
    > cillum dolore eu fugiat nulla pariatur. Excepteur sint
    > occaecat
    > cupidatat non proident, sunt in culpa qui officia
    > deserunt
    > mollit anim id est laborum. </p>
    > <p>&nbsp;</div>
    >
    > <div class="central">
    > <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    > sed do
    > eiusmod tempor incididunt ut labore et dolore magna
    > aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    > ullamco
    > laboris nisi ut aliquip ex ea commodo consequat. Duis
    > aute irure dolor in reprehenderit in voluptate velit esse
    > cillum
    > dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    > cupidatat non proident, sunt in culpa qui officia deserunt
    > mollit
    > anim id est laborum. Lorem ipsum dolor sit amet, consectetur
    > adipisicing elit, sed do eiusmod tempor incididunt ut labore et
    > dolore magna
    > aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    > ullamco
    > laboris nisi ut aliquip ex ea commodo consequat. Duis
    > aute irure dolor in reprehenderit in voluptate velit esse
    > cillum
    > dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    > cupidatat non proident, sunt in culpa qui officia deserunt
    > mollit
    > anim id est laborum. Lorem ipsum dolor sit amet, consectetur
    > adipisicing elit, sed do eiusmod tempor incididunt ut labore et
    > dolore magna
    > aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    > ullamco
    > laboris nisi ut aliquip ex ea commodo consequat. Duis
    > aute irure dolor in reprehenderit in voluptate velit esse
    > cillum
    > dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    > cupidatat non proident, sunt in culpa qui officia deserunt
    > mollit
    > anim id est laborum. Lorem ipsum dolor sit amet, consectetur
    > adipisicing elit, sed do eiusmod tempor incididunt ut labore et
    > dolore magna
    > aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    > ullamco
    > laboris nisi ut aliquip ex ea commodo consequat. Duis
    > aute irure dolor in reprehenderit in voluptate velit esse
    > cillum
    > dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    > cupidatat non proident, sunt in culpa qui officia deserunt
    > mollit
    > anim id est laborum. </p>
    >
    > </div>
    >
    >
    > <div id="rightcol">
    >
    >
    > <p>Lorem ipsum dolor sit amet, consectetur
    > adipisicing elit,
    > sed do eiusmod tempor incididunt ut labore et dolore
    > magna
    >
    > aliqua. Ut enim ad minim veniam, quis nostrud
    > exercitation
    > ullamco laboris nisi ut aliquip ex ea commodo
    > consequat.
    > Duis
    > aute irure dolor in reprehenderit in voluptate velit
    > esse
    > cillum dolore eu fugiat nulla pariatur. Excepteur sint
    > occaecat
    > cupidatat non proident, sunt in culpa qui officia
    > deserunt
    > mollit anim id est laborum. </p>
    >
    >
    >
    > </div>
    >
    >
    >
    >
    > </body>
    > </html>
    Ryan Heuser, Apr 1, 2005
    #2
    1. Advertising

  3. Mr Bean

    APT Guest

    "Mr Bean" <> wrote in message
    news:...
    > Like that below.
    >
    > Perfectly flexible, easy to use.
    >
    > Any pro or con's?
    >
    > -----------------------------------------------------------------------------
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    > <html><head>
    >
    > <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    >
    > </script><title>No title</title>
    >
    > <style>
    >
    > body {
    > margin: 0;
    > padding: 0;
    > font-family: Arial, Helvetica, Verdana, sans-serif;
    > font-size: 100%;
    > background-color: silver;
    > /*text-align: center;*/
    > }
    >
    >
    > h1, h2, h3, h4 {
    > margin-top: 12px;;
    > margin-bottom: 3px;
    > margin-left: 8px;
    > font-size: 100%;
    > font-weight: bold;
    > color: #0C3865;
    > clear: both;
    > }
    >
    > h2 {
    > font-size: 98%;
    > }
    >
    > h3 {
    > /*padding-left: 20px;*/
    > font-size: 95%;
    > }
    >
    > h4 {
    > margin-top: 2px;
    > padding-left: 2px;
    > margin-bottom: 2px;
    > font-size: 93%;
    > }
    >
    >
    >
    > p {
    > display: block;
    > font-size: 83%;
    > padding-left: 10px;
    > margin-top: 2px;
    > /*text-indent: 1.2em;*/
    > text-align: left;
    > margin-bottom: 3px;
    > clear: both;
    > }
    >
    > a, a:active {
    > font-size: 100%;
    > /*color: #C61000;*/
    > font-weight: bold;
    > color: #0C3865;
    > text-decoration: underline;
    > }
    >
    > a:hover {
    > text-decoration: underline;
    > color: #C61000;
    > }
    >
    > a:visited {
    > color: #2c608e;
    > }
    >
    >
    > #head {
    > position: absolute;
    > top: 0px;
    > left: 0px;
    > height: 120px;
    > width: 100%;
    > background-color: #FFFFEE;
    > background-image: url("../img/head_bg01.jpg");
    > background-repeat: repeat-x;
    > border: 1px solid #000000;
    > }
    >
    > #leftcol {
    > position: absolute;
    > top: 123px;
    > left: 0px;
    > width: 189px;
    > border-right: 5px solid #000000;
    > background-color: #CCBBDD;
    > }
    >
    > #rightcol {
    > position: absolute;
    > top: 123px;
    > right: 0px;
    > width: 181px;
    > border-left: 5px solid #000000;
    > background-color: #AACCEE;
    > }
    >
    > #end {
    > clear: both;
    > margin-top: 2px;
    > border-top: 3px solid #A1BBE4;
    > text-align: center;
    > font-size: 100%;
    > font-weight: normal;
    > color: #0C3865;
    > padding-top: 5px;
    > background-color: #CCCCFF;
    > }
    >
    >
    > .central {
    > margin-top: 123px;
    > margin-left: 189px;
    > margin-right: 182px;
    > background-color: #FFFFFF;
    > }
    >
    >
    > </style>
    >
    >
    > </head>
    >
    > <body>
    >
    > <div id="head">
    >
    >
    > <h1>Main heading</h1>
    >
    >
    > </div>
    >
    >
    > <div id="leftcol">
    > <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    > sed do eiusmod tempor incididunt ut labore et dolore magna
    >
    > aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    > ullamco laboris nisi ut aliquip ex ea commodo consequat.
    > Duis
    > aute irure dolor in reprehenderit in voluptate velit esse
    > cillum dolore eu fugiat nulla pariatur. Excepteur sint
    > occaecat
    > cupidatat non proident, sunt in culpa qui officia deserunt
    > mollit anim id est laborum. </p>
    > <p>&nbsp;</div>
    >
    > <div class="central">
    > <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    > eiusmod tempor incididunt ut labore et dolore magna
    > aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    > laboris nisi ut aliquip ex ea commodo consequat. Duis
    > aute irure dolor in reprehenderit in voluptate velit esse cillum
    > dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    > cupidatat non proident, sunt in culpa qui officia deserunt mollit
    > anim id est laborum. Lorem ipsum dolor sit amet, consectetur
    > adipisicing elit, sed do eiusmod tempor incididunt ut labore et
    > dolore magna
    > aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    > laboris nisi ut aliquip ex ea commodo consequat. Duis
    > aute irure dolor in reprehenderit in voluptate velit esse cillum
    > dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    > cupidatat non proident, sunt in culpa qui officia deserunt mollit
    > anim id est laborum. Lorem ipsum dolor sit amet, consectetur
    > adipisicing elit, sed do eiusmod tempor incididunt ut labore et
    > dolore magna
    > aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    > laboris nisi ut aliquip ex ea commodo consequat. Duis
    > aute irure dolor in reprehenderit in voluptate velit esse cillum
    > dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    > cupidatat non proident, sunt in culpa qui officia deserunt mollit
    > anim id est laborum. Lorem ipsum dolor sit amet, consectetur
    > adipisicing elit, sed do eiusmod tempor incididunt ut labore et
    > dolore magna
    > aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    > laboris nisi ut aliquip ex ea commodo consequat. Duis
    > aute irure dolor in reprehenderit in voluptate velit esse cillum
    > dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    > cupidatat non proident, sunt in culpa qui officia deserunt mollit
    > anim id est laborum. </p>
    >
    > </div>
    >
    >
    > <div id="rightcol">
    >
    >
    > <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    > sed do eiusmod tempor incididunt ut labore et dolore magna
    >
    > aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    > ullamco laboris nisi ut aliquip ex ea commodo consequat.
    > Duis
    > aute irure dolor in reprehenderit in voluptate velit esse
    > cillum dolore eu fugiat nulla pariatur. Excepteur sint
    > occaecat
    > cupidatat non proident, sunt in culpa qui officia deserunt
    > mollit anim id est laborum. </p>
    >
    >
    >
    > </div>
    >
    >
    >
    >
    > </body>
    > </html>


    I use absolute div's a lot. I like things to be very precise and, as you
    mentioned, it is simpler is many ways.

    Though, absolute positioning lacks flexibility. It is hard to get pages to
    fill 100% of the screen using strict absolute positioning.

    To be honest though, if I understood relative positioning, em spacing and
    all that better, I would probably be using it more than absolute. It seems
    more flexible.

    I'd be interested in hearing from people who use relative positioning to see
    what they think.

    Steve
    APT, Apr 1, 2005
    #3
  4. Mr Bean

    R2G2 Guest

    On Fri, 1 Apr 2005 10:24:06 -0900, "APT" <>
    wrote:

    >
    >"Mr Bean" <> wrote in message
    >news:...
    >> Like that below.
    >>
    >> Perfectly flexible, easy to use.
    >>
    >> Any pro or con's?
    >>

    <snip lots of code>
    >
    >I use absolute div's a lot. I like things to be very precise and, as you
    >mentioned, it is simpler is many ways.
    >
    >Though, absolute positioning lacks flexibility. It is hard to get pages to
    >fill 100% of the screen using strict absolute positioning.
    >
    >To be honest though, if I understood relative positioning, em spacing and
    >all that better, I would probably be using it more than absolute. It seems
    >more flexible.
    >
    >I'd be interested in hearing from people who use relative positioning to see
    >what they think.
    >
    >Steve
    >

    I had problems with absolute divs because viewers' different sized
    screens, or people using their choice of text size - although it
    looked great on my screen the way I'd set it up, if someone was
    viewing with larger text size, the text spilled over into the next
    box. I mainly use tables for layout now.

    --
    Beccy

    Bec but...
    R2G2, Apr 1, 2005
    #4
  5. R2G2 wrote:
    > I had problems with absolute divs because viewers' different sized
    > screens, or people using their choice of text size - although it
    > looked great on my screen the way I'd set it up, if someone was
    > viewing with larger text size, the text spilled over into the next
    > box.


    Probably because you set the dimensions of your boxes with pixels,
    rather than ems which would allow the boxes (divs) to expand along
    with the text. It works rather well this way.

    > I mainly use tables for layout now.


    You gave up too quickly... <g>

    --
    -bts
    -This space intentionally left blank.
    Beauregard T. Shagnasty, Apr 1, 2005
    #5
  6. Mr Bean

    R2G2 Guest

    On Fri, 01 Apr 2005 21:11:56 GMT, "Beauregard T. Shagnasty"
    <> wrote:

    >R2G2 wrote:
    >> I had problems with absolute divs because viewers' different sized
    >> screens, or people using their choice of text size - although it
    >> looked great on my screen the way I'd set it up, if someone was
    >> viewing with larger text size, the text spilled over into the next
    >> box.

    >
    >Probably because you set the dimensions of your boxes with pixels,
    >rather than ems which would allow the boxes (divs) to expand along
    >with the text. It works rather well this way.
    >

    I could have done - I trusted dreamweaver to make them for me, and
    understood nothing about html ...

    >> I mainly use tables for layout now.

    >
    >You gave up too quickly... <g>


    Maybe, but I'm learning html and css now, so it was maybe worth
    learning the lesson, even if it was really gutting to see how some
    others were seeing my site.

    --
    Beccy

    Bec but...
    R2G2, Apr 1, 2005
    #6
  7. Mr Bean

    kchayka Guest

    Beauregard T. Shagnasty wrote:
    > R2G2 wrote:
    >> I had problems with absolute divs because viewers' different sized
    >> screens, or people using their choice of text size - although it
    >> looked great on my screen the way I'd set it up, if someone was
    >> viewing with larger text size, the text spilled over into the next
    >> box.

    >
    > Probably because you set the dimensions of your boxes with pixels,
    > rather than ems which would allow the boxes (divs) to expand along
    > with the text.


    The problem is probably more setting both height and width for text
    blocks. Even with ems, text can overflow one or the other dimension. A
    lot depends on the font and variables like line-height.

    For text blocks that you want to be restricted in some way, it's almost
    always best to set a fixed width (ems are good) and let height adjust as
    needed.

    >> I mainly use tables for layout now.

    >
    > You gave up too quickly... <g>


    <sigh> These young'ns got no patience. I wonder how many actually RTFM
    before, during or after hacking away at CSS? Very few, I'd bet.

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
    kchayka, Apr 1, 2005
    #7
  8. Mr Bean

    APT Guest

    "Beauregard T. Shagnasty" <> wrote in message
    news:wOi3e.57$...
    > R2G2 wrote:
    >> I had problems with absolute divs because viewers' different sized
    >> screens, or people using their choice of text size - although it looked
    >> great on my screen the way I'd set it up, if someone was viewing with
    >> larger text size, the text spilled over into the next
    >> box.

    >
    > Probably because you set the dimensions of your boxes with pixels, rather
    > than ems which would allow the boxes (divs) to expand along with the text.
    > It works rather well this way.
    >
    >> I mainly use tables for layout now.

    >
    > You gave up too quickly... <g>
    >
    > --
    > -bts
    > -This space intentionally left blank.


    If you really want to hard code the height, then you can use the "overflow"
    tag in CSS. Set it to "auto" and it will put a scroll bar on any box that
    has over flowing text.

    Also, everytime I get frustrated with CSS and return to tables, I end even
    more frustrated and go back to CSS.

    I like the suggestion for using em spacing instead of pixels. I will have to
    try it with the site I am developing now.
    APT, Apr 2, 2005
    #8
  9. Lauri Raittila, Apr 4, 2005
    #9
    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. Christopher Pisz

    increase in spam lately

    Christopher Pisz, Nov 15, 2007, in forum: C++
    Replies:
    8
    Views:
    322
    Victor Bazarov
    Nov 16, 2007
  2. Replies:
    1
    Views:
    305
  3. Raymond Hettinger

    Have you read the Python docs lately?

    Raymond Hettinger, Apr 27, 2011, in forum: Python
    Replies:
    6
    Views:
    244
    Vinay Sajip
    Apr 28, 2011
  4. Macsicarr
    Replies:
    3
    Views:
    108
    wmain
    May 11, 2005
  5. Steven Clift
    Replies:
    0
    Views:
    66
    Steven Clift
    Mar 8, 2013
Loading...

Share This Page