Stacking Divs in Css

Question

I’m trying to stack the #Direction Div on top of the two other Divs #Ratedpics and #Mainpics. I want them to be centered on each other. Also when the page resizes I want them to move proportionally with the page. Is this possible?

Rated pics and Main pics need to be side by side. Directions need to be centered on top.

div#MainPics
    {
        height: 650px;
        width: 60%;
        -moz-border-radius: 35px;
        border-radius: 35px;
        background-color: Black;
        margin-left: auto;
        margin-right: auto;
    }
    #ratedpic
    {
        position: relative;
        float: left;
        width: 22%;
    }
    div#Direction
    {
        width: 20%;
        margin-left: auto;
        margin-right: auto;
    }



 <div id="Direction">
    <asp:Label ID="Label1" runat="server" Text="Here i want my directions centered on top of main pics" Font-Size="Large"
        Width="270" Font-Bold="True" ForeColor="#1B0358"></asp:Label>

</div>
<div id="ratedpic">
    <p>
        <asp:Label ID="RatedPicnameLabel" runat="server" Text=""></asp:Label>
    </p>
    <asp:ImageButton ID="RatedImage" Width="70%" runat="server" /><br />
    <asp:Label ID="RatedPicRating" runat="server" Text=""></asp:Label><br />
</div>
<div id="MainPics">
    <div id="RightPic">
        <p>
            <asp:Label ID="FirstPicMemberNameLabel" runat="server" Text="" Font-Bold="True" ForeColor="White"></asp:Label>
        </p>
        <asp:ImageButton ID="FirstPicLink" Width="90%" runat="server" />

    </div>
    <div id="LeftPic">
        <p>
            <asp:Label ID="SecondPicMemberNameLabel" runat="server" Text="" ForeColor="White" Font-Bold="True"></asp:Label>
        </p>
        <asp:ImageButton ID="SecondPicLink" Width="90%" runat="server" />

    </div>

</div>

HTml Output

  <div id="Direction">
    <span id="MainContent_Label1" style="display:inline-block;color:#1B0358;font-size:Large;font-weight:bold;width:270px;">Chose the photo you like better.</span>

</div>
<div id="ratedpic">
    <p>
        <span id="MainContent_RatedPicnameLabel">Margaret</span>
    </p>
    <input type="image" name="ctl00$MainContent$RatedImage" id="MainContent_RatedImage" src="Pictures/6f455ca0-27a0-49c3-ab61-e3f19e2e8258.jpg" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$RatedImage&quot;, &quot;&quot;, false, &quot;&quot;, &quot;Member.aspx?UserID=9&quot;, false, false))" style="width:70%;" /><br />
    <span id="MainContent_RatedPicRating">Banged: 52%</span><br />
</div>
<div id="MainPics">
    <div id="RightPic">
        <p>
            <span id="MainContent_FirstPicMemberNameLabel" style="color:White;font-weight:bold;">Jessica-Jean</span>
        </p>
        <input type="image" name="ctl00$MainContent$FirstPicLink" id="MainContent_FirstPicLink" src="Pictures/2b5c7b66-00c4-4948-aa2b-7abef2f556f3.jpg" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$FirstPicLink&quot;, &quot;&quot;, false, &quot;&quot;, &quot;default.aspx?yesId=7&amp;noId=7&quot;, false, false))" style="width:90%;" />

    </div>
    <div id="LeftPic">
        <p>
            <span id="MainContent_SecondPicMemberNameLabel" style="color:White;font-weight:bold;">Amy</span>
        </p>
        <input type="image" name="ctl00$MainContent$SecondPicLink" id="MainContent_SecondPicLink" src="Pictures/ce698138-1dfc-46f8-aab7-fd7a1d5c5f0b.jpg" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$SecondPicLink&quot;, &quot;&quot;, false, &quot;&quot;, &quot;default.aspx?yesId=12&amp;noId=7&quot;, false, false))" style="width:90%;" />

    </div>

</div>

Answer 1

If I understand your question correctly, you'll need an extra wrapper around ratedpic and mainpic: http://jsfiddle.net/rgq4d/

I would also strongly recommend to make your CSS ID's all lowercase, in order to prevent typos.