Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
CSS: Page Layouts introduces basic layout concepts, gives advice on how to create properly structured HTML based on prototypes and mockups, and goes into critical page layout skills such as floats and positioning. Author James Williamson shows how to combine these techniques to create fixed, fluid, and responsive layouts. Designers are also shown how to enhance their pages through the creative use of CSS techniques like multi-column text, opacity, and the background property. Exercise files are included with this course.
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.
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.
There are currently no FAQs about CSS: Page Layouts.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.