bottom_align of float:left elements

Discussion in 'HTML' started by Oliver Spiesshofer, Mar 7, 2005.

  1. Hi,

    I have several <div> </div> elements that are float:left.
    they consist of an image and a text below it. The images however are all
    different size, specifically height.

    I have assigned a static height and width for all the elements, 100x100px.
    However,I want to have the text below the pictures all in one line.

    So how do I assign the vertical alignment? I tried within the divs and also
    wrap them into an aditional div with that feature, but it wont help.

    I dont really know how to go on. To see an example of the problem, please
    visit http://tokyoahead.com/main/staticpages/index.php/topicoverview/

    thank you

    Oliver
    Oliver Spiesshofer, Mar 7, 2005
    #1
    1. Advertising

  2. in alt.html, Oliver Spiesshofer wrote:
    > Hi,
    >
    > I have several <div> </div> elements that are float:left.
    > they consist of an image and a text below it. The images however are all
    > different size, specifically height.
    >
    > I have assigned a static height and width for all the elements, 100x100px.
    > However,I want to have the text below the pictures all in one line.
    >
    > So how do I assign the vertical alignment? I tried within the divs and also
    > wrap them into an aditional div with that feature, but it wont help.
    >
    > I dont really know how to go on. To see an example of the problem, please
    > visit http://tokyoahead.com/main/staticpages/index.php/topicoverview/


    A snipped from my old example (that is not very pretty, just proof of
    consept with hacks):

    http://www.student.oulu.fi/~laurirai/www/css/gallery/
    <div>
    <div class="box" style="width:218px;height:auto;">
    <div style="width:218px;height:168px">
    <a href="slides/Coordinators.html" class="thumbimage">
    <img class="thumbimage" alt="Coordinators"
    src="/~egea/Photo_Gallery/Virpiniemi/thumbs/Coordinators.JPG" width="112"
    height="150"></a>
    </div>
    <div class="thumbcomment">
    Coordinators
    </div>
    </div>

    To get one line, you need to use white-space:nowpap, or make sure it fits
    (latter works better, or make room for 2 lines, which is not bad idea
    in your case.).




    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Utrecht, NL.
    Lauri Raittila, Mar 7, 2005
    #2
    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. bd
    Replies:
    0
    Views:
    615
  2. =?iso-8859-1?q?Jean-Fran=E7ois_Michaud?=

    Help on table align on left of page vs left hanging indent

    =?iso-8859-1?q?Jean-Fran=E7ois_Michaud?=, Jul 10, 2007, in forum: XML
    Replies:
    2
    Views:
    998
    =?iso-8859-1?q?Jean-Fran=E7ois_Michaud?=
    Jul 16, 2007
  3. Carsten Fuchs
    Replies:
    45
    Views:
    1,526
    James Kanze
    Oct 8, 2009
  4. pc
    Replies:
    2
    Views:
    1,307
    crisgoogle
    Jun 8, 2011
  5. Replies:
    1
    Views:
    115
Loading...

Share This Page