CSS Layout & Responsive Design
Educational Notes (Quick Links)
- HTML and CSS Basics
- Floating Elements
- Nested Elements
- Negative Margin & Float Layout
- ‘Float’ Over ‘Position’ Sometimes
- The ‘Position’ Property
- Adaptive Images
- Use Media Queries Sparingly
- CSS Inheritance
- Source Order, Specificity, And !important
- Display (Inline vs Block)
- Pseudo Elements
- Pseudo Classes
Heads up! this post was created when Microthemer was at version 4. The current version is 7. Some references to the interface may be out of date.
Set the preview screen width to around 700px using the horizontal ruler at the top of the preview. The header area is starting to cope much better with smaller screens now. But notice the horizontal scrollbar at the foot of the page. Pull it to the right and you will see that the content spills out and the sidebar is way off the grid. This section shows you how to put that right, and make the main content and sidebar fluid in the process.
Twenty Ten uses an advanced but common CSS layout technique for the content and sidebar. It uses floating elements with negative margins and nesting. This allows the main content to come before the sidebar. Not visually, but in terms of the order of the HTML on the page—even if a second sidebar were to visually precede the main content. Having the main content first is good for SEO, accessibility, and responsive design. Search bots and screen readers find the important (main) content first. And when you move to a single column layout on mobile devices, the sidebar will naturally come after the main content, visually speaking. If you want to get a broader understanding of this technique, please read this article on negative margins and float. Also see the educational note at the end of this section.
Make the #main wrapper fluid
Make the #container more flexible
Make the #primary element (sidebar) fluid
Make the #content fluid
Start a new line in the code area and type the following code:
Some points to note:
Negative Margin & Float Layout
When a negative left or top margin is applied to a floated element, it shifts to the left or upwards respectively. In contrast, when you apply a negative right or bottom margin to a floated element, its width is reduced. A chunk is taken from the right/bottom side.
Twenty Ten sets a negative margin-right value on the #container element of -240px. There is actually no reason to be so specific. Setting the margin-right to -100% achieves the same effect. The browser acts as if the #container has zero width when positioning sibling elements. In this case, the #primary element. Sibling elements have the same parent element. And so they occupy the same level in the HTML document. In Twenty Ten, the #primary and #container element share the #main parent element for instance.
Child elements inside floated elements with a negative right margin ignore the negative margin. Unlike sibling elements. They flow as if the parent has normal width. That’s why Twenty Ten wraps a #container element around the #content element. The #content element can be as big or small as you like without pushing the sidebar down. The two elements will overlap if anything.
This isolation technique makes it easy to create a 3 column layout too. If you have access to your theme’s HTML, you could add another sibling HTML element after the #container element with a float value of left. Then give the #content element a left margin to make room for it.
‘Float’ Over ‘Position’ Sometimes
When people are starting out with CSS, they often try to lay things out on the page using the CSS position property. The Twenty Ten authors opted to use float over position when placing the content and sidebar. This is because the content needs to interact, in an a physical sense, with other elements on the page.
Floated elements are only partially taken out of the flow of the document. They interact with each other. A series of left or right floated elements will horizontally stack together for instance, which means moving one will also move the other(s). They can also be cleared by setting the clear property on subsequent elements. Or using one of the three hacks discussed in the educational note on floating elements. There is no such clear method or equivalent hack for positioned elements. They have been fully taken out of the flow of the document. They are on their own like the isolated layers in Photoshop.
Try The Following Position Experiment
Backup your work by exporting your settings. This will allow you to quickly revert to your current point.
Update the following four selectors:
Notice that the content and sidebar have been severely cropped. They are no longer tall enough for the text and images within. This is because the absolutely positioned #container and #primary (sidebar) have no effect on the height of the #main element. The height of the #main element would be zero were it not for the min-height of 200px you set.
The #main element now only contains elements that have been fully taken out of the flow of the document. And so the footer starts at the bottom of the 200px high #main element instead of the #container element.
Website content is rarely a fixed known height. Text and images create huge variation across pages. The ‘physical’ interaction between the page content with the footer must be maintained. And so the position property isn’t suitable.
There is a place for using position over float of course. If elements should not interact, CSS positioning is the way to go.
To roll back to the point before this experiment, use the ‘Restore settings from a previous save point’ feature or import (with overwrite) as show above.
The Position Property
The position property fully removes elements from the flow of the document, unlike float. Positioned elements do not interact with anything else on the page. This can be troublesome sometimes, as you just saw with the content/sidebar position experiment.
The top, right, bottom, and left properties do nothing if position is set to static (the default). They only have an effect if position is set to relative, absolute, or fixed. Also, the directional properties move elements in the opposite direction than you might expect. Top will move elements further down the page for instance. Microthemer’s icons for top, right, bottom, and left illustrate which direction elements will move.
For me, the static, absolute, and fixed position values don’t have intuitive names.
Position:static sounds more special that it is. Static means the element follows the normal flow of the document. No special positioning applied. The value normal is used for other properties. Why not in this instance?
Position:absolute is misleading because it actually involves a relative measure. Elements are placed relative to the first parent element that has a non-static position. If there are no parent elements with relative, absolute, or fixed positioning, the element will be placed relative to the body element (the outer most element that is visible on screen). Would you have guessed that from the name?
Position:fixed is intuitive in that the element stays fixed when the rest of the page scrolls. Although you could refer to that behaviour as static no? Fixed elements are always placed relative to the browser window. It would tempting to say that fixed elements are positioned absolutely. But that name is taken.
I have no complaints about position:relative.
Taxonomy is difficult. The reason for my critique is to highlight potential misunderstandings. And reassure you that most people find the position property difficult to master. The majority of CSS properties are simpler. Fonts, text, and color etc are easy to understand without much training.