I am trying to execute the following layout as shown in the screenshot.
Main functions
- Screen divided into 3 areas (columns);
- Column left / right - fixed width;
- The middle column expands across the width of the browser
- The right column is divided into two areas
- Bottom area - fixed size, always down
- Top area expands in browser height
Using HTML tables took me about 2 hours to generate the above screenshot with the above functions.
After applying CSS for two days, I cannot get it, as shown above, my CSS attempt and the associated screenshot below:
<html> <head> <title>My Layout</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> body{ height:100%; background:beige; } #header { width:100%; height:60px; text-align:center; background:#A7C942; color:#fff; float:left; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size:2em; } #leftDiv { float:left; width:150px; height:90%; background:aquamarine; } #midDiv { float:left; width:auto; height:90%; background:lightsalmon; display:block; } #rightDiv { float:right; width:365px; height:90%; background:green; display:block; } #topRow { background-color:lightgoldenrodyellow; } #bottomRow { background-color:lightpink; height:200px; } </style> </head> <body> <div id="body"> <div id="main"> <div id="header">my header</div> <div id="leftDiv"> <p>LEFT</p> </div> <div id="midDiv"> <p>MIDDLE</p> </div> <div id="rightDiv"> <p>RIGHT</p> <div id="topRow"> TOP </div> <div id="bottomRow"> BOTTOM </div> </div> </div> </div> </body> </html>
Screenshot with CSS: 
CSS attempt issues:
- Medium col does not expand (part of the salmon flower);
- instead, white appears;
- can't get the pink region to stay down below
- It is not possible to stretch the yellow region up and down.
- unwanted packaging (i.e., the right area passes under the left, middle areas)
So I'm going to unleash my solution using tables, if some smart CSS fanatic doesn't come to the rescue with a working answer :-)
Update Excellent answers, during this update was 4. I tried all 4 on Firefox and Chrome, and each answer is acceptable. But I can only select one of them as the accepted answer, and I will go so simple and simple, using only css and absolute positioning (no flexbox or css-tables).
Many thanks @matthewelsom, @Pangloss, @Shrinivas, @Paulie_D; I am sure that anyone who stumbles upon your answers will find it useful to use. Reproaches to all, your efforts are welcome!
source share