Our website will be down for scheduled maintenance on Thursday, September 18, at 11 p.m. Pacific Time and should be back up by Midnight. We apologize for any inconvenience.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Setting minimum and maximum widths

From: CSS: Page Layouts

Video: Setting minimum and maximum widths

On every flexible layout, there comes a point at which the layout just no longer works. You know at the small enough size, columns become too small to hold the content, and the relationship between the elements is lost as they begin to collide and overlap each other. At larger widths, layouts are often not as effective either, because column widths can increase to a size that affects readability, and images and other assets begin to move away from the elements that they represent. So we have a couple of values, the minimum- and maximum-width properties, and those properties allow you to set a range of values for layouts that can still give you the flexibility you want, while ensuring that the layout stays within an effective size.

Setting minimum and maximum widths

On every flexible layout, there comes a point at which the layout just no longer works. You know at the small enough size, columns become too small to hold the content, and the relationship between the elements is lost as they begin to collide and overlap each other. At larger widths, layouts are often not as effective either, because column widths can increase to a size that affects readability, and images and other assets begin to move away from the elements that they represent. So we have a couple of values, the minimum- and maximum-width properties, and those properties allow you to set a range of values for layouts that can still give you the flexibility you want, while ensuring that the layout stays within an effective size.

So to demonstrate kind of how layouts fail at various ranges, I've got the fluid.htm file open from the 06_05 directory. If I open this in a browser, you can see it's pretty much the same layout we were working with. We do have a couple of extra elements down here that we are going to be talking about in a little bit, and a new image that's been added to the page, so we are going to have to account for that in just a moment. But at this maximum size, it doesn't look too bad. Of course, the monitor I am on is a 1280-pixel-wide monitor. If I was on something at 440, this might stretch even more, and this column would be a little bit difficult to read.

If I begin to resize this, at a certain size, it just becomes kind of hard to read, just because the column widths are so small. But then, when it gets down to this size, it really and truly fails. You will notice it won't go any further than that size. And that's not because there's already a minimum width on it. If I scroll down, you can see that this image down here is just not allowed to go any further. So it's the fixed nature of that image that's stopping that scrolling. And this, obviously, if we were looking at this layout, even on really positive terms, it's a failure. It's really a failure by anybody's measure at that size.

Now you might say to yourself, well, yeah, but who is going to view at that size. Well, phones, for example. So let's go ahead and examine the minimum-width and maximum-width properties and how they can help our layout. I am back in the code, and I am going to scroll down to my body selector. In my body selector, right now, the width is 80%, and that's pretty open ended. It's just like, hey, whatever the available space is, give me 80% of that. But what we can do is just below that we can set a max-width, so maximum-width property.

And we can say okay, don't go beyond 1200 pixels. And then we can give it a minimum width, say min-width, and I can say hey, don't go below 480 pixels. So that it is, in essence, establishing a range. It's like take up 80% of the available space,, as long as you never go wider than 1200 pixels and narrower than 480 pixels. So how do you determine that range? Well, if I save this file, go back into my browser, and refresh it, you can see, especially at maximum size, it doesn't really have any affect to me there, because right now I am not even viewing it at a thousand pixels wide, but if I go down, that's 480.

Is that enough, is it too much? No, layout is still failing. So one of the things that you'll need to do when you're doing things like this is to start to flex your layout and find those points of failures. And one of the things that I'll typically do when I do that is I'll take a screenshot and I'll just measure that. Now, there are plenty of tools that you can use to do this, like Snapz Pro, for example, when you take a screenshot. You can do a selection and it will actually give you the physical measurements. There are measurement tools that you can do to measure screens. There are JavaScript plug-ins you can get for your browsers that will let you know what the available browser space is.

So there are a lot of different ways to do that. So I am going to go back into my code and I am going to modify this. So, after taking some screenshots and after looking at some things, I decided that I am going to restrict this between 1024 and 640. And now if I save this, go back in, and refresh it, now its maximum size is 1024, which we're still not really bumping into at this resolution. But as we go down, you can notice it freezes right there at 640 pixels.

So we still have a readable right column. We still have a readable left column. As I scroll down, this image is still failing, so we are going to have to deal with that. But that has to do more to the fixed nature of that image than it has to do with the minimum or maximum range. So in this case, I am just saying, okay, can I still read these, do they still look okay, how is the column width? And at about 640 pixels here, we are at a fairly decent space, so you can still sort of read this, so I am happy with this. Maximum width can really help us out with these images as well. Now, one of the things that I wanted you to focus on first about this image is how it fits within its container box.

You'll notice that there is nothing to the left of it. There is nothing to the right of it. We are not reflowing any content. I want this image to scale to fit the width of its parent element, which in this case is the new section. We could go into the code and set the image's width to 100%, but the problem there is that if I can have this image display at its native width and height, I would love to do that. That way I don't having any scaling involved at all. Well, there is a way to do that. So I am going to go back into my code and I am going to scroll down to the image, which is down here towards the bottom.

It's in this news section, and it's under the Featured images section. So what I am going to do is I am just going to strip out width and height altogether. I am not going to set width to 100%. I am not going to set it to any percentage point at all. I am just going to get rid of it. Now if you leave off the width and the height, the HTML specification tells the browser to go ahead and use the native width and height of the image. So if no width and height is provided, the browser basically calculates it based on the image properties and then displays that. I am going to modify that just a little bit by coming in here and applying a class to this image, and the class that I am going to give this is flex.

All right, so I am going to save that, and then I am going to scroll up into my CSS, and just underneath banner, I am going to write a selector for the class of flex. And in flex, I am going to use something very simple: I am going to type in max-width 100%. So what does that do? Well, it allows the image to display at its native width and height if it can. But it's also saying, however, your maximum that you can be is 100%. So the browser is going to calculate the width and height of the image based upon the available space, its native width and height, and whether or not it fits in within the element.

So if I save this and preview it, you can see that even though the image naturally is larger than this, its maximum width is being set to 100%, meaning it can't be any wider than this particular element. So now we have an image that flexes within that space, but still when it can, will display at its normal or native resolution, which is a really neat solution to creating these flexible images within those container elements. So essentially here, our fluid layout is free to react to whatever screen size it's viewed in, while still being constrained within a range that enforces our layout's viability.

Now we have also integrated images into our layout in a way that maintains the relationship between images and other page elements. Planning and executing flexible layouts requires a lot more effort than fixed layouts. I mean that's just a fact of life. However, the extra work gives you a layout that is not constrained to a single resolution, and it allows you to be a little bit more creative with how elements interact with each other.

Show transcript

This video is part of

Image for CSS: Page Layouts
CSS: Page Layouts

71 video lessons · 41476 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 4m 20s
    1. Welcome
      54s
    2. How to use the exercise files
      3m 26s
  2. 1h 39m
    1. Box model review
      8m 47s
    2. Calculating element dimensions
      11m 11s
    3. Understanding margin collapse
      7m 59s
    4. Calculating em values
      7m 41s
    5. Calculating percentage values
      7m 51s
    6. Normal document flow
      13m 3s
    7. Controlling element display
      8m 53s
    8. Using CSS Resets
      7m 11s
    9. Fixed, fluid, and responsive layouts
      9m 9s
    10. CSS debugging tools
      6m 46s
    11. Using the Firebug Inspector and the WebKit Web Inspector
      11m 5s
  3. 53m 15s
    1. Page design workflow
      3m 6s
    2. Page design tools
      4m 56s
    3. Determining page structure
      7m 18s
    4. Creating image assets
      8m 58s
    5. Creating initial page structure
      7m 3s
    6. Adding meaning with classes and IDs
      5m 23s
    7. Structuring content with HTML5
      6m 6s
    8. Building internal structure
      10m 25s
  4. 1h 36m
    1. Floating elements
      7m 50s
    2. Clearing floats
      7m 28s
    3. Containing floats
      7m 50s
    4. Clearfix technique
      10m 38s
    5. Floating inline elements
      14m 34s
    6. Two-column floated layouts
      8m 17s
    7. Three-column floated layouts
      11m 30s
    8. Column height considerations
      7m 3s
    9. Creating equal-height columns
      10m 42s
    10. Floats: Lab
      5m 25s
    11. Floats: Solution
      5m 21s
  5. 51m 42s
    1. Relative positioning
      7m 59s
    2. Absolute positioning
      8m 59s
    3. Fixed positioning
      4m 23s
    4. Controlling stacking order
      8m 31s
    5. Clipping content
      8m 21s
    6. Controlling content overflow
      5m 38s
    7. Positioning elements: Lab
      3m 59s
    8. Positioning elements: Solution
      3m 52s
  6. 48m 46s
    1. Design considerations for fixed layouts
      3m 28s
    2. Establishing the layout grid
      7m 57s
    3. Defining column spacing
      9m 30s
    4. Applying the grid through CSS
      8m 56s
    5. Creating grid-based assets
      8m 26s
    6. Grid design resources
      6m 22s
    7. Building fixed layouts: Lab
      4m 7s
  7. 44m 35s
    1. Designing for flexible layouts
      2m 30s
    2. Calculating percentage values
      8m 45s
    3. Setting flexible width values
      6m 6s
    4. Making images flexible
      8m 10s
    5. Setting minimum and maximum widths
      7m 24s
    6. Building flexible layouts: Lab
      4m 53s
    7. Building flexible layouts: Solution
      6m 47s
  8. 49m 36s
    1. Responsive layout overview
      3m 49s
    2. Using media queries
      7m 16s
    3. Organizing styles
      8m 39s
    4. Making content responsive
      8m 33s
    5. Mobile design considerations
      7m 32s
    6. Building responsive layouts: Lab
      4m 23s
    7. Building responsive layouts: Solution
      9m 24s
  9. 1h 22m
    1. Creating multi-column text
      6m 36s
    2. Using borders to enhance design
      13m 59s
    3. Rounding corners
      6m 56s
    4. Adding drop shadows
      10m 35s
    5. Working with opacity
      6m 8s
    6. Utilizing the background property
      15m 5s
    7. Working with CSS sprites
      7m 58s
    8. Enhancing page design: Lab
      6m 22s
    9. Enhancing page design: Solution
      8m 38s
  10. 6m 25s
    1. Additional resources
      6m 25s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Page Layouts.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.