content expand on overflow

I'm somewhat of a designer but i kind of suck at css, and cannot seem to get the site to expand right when开发者_如何学Python the content changes. I hope you guys can help...

css: http://pastebin.com/CasrrGe9

html: http://pastebin.com/WN8XhAHd

I revised the html with the absolute path to the images

You seriously need to refactor all your CSS.

It seems to me that you're using Photoshop or a design tool like this to design/cut and automatically generate html/css.

If those did a correct code, a lot of people would lose their job...

That said, I may be wrong, you did this yourself. And then, you need to learn not to code like a design tool ;)

In your case, you're designing in absolute position and fixed width and height.

It means that every element on your page is positioned once and for all, that if the content in your element is wider than its container, it will expand but won't influence any other absolute positioned element.

Now, you can't ask someone to refactor all your CSS here. You should start to learn it and then ask specific question here if needed.

You can train here.

I would just recommend little things like changing all those id's of index-## to have the positioned declared once

#index-01,#index-02,#index-03,#index-04{
position:absolute;
}

Clean it all up then start worrying about other things, as otherwise you are going to be in a real mess in about an hour or so.

you shouldn't be positioning them at all though

You should declare one class that is in control of all the divs and that is floating left:

.float_left {float:left;}
.clear_both {clear:both}

And apply that to each of the divs you want to use then at the end clear the float

<div class="float_left"><img src="index-1.jpg" /></div>
<div class="float_left"><img src="index-2.jpg" /></div>
<div class="float_left"><img src="index-3.jpg" /></div>
<div class="clear_both"></div>

Then the divs should expand automatically :)

You can slice anything from Photoshop or other tools, but don't do like this. Slice important part only.

I recode back your site. I used only two images. Look at http://jsbin.com/esijo5/edit

Happy new year ;)