CODEWITHSUNDEEP
htmlcss
ScottG
ScottG

Reputation: 11121

How can I horizontally align these divs in these boxes?

This should be simple, but I can't figure it out. Below is my code sample. I want the top two divs in each box to align to the top, and the bottom two divs in each box to align to the bottom. Basically so the tops and bottoms align in each row. Sometimes I have extra long content in the second div. Here is my jsfiddle http://jsfiddle.net/APJX8/2/

<table style="width:100%;">
    <tr>
        <td style="width: 25%;">
            <div class="box" style="height:200px;">
                <div>top</div>
                <div>this is an extra extra extra long line that wraps</div>
                <div>right above bottom</div>
                <div>bottom</div>
            </div>
        </td>
        <td style="width: 25%;">
            <div class="box" style="height:200px;">
                <div>top</div>
                <div>right underneath</div>
                <div>right above bottom</div>
                <div>bottom</div>
            </div>
        </td>
        <td style="width: 25%;">
            <div class="box" style="height:200px;">
                <div>top</div>
                <div>right underneath</div>
                <div>right above bottom</div>
                <div>bottom</div>
            </div>
        </td>
        <td style="width: 25%;">
            <div class="box" style="height:200px;">
                <div>top</div>
                <div>right underneath</div>
                <div>right above bottom</div>
                <div>bottom</div>
            </div>
        </td>
    </tr>
</table>

Upvotes: 0

Views: 108

Answers (2)

Praveen
Praveen

Reputation: 39

this may help you, u can change the style format to suit your needs... :)

    <table style="width:100%;">
    <tr>
        <td style="width: 25%;">
                <div class="box" style="height:200px; vertical-align:top;">
                    <div style="float:left; width: 100%;">top</div>
                    <div style="float:left;  width: 100%;">this is an extra extra extra long line that wraps</div>
                </div>
                <div style="vertical-align:bottom;">
                    <div style="float:left;  width: 100%;">right above bottom</div>
                    <div style="float:left;  width: 100%;">bottom</div>
                </div>

        </td>
        <td style="width: 25%;">
                <div class="box" style="height:200px; vertical-align:top;">
                     <div>top</div>
                     <div>right underneath</div>
                </div>
                <div style="vertical-align:bottom;">
                    <div>right above bottom</div>
                    <div>bottom</div>
                </div>
        </td>
        <td style="width: 25%;">
            <div class="box" style="height:200px; vertical-align:top;">
                     <div>top</div>
                     <div>right underneath</div>
                </div>
                <div style="vertical-align:bottom;">
                    <div>right above bottom</div>
                    <div>bottom</div>
                </div>
        </td>
        <td style="width: 25%;">
            <div class="box" style="height:200px; vertical-align:top;">
                     <div>top</div>
                     <div>right underneath</div>
                </div>
                <div style="vertical-align:bottom;">
                    <div>right above bottom</div>
                    <div>bottom</div>
                </div>
        </td>
    </tr>
</table>

Upvotes: 1

brouxhaha
brouxhaha

Reputation: 4093

I don't think it's possible without changing the html at least a little bit.

From what I can tell, you have two options: 1. add another div around the first two divs and another around the bottom two divs. Set the second one to position: absolute; bottom: 0, and the first one to position: absolute; top: 0;. Set .box to position: relative;. Absolute positioning will require set height on .box to prevent the absolute divs from colliding if the text is too long.

or 2. change to using two divs for the rows and use four boxes in each with the respective divs in the top and bottom rows. You won't need to worry about absolute positioning for this method and it'll be a ton cleaner.

Upvotes: 1

Related Questions