Overflow: hidden problem

I’m stuck again, my images overflows from my container?

My Site

[CODE]#featured {
display: inline-block;
list-style: none;
margin: 0 auto;
padding: 0;
width: 1440px;
float: left;
}
#featured li {
display: inline-block;
width: 460px;
overflow: hidden;
float: left;

}[/CODE]

My Site

Throw a border on #featured. Your element is wider than the rest of the page. Images aren’t overflowing.

You should consider not throwing fixed widths on those. Perhpas unfloat #featured, eh just make the following changes

#featured {
display: table;
}

On the LIs inside of #featured, make them display:table-cell.

Then for the images inside of those, make them max-width:100%.

#featuerd li img{max-width:100%;}

Good at more screen sizes :slight_smile: .

Every other aspect of your page isn’t responsive (bad!) but it’s a start since everything will need to be made responsive.

Thanks again for helping Ryan, I already followed your codes.

Could you possibly explain this to me? They’re both the same image size: 1440px and the top one didn’t break.

Still, I don’t get it…

My Site

The other images aren’t having this issue because you have overflow:hidden; on the parent. Notice that divers image. Notice everythingabout it.

Now resize the screen to half the size. The image is being cut off. The text to the right is cut off.

How can I deal with it?

Eh, change the width on “.container” to 100%. On .banner add in “background-size: cover”, remove the height also.

It works on chrome but not on Firefox.

My Site

Works for me. Screenshots? Version?

My firefox is up-to-date 36.

my header overlaps too

You haven’t made the rest of your website fluid/responsive. The code is working fine. Do the rest of that page.

any good tutorials or articles about fluid/responsive layouts to share?

What did you want to know exactly?

Fluid layouts?

To fix these two:

Googling should provide some subjects on learning responsive tips.

If you wanted that fixed, you’d need to have us do it probably.

I did follow your codes but its not working.

That was only for the bigger green image. Did you want the other parts of the page done too?

Looks like your navigation is the only thing that needs to be reworked. That’s what is causing scrollbars.

No, this one:

My Site

That’s not what I’m seeing in Chrome.

It is on firefox 36 :sleepy: