CODEWITHSUNDEEP
csshtmlcss-positionhtml-table
Raheel Khan
Raheel Khan

Reputation: 14787

Placement issue with nested Div tags

I have the following Div hierarchy:

<div id="DivTop">
    <div id="DivTopLeft" style="float: left; width: 45%; padding: 10px 10px 10px 10px;">
        Top left content.
    </div>
    <div id="DivTopRight" style="float: right; width: 45%; padding: 10px 10px 10px 10px;">
        Top right content.
    </div>
</div>
<div id="DivBottom" style="float: none;">
    <div id="DivBottomFinePrint" style="float: none; font-size: 8px; text-align: right;">
        Fine print content. This content appears between the `DivTopLeft` and `DivTopRight` divs.
    </div>
    <div id="DivBottomGridView">
        <asp:GridView ...>
    <div>
</div>

The content of DivBottomFinePrint appears between the DivTopLeft and DivTopRight divs. Also, DivTop and DivBottom seem to have the same Y coordinate whereas I want DivBottom to start vertically after DivTop finishes. I can specify the top margin for DivBottom but that requires hard-coding a value which I do not want to do.

Is there a way around this without using tables?

Upvotes: 1

Views: 59

Answers (1)

Drixson Ose&#241;a
Drixson Ose&#241;a

Reputation: 3641

You should add this style in your container:

#DivTop{
  clear:both;
}

float the elements, left or to the right, which creates an empty space on the other side which allows other elements to take up the remaining space.

Upvotes: 1

Related Questions