Geek Answers Handbook

CSS vertical float technique

Is it possible to have a vertical float that works similar to a horizontal one? In the Html below, I would like the green button to be what it is, and the yellow button to float at the bottom that goes beyond the gray shape.

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

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <table style="margin: 250px; width:50px; height: 100px; background-color: #ccc; table-layout: fixed;">
        <tr>
            <td style="vertical-align:top;">
                <div style="margin-top:-20px; width:50px; height: 40px; background-color: Green;">Top</div>
                <div style="margin-bottom:-20px; width:50px; height: 40px; background-color: Yellow;">Bottom</div>
            </td>
        </tr>
    </table>
</body>
</html>

Update 1 - here is a little closer to the picture of the world of what I'm trying to achieve. I am looking for a vertical single panel, i.e. The distance between her children should be the same. I managed to do this with a horizontal layout, but tied to a vertical implementation.

Html:

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <table style="margin: 250px; width:70px; height: 400px; background-color: #ccc; table-layout: fixed;">
        <tr>
            <td style="vertical-align: middle; background-color: Gray; padding: 5px;">
               <!-- <div style="margin-top:-20px; width:50px; height: 40px; background-color: Green;">1</div>-->
                  <div style="margin: -20px auto auto auto; width:50px; height: 40px; background-color: white;">Top!!!</div>

                <div style="margin: auto auto -20px auto; width:50px; height: 40px; background-color: white;">2</div>
            </td>
        </tr>
         <tr>
            <td style="vertical-align: middle; background-color: Gray; padding: 5px;">
                <div style="margin: auto auto -20px auto; width:50px; height: 40px; background-color: white;">3</div>
            </td>
        </tr>
        <tr>
            <td style="vertical-align: middle; background-color: Gray; padding: 5px;">
                <div style="margin: auto auto -20px auto; width:50px; height: 40px; background-color: white;">4</div>
            </td>
        </tr>
        <tr>
            <td style="vertical-align: middle; background-color: Gray; padding: 5px;">
                <div style="margin: auto auto -20px auto; width:50px; height: 40px; background-color: white;">5</div>
            </td>
        </tr>
    </table>

</body>
</html>
+2
source share
2 answers

, ? , , .

.columns .icon { display: inline-block; width: 80px; height: 80px; background-color: lightblue; margin: 10px }

http://jsfiddle.net/JT3La/

+2

More articles:


All Articles