CSS div shifting elements down

I am working on my portfolio and I am having an issue with the project description shifting the images on the left downward when the browser resize. A picture of the issue here: click here When you resize the browser the text will shift over and move the images down. I've tried setting min-width but that doesn't help the text nor the image div to make sure it doesn't resize at a certain point.

Here is a sample link to the page itself: [click here开发者_运维问答][2]

I tried adding min-widths to a image element but that doesn't work either. I do not want to use absolute position as it will overlap on top on resize. Any thoughts or suggestions?

You have an image that is 1052px wide, which is in a UL element that has a margin-left of 1.5em. Your description box is 350px. Basically your #imagewrapper div needs to be equal to or wider than all of these elements.

Right now that's about 1422px. It will change if the effective font size for your UL.imagewrap-pad changes.

That's a pretty wide web site. You probably should make it a bit narrower if you're making it for general viewing, especially with all the tablets etc out there now.

Anyway, the code you want is

#imagewrapper
{
  width:1422px;
  margin:0 auto;
}

The second line makes it center on the screen.

P.S - get Firebug for Firefox, or use similar tools in chrome. They let you endlessly experiment with styles to find out what works for you.

To solve the problem just set the "width" property in #imagewrapper :

#imagewrapper {
    width: 1430px;
}

Have You tried setting up width attr on the parent element to around 1800px?

div#imagewrapper { width:1800px; }

It will put a scroll bar at the bottom of Your browser, but if You want to put such a big image beside that text then You do need a lot of space. Just keep in mind that it won't fit in users monitors. To make it look nice I guess You should apply that attribute to the body tag.