Question

example here

I have some navigation on the left side of the screen so i set the body width to 100%.

the navigation width is 60px. the extra div i want to go from 60px from the left side to the end of the right side of the screen.

my problem is that it always comes out to the same width of the body plus 60px and i have an x-scroll on the bottom of the screen.

//this is on left side with width 60px

left:0;
position:fixed;
width:60px;
height:100%;

//this is between the navigation and right side of screen but should take up the entire width.

background:black;
width:100%;
height:100px;
margin-left:60px;

How can i display something on the left side of the screen that is 60px wide and then have a div that connects that to the right side of the screen without overextending with?

Answer 1

It seems you need a fixed-fluid layout which has been extensively documented. The fixed part should be 60px in width and the fluid part should take the rest of the width. Take a look at the dynamic drive for some inspiration.