Question

Create html code which divided into three equal independent division horizontally. The middle section is further divided into two vertical sections. Each section display file Top, left, right, bottom.

Answer 1

Answer:

First, width: available is not valid property. if you want to use all available space you should set width: 100%. anyway, for solving your issue you should use height: 100% also for body and html. see this example:

body, html { width: 100%; height: 100%; margin: 0; } .container { width: 100%; height: 100%; } .leftpane { width: 25%; height: 100%; float: left; background-color: rosybrown; border-collapse: collapse; } .middlepane { width: 50%; height: 100%; float: left; background-color: royalblue; border-collapse: collapse; } .rightpane { width: 25%; height: 100%; position: relative; float: right; background-color: yellow; border-collapse: collapse; } .toppane { width: 100%; height: 100px; border-collapse: collapse; background-color: #4da6ff; }<div class="container"> <div class="toppane">Test Page</div> <div class="leftpane"> <h1>Test Page</h1></div> <div class="middlepane">Test Page</div> <div class="rightpane"> <h1>Test Page</h1></div> </div>

Note:

1. I removed all min-width and min-height you don't need these in this case.

2. use height: 100% for your elements also you should set this on body and html tags.

3. left pane should be float: left with width: 25%, right pane float: right width: 25% and middle pane float: left or float: right with width: 50%