position: fixed inside a div not taking proper width in CSS layout

Question

I'm trying to creating a two-column layout for my website that consists of having fixed divs within one of the columns. Below is an overview, an image and my code. Any help on this will be greatly appreciated.

Overview:

I have two elements that are both 100% in height. The .user-nav nav element and the .container div element.
The .user-nav element has fixed positioning, a width of 75px and a height of 100%. The .container div has 100% of width, 100% of height and -75px margin-left (to account for the .user-nav width).
Inside of the .container div, there are two more div elements: the .viewport div and the .right_panel div. (FYI: I wrapped the .container element around these 2 divs because all the content inside the .container div is loaded dynamically with jQuery/Ajax.)
The .right_panel div is fixed positioned and has a width of 30% and a height of 100%.
The .viewport div has a width of 70%. The .viewport div contains another 3 divs, the .header div, the .content div and the .footer div. All three of those divs should be 100% of the .viewport div.
Both the .header and .footer divs inside the .viewport div are fixed and have a height of 50px. The .header div has a top: 0px applied (to stick to the top) and the .footer div has a bottom: 0px property (to stick to the bottom).
The .content div and its contents should be the only thing that scrolls on the page.

Issue:

The .viewport div seems to run longer than 70% and goes under the .right_panel div. I know that once you give a div position: fixed, its parent becomes the body. I believe that is where the issue lies.

How can I put a fixed position div inside of another div? Are there any other alternatives in creating a layout like this? What other approach should I take? Any suggestions would be helpful.

JSFiddle:** http://jsfiddle.net/mikerodriguez/709rcw8a/1/

Image of layout:

Asker result

CSS

html{height: 100%;}
body{
    margin: 0px;
    height: 100%
}
.user-nav{
    width: 75px;
    height: 100%;
    position: fixed;
    background: #000;
    z-index: 1000;
}
.container{
    width: 100%;
    height: 100%;
    margin-left: 75px;
}
.viewport{
    width: 70%;
    background: #eee;
}
.header{
    height: 50px;
    background: #CCC;
    position:fixed;
    width: 70%;
}
.content{
    padding-top: 50px;
}
.content p{
    margin: 0px 0px 50px 0px;
}
.footer{
    height: 50px;
    position: fixed;
    background: #CCC;
    bottom: 0px;
    width: 70%;
}
.right_panel{
    position: fixed;
    top: 0px;
    right: 0px;
    width: 30%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    color:#FFF;
}

HTML

<nav class="user-nav"></nav>

<div class="container">
    
    <div class="viewport">
        
        <div class="header">Header</div><!-- end .header -->
        
        <div class="content">
            LOTS OF CONTENT
        </div><!-- end .content -->
        
        <div class="footer">Footer</div><!-- end .footer -->
        
    </div><!-- end .viewport -->
    
    <div class="right_panel">fixed right panel</div><!-- end .right_panel -->
    
</div><!-- end .container -->

Again, any help on this would be greatly appreciated. Thanks.

You can not have .right_panel width:30% as you have already set margin-left: 75px; on .container . So you should now set width of right_panel to 70% - 75px + x = 100; . Have a look at jsfiddle.net/Dipak1991/709rcw8a/2 — Deepak Ingole
– Deepak Ingole, Commented Aug 12, 2014 at 6:36
Thank you, but in the fiddle example you provided there is a gap between the .viewport div and the .right_panel div. I'm trying to make sure everything is "stuck together" and responsive. Are there any other ways to accomplish this? — iammikerodriguez
– iammikerodriguez, Commented Aug 12, 2014 at 6:43

t-jam · Accepted Answer · 2014-08-12 06:53:13Z

1

You could try using percentages for all columns adding up to 100%, but if you want a fixed width column with two percentages like this, you'll need the 70% column to sit under the fixed width left column. Adjust with padding and use box-sizing: border-box on your layout elements to prevent this adding to the total width of the element.

See example here: http://jsfiddle.net/709rcw8a/4/

edited Aug 12, 2014 at 6:53

answered Aug 12, 2014 at 6:45

t-jam

7991 gold badge6 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

iammikerodriguez Over a year ago

Thank you. I am using 'box-sizing: border-box' on my actual website but for some reason, it's not working. You fiddle example looks perfect but I can't seem to replicate it on my actual site theme. I'll do some more debugging.

Chris Spittles · Accepted Answer · 2014-08-12 07:08:27Z

1

The Issue:

You are mixing percentage and fixed widths. The reason why .right_panel overlaps is because your total percentage is more than 100%:

30% + 70% = 100% + 75px;

You need to use a percentage for the .user-nav as shown in this fiddle:

Fix 1: Percentage Only

html{height: 100%;}
body{
    margin: 0px;
    height: 100%
}
.user-nav{
    width: 10%;
    height: 100%;
    position: fixed;
    background: #000;
    z-index: 1000;
}
.container{
    width: 100%;
    height: 100%;
    margin-left: 10%;
}
.viewport{
    width: 60%;
    background: #eee;
}
.header{
    height: 50px;
    background: #CCC;
    position:fixed;
    width: 60%;
}
.content{
    padding-top: 50px;
}
.content p{
    margin: 0px 0px 50px 0px;
}
.footer{
    height: 50px;
    position: fixed;
    background: #CCC;
    bottom: 0px;
    width: 60%;
}
.right_panel{
    position: fixed;
    top: 0px;
    right: 0px;
    width: 30%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    color:#FFF;
}

Fix 2: Calc

Depending on your browser compatibility you could use calc instead:

width: calc(70% - 75px);

That will remove the 75px from the 70% width.

Example 3: Positions Only

In the example above the page uses positions only which you can use to mix percentage and fixed widths but implicitly setting each positioned elements right and left and top and bottom values:

html{height: 100%;}
body{
    margin: 0;
    height: 100%
}
.user-nav{
    width: 75px;
    height: 100%;
    position: fixed;
    background: #000;
    z-index: 1000;
}
.viewport{
    background: #eee;
}
.header{
    height: 50px;
    background: #CCC;
    position:fixed;
    left: 75px;
    right: 30%;
    z-index: 1;
}
.content {
    position: absolute;
    top: 50px;
    left: 75px;
    right: 30%;
    bottom: 50px;
}
.footer{
    height: 50px;
    position: fixed;
    background: #CCC;
    bottom: 0px;
    left: 75px;
    right: 30%;
    z-index: 1;
}
.right_panel{
    position: fixed;
    top: 0;
    right: 0;
    width: 30%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    color:#FFF;
}

edited Aug 12, 2014 at 7:08

answered Aug 12, 2014 at 6:44

Chris Spittles

15.4k10 gold badges66 silver badges91 bronze badges

6 Comments

NoobEditor Over a year ago

calc is still not cross browser! :)

Chris Spittles Over a year ago

That's why I said "depending on your browser compatibility" and added it as an alternative.

iammikerodriguez Over a year ago

Thanks. The exampple you provided looks good but the .user-nav element has to be a fixed width of 75px. It looks best if its that size. I also noticed that you example has horizontal scrolling. How can I fix that issue? adding a overflow: hidden to the body is not ideal.

iammikerodriguez Over a year ago

the calc example is perfect, but unfortunately it isn't cross-browser. Is there a jQuery work around i can implement?

Chris Spittles Over a year ago

The horizontal scrolling is a mistake on my part: .container needs 90% width instead of 100%.

|

amol · Accepted Answer · 2014-08-12 06:49:47Z

0

Try this

.container {
  width: calc(100% - 75px);
  height: 100%;
  margin-left: 75px;
}

answered Aug 12, 2014 at 6:49

amol

1,5559 silver badges10 bronze badges

1 Comment

iammikerodriguez Over a year ago

Calc would work but it isn't cross browser compatible. Is there another way of implementing this? jQuery maybe?

Collectives™ on Stack Overflow

position: fixed inside a div not taking proper width in CSS layout

3 Answers 3

1 Comment

The Issue:

Fix 1: Percentage Only

Fix 2: Calc

Example 3: Positions Only

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

The Issue:

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related