Question: Is it possible to work only on css, to set a dynamic height of the div to a proportion of full screen? 

Would like to have something like the following example

```
.my_div {
    width:100%;
    height:90%;
}

```

Answer: 
<http://jsfiddle.net/xVXPk/15/>

Try this. ( always do float:right, float:left, center, clear:both ) -- note close your image tags.

```
<div id="header">
        <div class="user-header">
             <label class="user"></label>
              <a class="" href="#">Logout</a>
        </div>
        <div class="logo">
             <a href="index.php"><img src="#"/></a>
        </div>
        <div class="company-header">
            <a title="title" href="index.php"><b>Hello</b></a>
        </div>
        <div style="clear:both; height:1px; width:99%" ></div>
    </div>

#header {
    width: 600px;
    background-color: #585D63;
    padding: 15px 0px;
}

#header .logo {
    float: left;
    margin-left: 30px;
}

#header .logo img {
    height: auto;
}

#header .company-header {
    font-size: 150%;
    letter-spacing: 1px;
    text-align: center;
    width: 200px; 
    margin: 0 auto;
}

#header .user-header {
    float: right;
    margin-right: 30px;
}

#header .user-header a {
    max-width: 120px;
    height: auto;
}

```

duplicate of this post:

[How to align 3 divs (left/center/right) inside another div?](https://stackoverflow.com/questions/2603700/how-to-align-3-divs-left-center-right-inside-another-div)

To explain, as far as I understand the issue, when the browser draws the page, it will render the center content, first as it process the page in logical order. then apply the floats this is why the right hangs. But by adding the floats first the browser will know before rendering the center to float the content to the right, because it goes , left center right in the first case, and in the second right left center. If that makes sense. Sort of order of processing operations.
You simply haven't done the math right. There is not enough space for the `div class="user-header"` to be positioned on the RH-side. See the [**JSFiddle with borders**](http://jsfiddle.net/xVXPk/9/). 

**EDIT**: and you need to float:left the `div class="company-header"` as well: [**live demo**](http://jsbin.com/yibid/1/edit?html,output). 

Used code: 

```
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Live demo</title>
<style>
div {
    border: 1px solid black;    /* added */
}
#header {
    width: 600px;
    height: 60px;               /* added */
    background-color: #585D63;
    padding: 15px 0px;
}
#header .logo {
    float: left;
    width: 33%;
    max-width: 180px;
    padding: 5px 30px;
}
#header .logo img {
    max-width: 120px;
    height: auto;
}
#header .company-header {
    font-size: 150%;
    letter-spacing: 1px;
    margin: 0 auto;
    width: 33%;
    text-align: center;
    float: left;                /* added */
}
#header .user-header {
    float: right;
    w/idth: 33%;                /* de-activated */
    max-width: 180px;
    padding: 5px 30px;
}
#header .user-header a {
    max-width: 120px;
    height: auto;
}
  </style>
</head>
<body>
    <div id="header">
        <div class="logo">
            <a href="index.php"><img src="#"></a>
        </div>
        <div class="company-header">
            <a title="title" href="index.php">
                <b>Hello</b>
            </a>
        </div>
        <div class="user-header">
            <label class="user"></label>
            <a class="" href="#">Logout</a>
        </div>
    </div>
</body>
</html>

```