From the course: CSS: Float-Based Page Layouts (2012)

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Making images flexible

Making images flexible - CSS Tutorial

From the course: CSS: Float-Based Page Layouts (2012)

Start my 1-month free trial

Making images flexible

“

As long as your page content is limited to a content that automatically reflows, like text, you'll be fine. However, once you start putting images and other fixed-width resources like video on your page, you are going to quickly find that your fluid layout has some limitations. So to demonstrate that, I have the fluid.htm file opened here from the 06_04 folder. And if I just open this in a browser, you can see we've added an image to our layout. And right now everything looks just fine. It's fitting in there fine. The text is reflowing around it okay. However, if I begin to resize this image, watch what happens. Whereas the content and the columns are flexing, this image has a very fixed width. So at the end of the day, you just end up with this text running right over the top of it. It's colliding and it's tearing up your layout, and that's going to happen wherever you use fixed-width images within your fluid or flexible layouts. There are some things that we can do to help us with…

Contents