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

Popular posts from this blog

java - org.apache.http.ProtocolException: Target host is not specified -

java - Gradle dependencies: compile project by relative path -

ruby on rails - Object doesn't support #inspect when used with .include -