1

I'm designing a simple 2 column site with a banner across the top and a footer at the bottom.

Live Demo: http://jsfiddle.net/4XYWJ/1/

Have got a navigation column "nav" on the left and a content column "content", but unfortunately, when the end of the navigation column is reached, the content "bends" around it. Hve tried min-height, which works if I set a specific amount of pixels i.e. 570px, but then I need multiple CSS's - also, I can seem to get the fiddle using a repeated image.

The Code for the wrapper, nav and content look as follows:

#wrapper {
        width:90%;
        margin:20px auto;
        border-bottom: 1px dotted black;
    }

.nav {
        float:left;
        width:200px;
        min-height: 100%;
        background-image: url(img/blank.gif);
        background-repeat: repeat-y;
    }


#content {
        width: 100%;
        min-height: 570px;
        text-align: left;
        padding-top: 10px;
        background-color: #f3e8d6; /*Default bg, similar to the background's base color*/
        background-image: url("../img/tree.jpg");
        background-position: right bottom; /*Positioning*/
        background-repeat: no-repeat; /*Prevent showing multiple background images*/
    }

Can someone help with this?

TylerH
  • 20,799
  • 66
  • 75
  • 101
user2604463
  • 19
  • 1
  • if not floatting, then set #content to overflow:hidden without height or width values. I should use the room left aside nav . It has to do with layout, but i do not know the proper name in English.If anyone can improve this tip , would be nice :) – G-Cyrillus Jul 21 '13 at 16:12

2 Answers2

0

Change the nav to be position:absolute; left:0; top:0; and remove the float, and then add padding-left:210px; to the content. Finally add position: relative; to the wrapper.

It's will absolutely position the nav in the top left of the wrapper, and the padding on the content will move the main bits out of the way of the navigation. I haven't checked it fully, but I'm pretty sure that, that will do it.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Rob Sterlini
  • 342
  • 1
  • 5
0

Try reserving that left space with #content{margin-left:200px} and remove the width by default it will try to expand 100%, you can see here and example.

David Lee
  • 811
  • 7
  • 19