In part three of my Lesson 3 of CSS Fundamentals I went over CSS layout, which is important when trying to set up the layout for a webpage. To start this I began with learning more about element positioning. Positioning allows you to take an element on the page and control where and how it’s positioned relative to things such as its origins starting position, other elements, or even the viewport itself.
CSS defines three positioning schemes:
Normal document flow is exactly what happens when you do nothing to control page layout and is considered like the default method. Essentially, normal flow takes the content in the order that it’s found in the HTML and stacks it, one element on top of another.
This can and should handle the majority of your layout needs and it makes it a lot easier to make minor tweaks here and there. If you want to drastically change the positioning of your elements, you can use the position property.
In the above image, you see that the position property accepts one of five values: static, relative, absolute, fixed and inherit. Inherit simply means that the position value from the element’s parent should be used. Now, static tells the element to position itself using normal document flow, and you can think of that as like the default value. However, relative positioning is still considered part of normal document flow, but it allows you to tweak an element’s position based on offset values that you could give it. Offset values can be given for top, left, bottom or the right of an element.
Now, giving offset values of top and left, for example. would offset the element from its top-left corner. To visualize that, in the image below, you see we have an element called box 1. Position is set to relative, and then we’re giving it offset of left of 100 pixels, top of 50 pixels. So what it will do is move over 100 pixels and down 50 pixels.
Now, an issue with relative positioning is that it creates a hole where the element would normally be located. Instead of elements below moving up to take its place, and empty space where the element would be is left behind. This empty space would even change sizes if the element would change size as well.
Absolute positioning is not considered part of normal document flow. In fact, it removes the element from normal flow and repositions it based on those offset values given. To show how this works, we have the same box 1 with a position of absolute, and its left set to 100 and top to 50.
Now, any element below the absolute positioned element now moves up to take the element’s place.
The last position value I mentioned was “fixed.” Fixed elements are considered to be absolutely positioned but they’re always positioned relative to the active viewport. What does that mean? Well, the the important part of that statements, is what is meant by the “active viewport.”
If you position a fixe element at the top-right offset of 50 pixels and 100 pixels, the top-right corner of the element will be positioned 50 pixels over to the left and 100 pixels down. That’s just like absolute positioning. However, since it’s relative to the active viewport, scrolling page content would not affect this element at all. It would remain in that position, no matter how the screen was resized or scrolled. It truly is fixed.
After going over positioning elements, it is perhaps just as essential to mention floating. Floating is a very popular CSS layout technique, however it’s also one that many new web designers struggle with. THat’s because how the technique works changes based upon the relationship of the elements that are being floated.
Here’s how floating works. Remember that in normal document flow, block level elements simply stack one on top of another. They’re commonly referred to as boxes. When you float an element, it moves as far over as it can, either to the right or the left, depending on the property that’s been assigned to it. The elements below it then move up to occupy the space that the floated element used to occupy.
There is, however, a lot more to floating that just this. For example, let’s take a look at what happens when you float an element to the left. And the default alignment is to the left edge of their containing elements. So if you float of those boxes to the left, it doesn’t appear to move at all, since it’s already aligned to the left of the image. However, it’s still removed from normal document flow, and that means that the element below it would move up to occupy what they see as empty space.
Those elements would actually go underneath the floated element, at least partially. Individual parts of an element will react differently to floated elements. To demonstrate this, let’s say we have an image contained within a paragraph. If you were to float the image to the left, it looks as if the paragraph is wrapping around the image instead of going underneath it.
Actually, we’re seeing how the inline boxes, or those lines of text, react to floated elements. Inline boxes, such as the lines of text within a paragraph, will wrap around floated elements if they have enough room.
There are several techniques in floating that you can use to do all kinds of cool things. For example, if you float a series of elements to the same side, like this series of boxes that have all been floated to the left, you end up with a horizontal display of elements.
This technique is used frequently to transform a list of links into a horizontal menu. Other things you can use floating techniques for are multiple columns of elements, drop caps in paragraphs, pull quotes that have text wrapped around them, product description details, and lots more.
Another technique that can be useful, is clearing floats. If you remember earlier, I discussed how floated elements affect all the elements below it in normal flow. At times, that’s not really ideal. You might, for example, create a two-column layout by floating one containing element to the left and one to the right, as you see below.
However, based on the way floats work, any remaining content on the page, like the footer, would move up and underneath the floated elements.
By using the clear property, you can tell the browser to stop floating elements and go back to normal document float. The clear property can be set to prevent elements from floating to the left or right of an element, or set to both.
Now that we’ve learned about positioning elements and how to float those elements, we can use both of these to help with designing CSS layouts on a webpage.
Let’s start with the concept of page regions. Most designers will create quick mockups of pages with content regions just sort of blocked out. This will allow them to design towards the functionality of the site and consider content first before getting caught up in the visual design.
It also allows designers to start thinking about the structure of their HTML. Each one of these content regions will most likely be represented in the page structure by a containing element. In the past, designers were limited to using divs for these purposes. But HTML5 now gives several new semantic tags to use when marking up sections of content.
No matter which tags are used, the concept here is that sections of content are contained within parent elements. This serves the dual purpose of grouping the content together and giving us a containing block to use for positioning and styling. Now, I’m going to take a look at how I can create a simple, two-column layout using these containing blocks.
First thing is to give the body element a defined width to set the size of the page, then center it by giving it a right and left margin of auto.
In this case, the layout uses pixels, but if it was targeting a specific screen size, it could use pixels.
With the header element, nothing really needs to be done. For the sake of simplicity, a bit of bottom margin is added to separate its content from the navigation.
In the case of the navigation above, you might want the menu to be a specific height as well. Depending on how you structure your navigation, you’ll have several opportunities to do that. Here, another margin was added to separate the navigation from the content.
Next is the first real challenge. We need to have our sidebar and main content arranged as two columns. The easiest way to do that would be to use floats. In this case, The sidebar is floated to the left while the content is to the right. Width is also assigned to them with sidebar at 30% and content at 60%.
These widths are based off the calculated width of their parent element, which is the body tag. Notice that the two widths don’t quite equal 100%. This is so that there is some space between the two columns equal to 10%.
Floating these two elements gives the site its columns, but it also creates issues for the footer. As you can see, the footer has moved up and is underneath the sidebar and content regions. To fix this, the footer will need to be cleared to move it back down and underneath the content. That’s it.
From there, you’ll begin to control the layout of the content within the regions themselves. For the navigation, you’ll probably take the list items within an unordered list and float them so they appear was horizontal menu items.
You might also want to control the positioning of the items in the header by setting the header’s position to relative and then absolutely positioning an item inside of it like the logo.
You can also float items within content regions to control how items like text and images interact with each other. This is just one example of how layout techniques can be combined to control page layout.