Prepare For A Fluid Layout

Published: March 27, 2016By Sebastian

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.

Border-Box Everything

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.

GUI Method

  1. You’re going to manually add a selector on this occasion. In general, you will use the selector wizard.
  2. Go to the Microthemer interface if you’re not there already.
  3. Click the  folder icon at the top left to expand the folders and selectors menu.
  4. Hover your mouse over the name of the  Body folder.
  5. Click the  plus icon that appears as a result of hovering over the folder name.
  6. Form fields for creating your new selector will be revealed.
  7. In the Descriptive Name field, enter Everything.
  8. In the CSS Selector Code field, enter a star character *
    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.
  9. Click the CREATE SELECTOR button.
  10. Click somewhere outside the folders and selectors menu to close it.
  11. Go to the  Dimensions property group under the All Devices tab.
  12. Set the  box-sizing property to border-box using the dropdown menu at the far right.

Code Method

  1. Click the code editor icon at the top right of the interface to switch view.
  2. Enter the following code: * { box-sizing: border-box; }
  3. Note, you will get a warning icon in the left of the editor, you can safely ignore this. The code editor has opinions you don’t always have to agree with.
  4. Use the Control+S (or Command+S on mac) keyboard shortcut to save your changes.

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.

  1. Right-click the white area just above the site title and choose Inspect.
  2. Move your mouse over the HTML code and watch how the blue highlighting on the page changes in response. You may also notice green and orange highlighting. These areas show an element’s padding and margin respectively. Note, Microthemer highlights elements using a different color scheme (blue, purple and yellow – which is used by Firefox).

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:

<div id="wrapper" class="hfeed">

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.

#access .menu-header, div.menu, #colophon, #branding, #main, #wrapper {
	margin: 0 auto;
	width: 940px;
}

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

GUI Method

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.

  1. Double-click the white area just above the site title.
  2. You are likely to select the #header, or another child element, when you do this (rather than the #wrapper element). You will know that you have selected the header if the highlighting only covers a small area at the top of the page.
  3. If you have mistakenly selected the header element, go to the Inspector tab (see screenshot above) then click once on the  up arrow. This will shift your targeting up to the wrapper element.
  4. The highlighting should cover the whole wrapper div, as in the screenshot above. The yellow area shows the margin, and the purple areas show the padding on the left and right sides.
  5. In the Name field, enter Wrapper.
  6. In the Folder field, select Body.
  7. Click the CREATE SELECTOR button.

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.

  1. Go to the Dimensions property group.
  2. Microthemer reports the existing CSS values for various properties. In the  width field, it shows that the current value is 940px.
  3. In the  width field, enter auto.
  4. The wrapper div will fill the width of the screen resulting in a dislodged menu that juts out to the side. Don’t worry, the next change fixes that.
  5. Set  max-width to 980. Note, if you omit the px unit Microthemer adds pixels for you when it writes your styles to a stylesheet. This default behaviour can be changed via Microthemer’s preferences (on the CSS units tab). You can default to ems, rems, or percentages for specific CSS properties.
  6. Setting max-width to 980px fixes the issue with the protruding header and sidebar that occurred after setting all elements to border-box. The total width of the wrapper element (including 20px padding either side) now adds up to 980px like it did before.

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.

Code Method

  1. Launch Chrome’s Inspector (right-click, choose Inspect).
  2. Find the main wrapper div by hovering over the HTML until the highlighting covers the main page. See the screenshot above if you need a hint.
  3. Notice that the element has an id of wrapper.
  4. Start a new line in the code editor and type the following code:
#wrapper {
   width:auto;
   max-width:980px;
}

Some points to note:

  • The # symbol prefixes wrapper because you are using an id to target the element. If you were to use a class (e.g. hfeed) you would start with a dot instead (.hfeed)
  • The curly braces are used to contain all the styles you enter. Do not forget to add the closing } brace.
  • The max-width rule of 980px fixes the problems introduced by setting everything to border-box. The total width of the wrapper element (including 20px padding either side) now adds up to 980px like it did before.

Floating Elements

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.

Close