Knowledge Walls
Venkatesan
Hyderabad, Andhra Pradesh, India
Passcode:
Create mixed layout with percentage and pixels by Div's
2580 Views
About Layout 
Layout contains

Two divisions
   First division is 200px and it is fixed.
   Second division is *% except of 200px left.

If parent div is position: relative then child position: absolute will take the position with in the parent div itself.
so  second div left start at 200px;
HTML
<div id="main_layout">
   <div class="menu_layout">Menu</div>
   <div class="content_layout">Content</div>
</div>
CSS
#main_layout {
   width: 100%;
   height: 100%;
   display: block;
   background-color: yellow;
   position: relative;
}

body {
   padding: 0px;
   margin: 0px;
   outline: none;
}

div#main_layout div {
   float: left;
}

div#main_layout .menu_layout {
   background-color: red;
   width: 200px;
   height: 100%;
}

div#main_layout .content_layout {
   background-color: green;
   position: absolute;
   left: 200px;
   right: 0px;
   bottom: 0px;
   top: 0px;
}
Demo 
Best Lessons of "WEB UI Tips and Tricks"
Top lessons which are viewed more times.
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details