vertical-align

Discussion in 'HTML' started by windandwaves, Oct 29, 2006.

  1. windandwaves

    windandwaves Guest

    Hi Folk

    Can you do vertical-align bottom in a div or only really in a table? I
    prefer to use divs of course, but in tables, the vertical align seems
    to be working better. Is this correct?

    TIA

    Nicolaas
    windandwaves, Oct 29, 2006
    #1
    1. Advertising

  2. windandwaves

    Ben C Guest

    On 2006-10-28, windandwaves <> wrote:
    > Hi Folk
    >
    > Can you do vertical-align bottom in a div or only really in a table?


    You can set it on inline level elements to move them relative to the
    line they're on. But if you want the effect of a box with a set height
    that contains another box at the bottom of it, use positioning. Set the
    outer box to position: relative (or position: absolute), and the inner
    box to position: absolute with bottom: 0px.

    You set position on the outer box just to make it the containing block
    for the inner box (i.e. the block the inner box is 0px from the bottom
    of).

    Using relative rather than absolute on the outer box keeps it "in the
    normal flow".
    Ben C, Oct 29, 2006
    #2
    1. Advertising

  3. windandwaves

    windandwaves Guest

    Ben C wrote:
    > On 2006-10-28, windandwaves <> wrote:
    > > Hi Folk
    > >
    > > Can you do vertical-align bottom in a div or only really in a table?

    >
    > You can set it on inline level elements to move them relative to the
    > line they're on. But if you want the effect of a box with a set height
    > that contains another box at the bottom of it, use positioning. Set the
    > outer box to position: relative (or position: absolute), and the inner
    > box to position: absolute with bottom: 0px.
    >
    > You set position on the outer box just to make it the containing block
    > for the inner box (i.e. the block the inner box is 0px from the bottom
    > of).
    >
    > Using relative rather than absolute on the outer box keeps it "in the
    > normal flow".


    Hi, I tested it and it works a treat. THANK YOU

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <div id="outer" style="position: relative; height: 300px;
    background-color: #ccc; width: 200px;">
    <div id="inner" style="position: absolute; bottom: 0px;
    background-color: #777; ">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Pellentesque leo. Duis
    arcu erat, posuere non, fringilla vel, ultricies ut, purus. Nunc
    turpis. Nullam
    hendrerit, elit nec molestie pellentesque, ligula ante tempor dui, eu
    molestie
    nibh erat sed sem. Maecenas orci. Donec aliquam imperdiet sapien.
    </div>
    </div>
    </body>
    </html>
    windandwaves, Oct 29, 2006
    #3
  4. windandwaves wrote:

    > Hi, I tested it and it works a treat. THANK YOU
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


    Now just update your doctype:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Oct 29, 2006
    #4
  5. windandwaves

    windandwaves Guest

    Jonathan N. Little wrote:
    > windandwaves wrote:
    >
    > > Hi, I tested it and it works a treat. THANK YOU
    > >
    > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    >
    > Now just update your doctype:
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">



    I go for xhtml strict, but visual studio from Windoz does not....
    Sorry. Thanks again for your help.
    windandwaves, Oct 30, 2006
    #5
  6. windandwaves wrote:
    > Jonathan N. Little wrote:
    >> windandwaves wrote:
    >>
    >>> Hi, I tested it and it works a treat. THANK YOU
    >>>
    >>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    >> Now just update your doctype:
    >>
    >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    >> "http://www.w3.org/TR/html4/strict.dtd">

    >
    >
    > I go for xhtml strict, but visual studio from Windoz does not....
    > Sorry. Thanks again for your help.
    >

    What! MS won't let you change your doctype! Or is just a default, and
    most don't know how to change it. Don't know Visual Studio, most folks
    who use Perl with CGI.pm only use the default "XHTML 1.0 Transitional"
    but you *can* change it....


    use CGI qw(-no_xhtml);
    $CGI::DEFAULT_DTD = ['-//W3C//DTD HTML 4.01//EN',
    'http://www.w3.org/TR/html4/strict.dtd'];

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Oct 30, 2006
    #6
  7. windandwaves

    password Guest

    "windandwaves" <> wrote in message
    news:...
    >
    > Ben C wrote:
    > > On 2006-10-28, windandwaves <> wrote:
    > > > Hi Folk
    > > >
    > > > Can you do vertical-align bottom in a div or only really in a table?

    > >
    > > You can set it on inline level elements to move them relative to the
    > > line they're on. But if you want the effect of a box with a set height
    > > that contains another box at the bottom of it, use positioning. Set the
    > > outer box to position: relative (or position: absolute), and the inner
    > > box to position: absolute with bottom: 0px.
    > >
    > > You set position on the outer box just to make it the containing block
    > > for the inner box (i.e. the block the inner box is 0px from the bottom
    > > of).
    > >
    > > Using relative rather than absolute on the outer box keeps it "in the
    > > normal flow".

    >

    ive just done this for a div containing a form (drop down list thing) and it
    works fine in ie6 and firefox2 but opera9 leaves a 10 (approx) gap at the
    bottom - anyway around this?
    i am currently testing my page in all other (browser/op) combinations with
    http://browsershots.org/ so may have to return again for more help ho hum.
    password, Oct 31, 2006
    #7
  8. windandwaves

    Ben C Guest

    On 2006-10-31, password <> wrote:
    >
    > "windandwaves" <> wrote in message
    > news:...
    >>
    >> Ben C wrote:
    >> > On 2006-10-28, windandwaves <> wrote:
    >> > > Hi Folk
    >> > >
    >> > > Can you do vertical-align bottom in a div or only really in a table?
    >> >
    >> > You can set it on inline level elements to move them relative to the
    >> > line they're on. But if you want the effect of a box with a set height
    >> > that contains another box at the bottom of it, use positioning. Set the
    >> > outer box to position: relative (or position: absolute), and the inner
    >> > box to position: absolute with bottom: 0px.
    >> >
    >> > You set position on the outer box just to make it the containing block
    >> > for the inner box (i.e. the block the inner box is 0px from the bottom
    >> > of).
    >> >
    >> > Using relative rather than absolute on the outer box keeps it "in the
    >> > normal flow".

    >>

    > ive just done this for a div containing a form (drop down list thing) and it
    > works fine in ie6 and firefox2 but opera9 leaves a 10 (approx) gap at the
    > bottom - anyway around this?


    It's probably just a margin-- try adding margin-bottom: 0 to the form.
    Ben C, Oct 31, 2006
    #8
  9. windandwaves

    password Guest

    "Ben C" <> wrote in message
    news:...
    > On 2006-10-31, password <> wrote:
    > >
    > > "windandwaves" <> wrote in message
    > > news:...
    > >>
    > >> Ben C wrote:
    > >> > On 2006-10-28, windandwaves <> wrote:
    > >> > > Hi Folk
    > >> > >
    > >> > > Can you do vertical-align bottom in a div or only really in a

    table?
    > >> >
    > >> > You can set it on inline level elements to move them relative to the
    > >> > line they're on. But if you want the effect of a box with a set

    height
    > >> > that contains another box at the bottom of it, use positioning. Set

    the
    > >> > outer box to position: relative (or position: absolute), and the

    inner
    > >> > box to position: absolute with bottom: 0px.
    > >> >
    > >> > You set position on the outer box just to make it the containing

    block
    > >> > for the inner box (i.e. the block the inner box is 0px from the

    bottom
    > >> > of).
    > >> >
    > >> > Using relative rather than absolute on the outer box keeps it "in the
    > >> > normal flow".
    > >>

    > > ive just done this for a div containing a form (drop down list thing)

    and it
    > > works fine in ie6 and firefox2 but opera9 leaves a 10 (approx) gap at

    the
    > > bottom - anyway around this?

    >
    > It's probably just a margin-- try adding margin-bottom: 0 to the form.


    ah i shall try that.. in my ignorance i thought bottom:0px was refering to
    the margin.
    password, Oct 31, 2006
    #9
  10. windandwaves

    password Guest

    "password" <> wrote in message
    news:...
    >
    > "Ben C" <> wrote in message
    > news:...
    > > On 2006-10-31, password <> wrote:
    > > >
    > > > "windandwaves" <> wrote in message
    > > > news:...
    > > >>
    > > >> Ben C wrote:
    > > >> > On 2006-10-28, windandwaves <> wrote:
    > > >> > > Hi Folk
    > > >> > >
    > > >> > > Can you do vertical-align bottom in a div or only really in a

    > table?
    > > >> >
    > > >> > You can set it on inline level elements to move them relative to

    the
    > > >> > line they're on. But if you want the effect of a box with a set

    > height
    > > >> > that contains another box at the bottom of it, use positioning. Set

    > the
    > > >> > outer box to position: relative (or position: absolute), and the

    > inner
    > > >> > box to position: absolute with bottom: 0px.
    > > >> >
    > > >> > You set position on the outer box just to make it the containing

    > block
    > > >> > for the inner box (i.e. the block the inner box is 0px from the

    > bottom
    > > >> > of).
    > > >> >
    > > >> > Using relative rather than absolute on the outer box keeps it "in

    the
    > > >> > normal flow".
    > > >>
    > > > ive just done this for a div containing a form (drop down list thing)

    > and it
    > > > works fine in ie6 and firefox2 but opera9 leaves a 10 (approx) gap at

    > the
    > > > bottom - anyway around this?

    > >
    > > It's probably just a margin-- try adding margin-bottom: 0 to the form.

    >
    > ah i shall try that.. in my ignorance i thought bottom:0px was refering to
    > the margin.
    >

    sir, you are a star, thankyou. it works perfectly.
    password, Oct 31, 2006
    #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. Kay
    Replies:
    2
    Views:
    7,139
  2. Rabbit
    Replies:
    1
    Views:
    2,746
    Shimon Sim
    Feb 12, 2006
  3. shank

    vertical-align: bottom

    shank, Oct 2, 2003, in forum: HTML
    Replies:
    9
    Views:
    20,902
    brucie
    Oct 3, 2003
  4. Jochen Fuhrmann

    vertical-align and div

    Jochen Fuhrmann, Oct 6, 2003, in forum: HTML
    Replies:
    1
    Views:
    24,440
    Steve Pugh
    Oct 6, 2003
  5. Tobias Müller

    div and vertical align

    Tobias Müller, Nov 25, 2003, in forum: HTML
    Replies:
    2
    Views:
    666
    Steve Pugh
    Nov 25, 2003
Loading...

Share This Page