Need google type layout css - asp.net

Question

I have following aspx page called search.aspx:
<div id="wrap">
<div id="menu">
<div id="t_menus" runat="server">
<div id="left">
<div class="Menu_Top">
</div>
<div id="a">
</div>
<div class="MenuBtm">
</div>
</div>
<div id="bottom_menu">
<div class="MenuTop">
</div>
<div id="bottommenu">
</div>
<div class="MenuBtm">
</div>
</div>
</div>
</div>
<div id="column_two">
<div id="right_top" class="right_top">
<asp:Panel ID="SrchPanel" runat="server" EnableViewState="False" Wrap="False">
<div id="logo">
<asp:ImageButton ID="logo" runat="server" ImageUrl="/images/l.gif" />
</div>
<div id="SrchDivMid">
<asp:textbox id="txtS" runat="server" MaxLength="50" value="Search"></asp:textbox>
<asp:button id="btnFind" runat="server" Text="Find" />
</div>
<div id="returnInfocenter">
<asp:HyperLink ID="return" runat="server" Text="Return"></asp:HyperLink>
</div>
</asp:Panel>
</div>
</div>
<div class="contentCont">
<div id="content">
<iframe id="iFrame" name="iframe" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" src=""></iframe>
</div>
</div>
</div>
What it does is create simple google type layout like this image using css:
I want this to show like this... when user clicks on menu it loads up iframe with data. I want the css logo searchbox and return button come up and dotted line removed like this image:
I am trying few different things but its not working out. Can anyone please just guide me what approch should i take to achieve the result?

Answer 1

It will be tricky when user click on menu item, page layout change from style 1 to style 2 mentioned in photos.
Initially You need three main div elements
<div style="float:right;width:70%">Search Section</div>
<div style="float:left;width:28%">menu section</div>
<div style="clear:both"></div>
When menu item clicked all you need to transform div structure like this
<div style="width:100%">Search Section</div><!-- goes to top !>
<div style="float:left; width:28%">menu section</div>
<div style="float:right; width:70%;>iframe result section</div>
<div style="clear:both"></div>
Similar Shifting Require In Between Search Section e.g in start div structure look like
<div style="width:100%; padding:10px 0px; text-align:center;">Logo</div>
<div style="width:100%; padding:2px 0px; text-align:center;">Search Box</div>
<div style="width:100%; padding:2px 0px; text-align:center;">Search Links</div>
When menu clicked, shift style of these divs like
<div style="float:left;padding-left:10px; width:25%;">Logo</div>
<div style="float:left;padding-left:10px; width:50%;">Search Box</div>
<div style="float:left; width:20%;>Links</div>
<div style="clear:both;"></div>
You can create classes and when menu item clicked, replace one class with another to shift style of page layout.
Its general concept, rest require step by step tuning.