Geek asks and answers

Creating a mixed pixel / percentage layout with divs

I am trying to make a page layout, as seen in the attached figure. The problem is that I cannot get it to work properly. I spent half a day trying to get it to work, but to no avail. I just want to have a fixed div width for the menu and next to these two divs, creating columns, each of which occupies half the remaining width of the page. Heights should all be content dependent.

Does anyone have an idea? I could find a lot of information about such mixed perecentage / pixel layouts, but I can't imagine how complicated it is.

Picture: enter image description here

+5
source share
2 answers

Something like that:

<style type="text/css">
.container
{
  padding-left: 160px;
  position: relative;
}
.leftmenu
{
  width: 160px;
  height: 200px;
  background: red; /* For demo purposes */
  position: absolute;
  top: 0;
  left: 0;
}
.width50
{
  width: 50%;
  float: left;
}
.left-content
{
  height: 300px;
  background: green /* For demo purposes */
}
.right-content
{
  height: 150px;
  background: blue   /* For demo purposes */
}
.clear
{
  clear: both;
}
</style>
<div class="container">
  <div class="leftmenu"></div>
  <div class="content">
    <div class="width50 left-content"></div>
    <div class="width50 right-content"></div>
    <div class="clear"></div>
  </div>
</div>

This is only the inner container (no header or footer)

+2

javascript.

. .

. , !

script, , .

<script type="text/javascript">
wscreen = window.innerWidth; //Determine screen resolution
content_width = (wscreen - 160); //Adjusting the screen
document.getElementById("container").style.width = content_width + "px"; // Adding the width to CSS
</script>

CSS-.

!!!

0

More articles:


All Articles