new to css- how to strech the whole layout when a very wide image is loaded.

Hello!

I am just starting off with web design, so please excuse me if I am wasting your time with some elementary stuff.
I got this task to create a 2-column layout with header and footer and right navigation. It should basically look like this

http://i.data.bg/06/07/21/35293_orig.jpg

(the lighter blue being the content section)
My problem is that when a very wide image is displayed in the content(e.g. width="2000") the whole layout has to strech. And this is how mine looks

http://proba45.free.bg/HTMLPage.htm

while it should look like in the initial state.

Could anyone please help?

Kindest regards,
Valentin

That is one big picture. you could try overflow:auto; on the div holding the image which will add a horizontal scrollbar.

I know it might work like this, but my task is to manage the layout without the overflow styling.
do you have any other suggestions how this might be done?
thanks for the help,
Valentin

btw, I tried as you suggested and navigation is positioned under the image. If i fix this with the z-index, it hasn't changed its position and it covers a part of the image.

Not the answer you're looking for but, why not reduce the size of the image?
It's very irritating for users who don't have auto-re-sizing activated and they may leave the site in frustration (I do).
If it's already the right size for their convenience it has two advantages;
1) keeps them happy and encouraged to delve further into the site,
2) (if you reduce the size before placing it on the page) it reduces the file size of the image which means they don't have as long to hang around waitig for it to download.

I couldn't agree with you more, but the problem is that I am applaying for a job now and the guys from the company want it that way. I guess it's not about functionality or neatness but rather to test me because that's an unordinary layout.

Thanks anyways,
Valentin

In that case, good luck with the job.
Once you get started you can show you know how to do it properly and take over the company.

I don't fully understand the issue here. Are you wanting the image to resize in order to be fully visible at any browser size? Or can only part of the image be visible until the browser width increases?

If doing the latter, you can just make the image a no-repeat background on a div element and set it at 50% horizontal position. As the browser size increases and decreases the image will remain centered and reveal or hide more of it as needed.

I shouldn't resize the image. I think I figured it out (at least this part). You can see what I mean here- at least this is now working, but I have other problems now, unfortunately :-((