css - build simple template html - divs -
I am new to DIV and I want to make a simple template for my website. I need header and 100%, left panel for main 100% divas and bottom menu 200px, right panel Panel I need that if the left panel does not show that the main will be 100% now if it shows that the "main" device under the left panel is 10X
& lt; Div id = "top_menu" & gt; & Lt; / Div & gt; & Lt; Div id = "left_menu" & gt; & Lt; / Div & gt; & Lt; Div id = "main" & gt; & Lt; / Div & gt; & Lt; Div id = "down" & gt; & Lt; / Div & gt; #top_menu {height: 40px; Background color: # 343B43; Width: 100%; Status: fixed; Z-index: 20; } #left_manu {margin-top: 40px; Swim left; Width: 200px; Background: # F4F4F4; Status: fixed; Z-index: 10; } #main {margin-top: 40px; float right; Background: Red; Padding: 30px; Width: 90%; } #bot {height: 30px; Status: fixed; Width: 100%; }
Update your HTML and CSS below.
HTML
& lt; Div id = "top_menu" & gt; & Lt; / Div & gt; & Lt; Div class = "distab" & gt; & Lt; Div id = "left_menu" & gt; & Lt; / Div & gt; & Lt; Div id = "main" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "down" & gt; & Lt; / Div & gt;
CSS
#top_menu {height: 40px; Background color: # 343B43; Width: 100%; Status: fixed; Z-index: 20; } .distab {display: table; Table-layout: Fixed;} # left_menu {margin-top: 40px; Width: 200px; Background: # F4F4F4; Z-index: 10; Exhibit: Table Cell; } #main {margin-top: 40px; Background: Red; Padding: 30px; Width: 100%; Exhibit: Table Cell; Box-Size: Boundary Box; } #bot {height: 30px; Status: fixed; Width: 100%; }
Comments
Post a Comment