All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

Float boxes vertical alignment

  • # November 18, 2008 at 9:04 am

    Hello everyone!!!!

    I have a piece of code like this:

    <div id="rispostasingola">
    <div id="testorisposta"><p align="left"><? echo $terza_risposta ?></p>
    <div id="verofalso">
    <li><input type="radio" name="risposta3" value="0" class="styled" checked="checked"/></li>
    <li><input type="radio" name="risposta3" value="1" class="styled" /></li>

    and his relative CSS:

    #rispostasingola {
    height: 100%;
    border: 1px solid black;

    #testorisposta {
    float: left;
    /*height: 100%;*/
    width: 78%;
    /*border: 1px solid #EFEFF7;*/
    border: 1px solid red;

    #verofalso {
    float: right;
    margin-left: 640px;
    height: 20px;
    border: 1px solid green;

    #verofalso ol
    margin: 0;
    padding: 0;
    width: 110px;
    list-style: none;

    #verofalso li
    float: left;
    display: inline;
    margin-left: 12px;
    margin-right: 15px;
    padding-left: 2px;
    padding-right: 4px;
    text-align: bottom;

    and I want as result those floated boxes aligned on top so when the "answer" is like more longer at least the radio buttons remains aligned to the start of the "answer" but I get as result as in the attached image…
    Anyone has a suggest for a solution?

    Thanks a lot to everyone

    # November 18, 2008 at 9:26 am


    the margin-left css property wasn’t really adapt for it so I substituted it with a fixed width: 40px and it went to top.

    If the solution helps someone…..

    Thanks anyway to all

    # November 18, 2008 at 5:00 pm

    This reply has been reported for inappropriate content.

    Gotta love it when writing out the question helps solve the answer! =)

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed