Google Answers: CSSP div vertical alignment issue

View Question

Q: CSSP div vertical alignment issue ( No Answer, 2 Comments )

Question

Subject: CSSP div vertical alignment issue
Category: Computers > Programming
Asked by: carbon-ga
List Price: $5.00

Posted: 26 Jul 2005 20:56 PDT
Expires: 28 Jul 2005 00:12 PDT
Question ID: 548362

There exists a 'row' div. Inside it are two other divs, one floating
left, the other floating right. I want the divs' bottoms to be
vertically aligned.

The code is here: http://www.rafb.net/paste/results/FEq02K88.html
or, just in case something horrible goes wrong with rafb,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                <title>blah</title>
                <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
                <style type="text/css">
                <!--
                        body {
                        margin: 0;
                        padding: 0;
                        }
 
                        .row {
                        clear: both;
                        }
 
                        .left {
                        border: 1px solid green;
                        float: left;
                        }
 
                        .right {
                        border: 1px solid blue;
                        float: right;
                        }
                -->
                </style>
        </head>
 
        <body>
                <div class="row">
                        <div class="left"> 
                                <div>want this box to come down so its bottom</div>
                                <div>aligns with the bottom of the other one</div>
                        </div>
 
                        <div class="right"> 
                                <div>right now the tops are aligned
vertically</div>
                                <div>left box needs to come down</div>
                                <div>so that their bottoms are aligned
vertically</div>
                                <div>more text</div>
                                <div>more text</div>
                                <div>more text</div>
                        </div>
                </div>
        </body>
</html>

Request for Question Clarification by sublime1-ga on 26 Jul 2005 22:23 PDT

carbon...

Any reason you can't just add line breaks? As in:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                <title>blah</title>
                <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
                <style type="text/css">
                <!--
                        body {
                        margin: 0;
                        padding: 0;
                        }
 
                        .row {
                        clear: both;
                        }
 
                        .left {
                        border: 1px solid green;
                        float: left;
                        }
 
                        .right {
                        border: 1px solid blue;
                        float: right;
                        }
                -->
                </style>
        </head>
 
        <body>
                <div class="row">
                        <div class="left"> 
                                <div>want this box to come down so its bottom</div>
                                <div>aligns with the bottom of the other one</div>
                                <BR>
                                <BR>
                                <BR>
                                <BR>
                        </div>
 
                        <div class="right"> 
                                <div>right now the tops are aligned
vertically</div>
                                <div>left box needs to come down</div>
                                <div>so that their bottoms are aligned
vertically</div>
                                <div>more text</div>
                                <div>more text</div>
                                <div>more text</div>
                        </div>
                </div>
        </body>
</html>


sublime1-ga

Clarification of Question by carbon-ga on 26 Jul 2005 23:02 PDT

Yes, I certainly can't just add lines. These are theoretical divs of
unknown height. Using CSS, it might be possible to make their bottoms
align no matter how many lines they may have. Another way of thinking
of it is that the browser needs to figure out automatically what top
margin the shorter box should have.

Answer

There is no answer at this time.

Comments

Subject: Re: CSSP div vertical alignment issue
From: willcodeforfood-ga on 27 Jul 2005 15:16 PDT

You could put your DIVs inside a TABLE unless you are a TABLE hater
like some style purists.  This works in IE, just replace the inner
contents of your main "row" DIV with:

<table cellspacing="0" cellpadding="0" border="0" width="100%">
  <tr>

    <td valign="bottom">
       <div class="left"> 
       <div>want this box to come down so its bottom</div>
       <div>aligns with the bottom of the other one</div>
       </div>

    </td>
 
    <td valign="bottom">
       <div class="right"> 
       <div>right now the tops are aligned vertically</div>
       <div>left box needs to come down</div>
       <div>so that their bottoms are aligned vertically</div>
       <div>more text</div>
       <div>more text</div>
       <div>more text</div>
       </div>
    </td>

  </tr>
</table>

Subject: Re: CSSP div vertical alignment issue
From: carbon-ga on 27 Jul 2005 15:50 PDT

Thanks for writing, but I'm a registered table hater. I'm trying not
to use any unless absolutely necessary. Vertical alignment seems to be
a weak spot in CSS.

Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you.

Search Google Answers for

Google Home - Answers FAQ - Terms of Service - Privacy Policy