Fixed navbar and right gallery with fixed size items

Question

This is my first question so, please be gentle.

I am a novice to HTML and CSS and I am trying to achieve something that appears to be outside of my skills.

I have this situation: I need to make a page with left-fixed navigation bar and a right part with a gallery with fixed width items.

I made a fiddle: http://jsfiddle.net/1fbntotr/

<div class="left"> <div class="logo"> </div></div> 

<div class="right">

<div class="item"> </div><div class="item"> </div><div class="item"> </div><div class="item"> </div>
<div class="item"> </div><div class="item"> </div><div class="item"> </div><div class="item"> </div>
<div class="item"> </div><div class="item"> </div><div class="item"> </div><div class="item"> </div>
<div class="item"> </div><div class="item"> </div><div class="item"> </div><div class="item"> </div>
<div class="item"> </div><div class="item"> </div><div class="item"> </div><div class="item"> </div>


</div>

The right part doesn't see the items are ended, so there goes that 'ghost' part in the middle, even though they are using percentages for their width.

I tried anything I found in other discussions but they don't appear to work with my example which has a slightly different layout.

I wonder if there is something basic I'm missing that you might help me with. Thanks for your patience.

When you say 'ghost' part are you referring to the white space between the purple squares and the black navbar? — Craig, Aug 25 '14 at 01:07
Yes - that part. Didn't know how to explain it better. I could fix the color gap with a uniform white but the logo on the left would anyway not be centered. — Parsec 9, Aug 25 '14 at 21:31

score 0 · Answer 1 · answered Aug 25 '14 at 01:42

It's difficult to mix fixed elements with percentages and pixels.

Not only do you need the container .right to be a percentage but you need the contents to have a percentage width too. Unfortunately you still need to declare the hight in px, em or rem.

You might want to take a look at Bootstrap as they handle a lot of issues that can arise from using percentages.

I think this is what you're after: http://jsfiddle.net/2c2e8j86/

.logo {
    margin:0 auto;
    background-color:#97CC66;
    width:110px;
    height:110px;
    margin-top:150px;
}

.left {
    background-color:#000;
    width:19%;
    position:fixed;
    height:1400px;
}

.right { 
    background-color:#FFF;
    width:78.5%;
    margin-left: 19.5%;
}

.item {
    width:25%;
    float:right;
}

.item-inner {
    margin: 0 0 2px 2px;
    background-color:#C7003F;
    height:138px;
}

You need to have the gap between the .items on the inside of the container so add an extra .item-inner div.

Thanks, you confirmed what I suspected. I ended up making a layout very similar to this (just the square keep the 1:1 ratio) and I decided to sacrifice the effect that required me to keep the items fixed size, instead. It would have been good to know how to fix it but I could manage with this layout. Thanks for your confirmation that this wasn't viable. — Parsec 9, Aug 25 '14 at 21:38

Fixed navbar and right gallery with fixed size items

1 Answers1