Search code examples
htmlalignmentfixedpercentage

Align fixed div tag percentage

I have two <div> tags (one fixed, the other relative, and both floated). I want to align them side by side by percentage

Here is the example

<style>
#mainDiv{
    width:80%;
    margin-left: 10%;
    height: 200px;
}
#fixedDiv{
    float: left;
    width: 30%;
    background-color:red;
    position: fixed;
    height: inherit;
}
#relativeDiv{
    float: right;
    width: 70%;
    background-color:blue;
    position: relative;
    height: inherit;
}
</style>
<div id="mainDiv">
    <div id="fixedDiv">Fixed DIV</div>
    <div id="relativeDiv">Relative DIV</div>
</div>

Also http://jsfiddle.net/v1noqz2g/

Solution

  • just reduce width size in #relativeDiv to width:62%; or adjust it