Advise on site layout

Hi,

Advise needed here please.

My layout is as follows. My actual page is around 800px wide. But rather than it being centered it is aligned to the left, with one small difference. There is an image running all the way up the left side of the page.

Now I want this image running down the left to be around 200-300px wide when the browser has room for this.

But if this doesn't reduce in size then anything under a 1000-1100px wide browser will not show the full page.

So I need the image down the left to reduce in size. Not too sure how to do this so looking for some expert advise from this forum

I hope someone can be so kind to help me

Thanks

 

Stop using fixed px widths and the content will scale down with the browser size? Have a look at responsive design.

 

Use these tools for making the website :
BootStrap : http://twitter.github.io/bootstrap/
Foundation by Zurb : http://foundation.zurb.com/
here you an find lots of frames works so you can use it as base : http://mashable.com/2013/04/26/css-boilerplates-frameworks/

 

You can avoid the bloat of using bootstrap by just using percentages rather than px values in your css. Your math is very simple for this since you have 800px and 200px as your starting widths:

#main{
width:80%;
float:right;
}
#leftColumn{
width:20%;
float:left;
}
#leftColumn img{
width:100%;
}

<div id="main">
<h1>Main content</h1>
<p>Main content here</p>
</div>
<div id="leftColumn">
<img src="long-image.jpg">
</div>

Code (markup):

 

you must be used different div and fixed this div height and weight, just divide the div aware page padding , margin then you must be good result.
Thanks
Good by