Fluid Content

Published: March 28, 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.

exception-sidebar-spills

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.

exception-layout

  1. Right-click something in the sidebar and choose Inspect to launch Chrome’s inspector.
  2. There are four HTML elements involved in Twenty Ten’s fixed layout for the main page. These elements have an id of #main (main page wrapper), #container (content wrapper), #content (content), and #primary (sidebar).

GUI Method

Make the #main wrapper fluid

fluid-main

  1. With Chrome’s inspector still open, click on the line of HTML in the left pane for the #main div.
  2. Notice in the right hand CSS pane that it has a fixed width of 940px.
  3. Double-click something in the sidebar or main content area.
  4. Click the  up arrow on the directional controls of the Inspector tab several times until the code below it shows: <div id=”main”>…</div>
  5. In the Name field, enter Main.
  6. In the Folder field, select Content.
  7. Click the CREATE SELECTOR button.
  8. Go to the  Dimensions tab.
  9. Set the  width property to auto.

Make the #container more flexible

fluid-container

  1. With Chrome’s inspector still open, click on the line of HTML in the left pane for the #container div. This should be just below the the #main div you clicked on before.
  2. In the right pane, notice the margin has 4 values: “0 -240px 0 0”.- The order of the margin values gives you this: top (1st), right (2nd), bottom (3rd), left (4th). So the second value refers to a margin-right value of -240px. Note, the order of Microthemer’s fields for padding, margin, and border reflect this top, right, bottom, left CSS convention.
  3. Double-click something in the main content area.
  4. Click the  up arrow on the directional controls of the Inspector tab several times until the code below it shows: <div id=”container”>…</div>
  5. In the Name field, enter Container.
  6. In the Folder field, select Content.
  7. Click the CREATE SELECTOR button
  8. Go to the  Padding & Margin tab.
  9. Set the  margin-right property to -100% This could match the right margin we will ultimately give to the #content div but setting it to -100% means that you won’t have to keep it in sync with the #content div’s right margin. You can set and forget.

Make the #primary element (sidebar) fluid

fluid-sidebar

  1. With Chrome’s inspector still open, click on the line of HTML in the left pane for the #primary div. This should be just below the #container div you clicked on before.
  2. Notice that it has a fixed width of 220px.
  3. Double-click something in the sidebar area.
  4. Click the  up arrow on the directional controls of the Inspector tab several times until the code below it shows: <div class=”widget-area” id=”primary”>…</div>
  5. In the Name field, enter Sidebar.
  6. In the Folder field, select Sidebar too.
  7. Click the CREATE SELECTOR button
  8. Go to the tab.
  9. Click the All Devices tab even if you are on it already. This ensures that the site preview takes up the full width of your screen. Otherwise the next step could give the wrong result.
  10. In the  width field enter: =%(220).
  11. Microthemer will auto-convert =%(220) to 23.404%.

Make the #content fluid

fluid-content

  1. With Chrome’s inspector still open, click on the line of HTML in the left pane for the #content div.
  2. Notice that it has a positive fixed margin-right value of 280px.
  3. Double-click something in the main content area.
  4. Click the  up arrow on the directional controls of the Inspector tab several times until the code below it shows: <div id=”content”>…</div>
  5. In the Name field, enter Content.
  6. In the Folder field, select Content too.
  7. Click the CREATE SELECTOR button.
  8. Go to the  Padding & Margin tab.
  9. In the  margin-right field enter: =%(280). Make sure you don’t accidentally do this in the padding-right field instead.
  10. Microthemer will auto-convert =%(280) to 29.787%.

Code Method

code-fluid-layout

Start a new line in the code area and type the following code:

#main {
    width:auto;
}
#container {
    margin-right:-100%;
}
#content {
    margin-right:29.78%;
}
#primary {
    width:23.4%;
}

Some points to note:

  • The #main element had a pixel value for width of 940px which needed changing to auto for fluidity.
  • The #container element had a negative pixel value for margin-right of -240px which was changed to -100%. This could have been set to the same number as the #content div’s positive margin-right value (29.78%) but setting it to -100% means that you don’t have to keep it in sync with the #content div’s right margin. You can set and forget.
  • The #content element had a pixel value for margin-right of 280px which needed changing to a fluid percentage value of 29.78%. This value needed to be equal to the new fluid sidebar width (23.4%) plus a bit extra to create some space between the content and sidebar.
  • The #primary element had a fixed pixel value for width of 220px which needed changing to 23.4% for fluidity.

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.

export-before-exp

  1. Click the  Export your work as a design pack icon in the top right toolbar of Microthemer (this icon appears after you hover over the ‘Install & Manage your design packages’ icon).
  2. Enter a name in the first field e.g. Before Experiment.
  3. Click the ‘Check All’ checkbox to ensure all of the checkboxes are ticked. This will also select your empty folders. So when you import your settings back, the interface will be exactly as it is now.
  4. Click the EXPORT button
  5. Wait a few moments for Microthemer to export your settings to a design pack.

GUI Method

  1. In the  Manage folders and selectors menu, open the  Content folder.
  2. Go to the  Main (#main) selector you created.
  3. Go to the  Position property group.
  4. Set  position to relative (thus defining the positioning context for child elements inside the #main element).
  5. Go to the  Dimensions property group and set  min-height to 200.
  6. As you are currently in the Content folder (because the Main selector is in the  Content folder), you can use the Quick edit – current folder option to navigate to the next selector. Click the text ‘Content’ in the top toolbar to open the folder’s quick edit options.
  7. Go to the  Container (#container) selector.
  8. Go to the  Position property group and set  position to absolute.
  9. Open the  Sidebar folder
  10. Go to the  Sidebar (#primary) selector.
  11. Go to the  Position property group
  12. Set  position to absolute and  right to . Note, Microthemer’s icon for right has an arrow pointing to the left. This is to indicate that if you increase the value for right, the element(s) will shift over to the left.

Code Method

Update the following four selectors:

#main {
    width:auto;
    position: relative;
    min-height:200px;
}
#container {
    margin-right:-100%;
    position:absolute;
}
#content {
    margin-right:30%;
}
#primary {
    width: 23.4%;
    position:absolute;
    right:0;
}

position-experiment-result

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.

import-after-exp

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.

Close