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
Prepare For A Fluid Layout
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.
This section explains the first stage of converting the Twenty Ten theme’s static layout into a fluid layout. First you identify key structural elements that have fixed pixel (px) values. Then you convert these pixel values to percentages (%). Width and margin properties control how much horizontal space an element occupies. Setting these in percentages will give you a fluid layout that responds to narrower sizes. This will make finishing the job with media queries much lighter work.
Padding and border properties (left and right) also contribute to the horizontal space of an element. But they don’t need percentage values because the box-sizing:border-box setting provides a convenient alternative. When an element’s box-sizing is set to content-box, border and padding values are added to value of width. This is the default. In contrast, when box-sizing is set to border-box, the value for width incorporates border and padding.
In this section I will explain how to set box-sizing:border-box for all elements across the whole site. Please see the footnote on Internet Explorer 7 (IE7) & box-sizing if you’re considering supporting IE7.
Tip: hold shift and press ‘8’ on English keyboards. Or look for the * character above the ‘+’ key, or another key. The * character may be in a different place on your keyboard.
Setting box-sizing to border-box causes the header image and sidebar to pop out like a dislocated bone. Twenty Ten has a rigid layout. It expects elements to have precise dimensions. You just reduced the total width of any elements that have padding or border. So there are some temporary side effects. It’s nothing to worry about though. Your new fluid layout will be much more robust at dealing with variation. And you’ll notice that the vast majority of elements remain the same size, because they have neither padding nor border.
How To Find Key Structural Elements
From a visual perspective it’s often clear what the main structural elements are. The screenshot above shows a main content area on the left, and a sidebar to the right. By comparison, Chrome’s inspector can be intimidating at first, if you’re new to HTML. The challenge is to match the lines of code in the left pane with the things you can see on the page.
A key structural element is the outermost element for a particular section of the page. If the highlighting covers too much, you are hovering over a container element. A container element has child elements nested inside it. It is also referred to as a parent element. To reveal the HTML elements inside the container, click the little right-facing triangle icon at the start of the line. To collapse the HTML elements, click the down-facing triangle icon.
The indentation of Chrome’s HTML pane reveals the hierarchy of the elements. This makes it easier to see which elements are containers for other elements. The hierarchy of parent and child elements is also denoted by the breadcrumb trail at the foot of the Chrome’s inspector.
Twenty Ten’s key structural element for the entire page is a <div> element with an id of wrapper and a class of hfeed. You should hopefully arrive at this conclusion after hovering over the HTML. Observe which line of HTML covers the main content on the page in blue:
If you click this line of HTML code, you can then see that the CSS in the right pane shows the wrapper element has a fixed pixel width value of 940px. Note, Twenty Ten targets the #wrapper element with two different selectors (#wrapper by itself, and the long comma separated one below which has #wrapper at the end). You may need to scroll down a bit to see the width: 940px style.
You could change 940px to a percentage value, but the percentage will be relative to the body width. The body width depends on the user’s screen width. And so the #wrapper div could grow too big on very large screens. A technique for limiting the width of the page wrapper, while allowing it to shrink down, is to set the width property to auto and the max-width property to a fixed value like 940px, 1200px, or whatever you want the width of your page to be.
A Fluid Wrapper Element
Step 1: Create A Selector For The Page Wrapper
The first step is to target the wrapper element by creating a selector for it in Microthemer.
Step 2: Apply New CSS Styles To The Page Wrapper
After creating a selector for the wrapper element, the second step is to change the CSS values.
Microthemer Note: Reported CSS Values
You will notice that the light grey reported CSS values covering the input fields disappear when you insert your own values. If you hover over the CSS property icon you can still see the reported value. This is useful when you want to make sure that the value you set is definitely having an effect. Rather than being overridden elsewhere. At the time of writing, Microthemer always reports computed CSS values in pixels. So a value of 50% would be reported in the number of pixels 50% computes to e.g. (50% of 800px = 400px). In future, Microthemer will report the actual value, e.g. 50%, alongside the pixel value.
Pitfall Alert: Don’t ‘Inspect’ elements highlighted by Microthemer with Chrome.
You’ve just learned how to target elements with Microthemer by double-clicking them. Microthemer temporarily highlights double-clicked elements while it shows the selector wizard. At times, you might be tempted to right-click » Inspect a currently highlighted element to check its underlying HTML code. However, this won’t work as expected. Instead, Chrome will show the HTML code for Microthemer’s highlighting effect. To get around this, please close the selector wizard using the option at the top right. This will disable the highlighting. You can then inspect with Chrome.
Some points to note:
You may notice something strange with the #header div’s highlighting in Chrome’s inspector. The #header element is a container for the #site-title, #site-description, and banner image. Yet the highlighting for the #header doesn’t cover these elements if you hover over it’s HTML: <div id=”header”>. Also, the highlighting is purely green with no blue. This suggests it is consists only of padding. Strange indeed. The float property is the cause of all this strangeness.
When an element has a value for float other than none (e.g. ‘left’ or ‘right’), we say that it has been (partially) taken out of the ‘flow of the document’. Normally the #header element would be as tall as the content within. But as all three elements inside (#site-title, #site-description, banner image) have a value for float, and have been partially taken out of the flow of the document, the header behaves as if they weren’t there at all. The total height of the header element is only greater than 0 because it has some padding. Hence the green highlighting in Chrome’s inspector (or purple with Microthemer’s highlighting).
If you set the overflow property to hidden on an element that contains floated elements, it will wrap around them. And we say that the floated elements inside have been ‘cleared’. We say this because there is actually a clear property in CSS. If we added a fourth HTML element to the #header element and set the clear property to left, this would have the same ‘clearing’ effect of setting overflow to hidden on the #header element. But it’s often more convenient to set a CSS property than insert an extra HTML element.
Of course setting overflow to hidden also hides any overflowing content – the primary purpose of the property. This can be troublesome, such as when a dropdown menu needs to show items on hover. Twenty Ten clears floated elements in the main menu without using overflow:hidden. Instead it gives the outermost container element (div#access) a value for float of it’s own.
There is also a 3rd option for dealing with floated elements: the clearfix technique. It’s slightly more complicated but worth Googling if overflow:hidden or float on the parent element isn’t suitable.
The float property has been used a lot in CSS layouts over the years. This is set to change when the flexbox method is supported by all browsers in active use. Unfortunately, all versions of Internet Explorer up to IE11 currently don’t support flexbox or are buggy (IE10 and IE11) according to can I use. And at the time of writing (2016) these browsers still have a reasonable market share.
Footnote: Internet Explorer 7 (IE7) & box-sizing
The box-sizing property isn’t supported in Internet Explorer 7 (IE7) or older. Like Microsoft, I don’t support IE7 anymore. It has a very low market share and to do so would increase my workload in various ways. Box-sizing is a good example of this. If you embrace box-sizing:border-box regardless of IE7 support you can save yourself a lot of time and calculations. Furthermore, if you want to use a fixed unit (e.g. px, em, rem) for padding/border in combination with a percentage width value, you need to set box-sizing to border-box. Otherwise an element can fill more than 100% of its parent, potentially breaking your layout. Given these two points, box-sizing is an important property for fluid layouts.