I used to be not too long ago confronted with the duty of making a two-column liquid structure with a header and footer through which the content material wanted to return earlier than the sidebar within the supply code. I took alternative to show an under-used side of
CSS: detrimental margins. Adverse margins permit us to push the content material space away from the edges of the browser, leaving room for the sidebar.
Article Continues Beneath
Beginning out easy#section2
To indicate how detrimental margins will be useful in creating liquid layouts, let’s begin by making a liquid two-column structure with a
header and footer. The primary content material space will probably be on the left, with the sidebar on the appropriate. This may usually be a quite simple
course of, however we’re altering issues round a bit as a result of we would like our supply code to be structured in a sure approach.
Given the best way that floats work, it might be best to place the sidebar earlier than the content material space, permitting it to drift to the appropriate of the remainder of the content material. Nevertheless, since it’s preferable to have the web page’s content material come earlier than the sidebar in textual content browsers, display screen readers, and legacy browsers that won’t show our types, we need to give you an answer that enables the content material to return first within the supply — and one which works in a overwhelming majority of browsers.
The supply code we would like#section3
Let’s check out what we would like our supply code to appear like for our two-column structure, with a header and a footer:
<div id="header">header</div>
<div id="container">
<h1>content material</h1>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Phasellus varius eleifend.</p>
<p class="final">Donec euismod.
Praesent mauris mi, adipiscing non,
mollis eget, adipiscing ac, erat.
Integer nonummy mauris sit.</p>
</div>
<div id="sidebar">
<h1>sidebar</h1>
<ul>
<li>hyperlink one</li>
<li>hyperlink two</li>
</ul>
</div>
<div id="footer">footer</div>View Instance 1 to see how we would like the un-styled content material to seem. When you’ve seen that, it’ll grow to be
extra apparent why we would like the content material to return earlier than the sidebar, as browsers that don’t accurately learn our
CSS will probably be displaying it on this approach.
We all know that we want the left content material space to take up your complete out there width minus the area that the appropriate sidebar requires.
So what if we might specify 100% -200px as our width? Utilizing detrimental margins, we are able to create simply that impact. No, actually!
The CSS we’ll want#section4
Let’s take a stab on the CSS we’re going to want to tug this off. As promised, we’re
going to set the width of our container div to 100%, float it left, and provides it a detrimental proper margin of -200px. It is rather
necessary that we float this aspect, as margins (and thus, detrimental margins) are dealt with in a different way for floated and inline parts than they’re for non-floated block-level parts.
The detrimental proper margin has extra to do with permitting the sidebar to drift up
into this aspect’s area than it does with any positioning/look of the aspect itself, as will be seen in Instance 2 beneath. We float our sidebar to the appropriate and set its width to the 200px we simply created for it. Lastly, we give our footer div a clear: each type to make sure that it stays beneath the remainder of our content material,
no matter which aspect is longer. We’re additionally going to offer our header and footer background colours to set them other than the remainder of the web page.
#header {
background: #d7dabd;
}
#container {
width: 100%;
float: left;
margin-right: -200px;
}
#sidebar {
width: 200px;
float: proper;
}
#footer {
background: #d7dabd;
clear: each;
}That CSS will give us the ends in Instance 2. As you possibly can see,
we now have to push the content material space away from the appropriate aspect of the doc. We’ve chosen to make use of one other div to do that, as browser
help will probably be higher for this technique than there may be for a number of the options. Thus we modify our XHTML to appear like this:
<div id="container">
<div id="content material">
<h1>content material</h1>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Phasellus varius eleifend.</p>
<p class="final">Donec euismod.
Praesent mauris mi, adipiscing non,
mollis eget, adipiscing ac, erat.
Integer nonummy mauris sit.</p>
</div>
</div>We now add proper margin and a background coloration to the content material div, which ought to place it simply the place we want it and separate it from the sidebar.
#content material {
background: #f1f2ea;
margin-right: 200px;
}Heading off issues#section5
Leaping a bit forward of the visible examples, we’re going to repair one other downside. We have to set the primary aspect in our content material div to don’t have any prime margin and the final aspect to don’t have any backside margin. In our case, we’re merely going to
set the margin-top of the h1 aspect to 0, and arrange a category for the final paragraph of our content material div, which is able to set the
margin-bottom to 0. Now that we’ve executed that, Instance 3 is prepared to take a look at.
It’s getting higher, however after all you’ll have seen that the appropriate sidebar doesn’t prolong all the best way to the underside. Due to the
little trick of utilizing pictures as background, as proven by Dan Cederholm’s
“Fake Columns,” we are able to simply repair this downside.
First, we create the beneath picture. It’s 200 pixels huge as a result of the width should correspond to the width of our sidebar.
To drag off Dan’s trick, we add a wrapper div across the container and sidebar divs, and likewise add a div with clear: each
set on it beneath them. Our XHTML will now appear like this:
<div id="wrapper">
<div id="container">
<div id="content material">
<h1>content material</h1>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Phasellus varius eleifend.</p>
<p class="final">Donec euismod.
Praesent mauris mi, adipiscing non,
mollis eget, adipiscing ac, erat.
Integer nonummy mauris sit.</p>
</div>
</div>
<div id="sidebar">
<h1>sidebar</h1>
<ul>
<li>hyperlink one</li>
<li>hyperlink two</li>
</ul>
</div>
<div class="clearing"> </div>
</div>Now that we’ve executed that, we are able to add the background to this wrapper div. We set the background to repeat-y and to be
positioned to the appropriate. To repair a bug in Web Explorer, we additionally want so as to add the identical background to our container div.
#wrapper {
background:
#f1f2ea url(background.gif) repeat-y proper;
}
#container {
width: 100%;
background:
#f1f2ea url(background.gif) repeat-y proper;
float: left;
margin-right: -200px;
}W’ll additionally arrange the types for our clearing div to make sure that the footer will fall beneath each columns and that they are going to show accurately:
.clearing {
peak: 0;
clear: each;
}That may give us a really nice-looking two-column liquid structure that degrades very nicely within the absence of
CSS. Check out Instance 4. Merely including some borders and padding
to the weather may give you a fantastic begin to a liquid two-column structure. After all, if we might have needed the sidebar on the appropriate,
we might merely have to alter the floats and margins to their opposites. The place we see float: left, we might change to drift: proper;
the place we see margin-right: 200px, we might change to margin-left: 200px, and so forth.
Getting trickier: the three-column model#section6
However what if we are able to take this even additional and try a three-column structure with a fluid content material space? Not solely can we do that, we are able to do it surprisingly simply! We’ll have to make a couple of last tweaks to our
XHTML by including a couple of extra divs — after which we’ll be prepared to write down some extra CSS.
<div id="outer_wrapper">
<div id="wrapper">
<div id="container">
<div id="content material">
<div id="left">
<h1>navbar</h1>
<ul>
<li>hyperlink one</li>
<li>hyperlink two</li>
</ul>
</div>
<div id="primary">
<h1>content material</h1>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Phasellus varius eleifend.</p>
<p class="final">Donec euismod.
Praesent mauris mi, adipiscing non,
mollis eget, adipiscing ac, erat.
Integer nonummy mauris sit.</p>
</div>
</div>
</div>
<div id="sidebar">
<h1>sidebar</h1>
<p>Right here be your sidebar.
Add no matter content material it's possible you'll need.</p>
</div>
<div class="clearing"> </div>
</div>
</div>Re-implementing fake columns#section7
Once more, since we are going to need all our columns to have equal heights, we’re going to create extra
fake columns. We’ve created the next two pictures:
As you possibly can see by the XHTML above, we’ve added one other wrapper div along with the left sidebar div, and a div across the center content material. Our new wrapper div will include the background picture for
our new column, positioned to the left and repeated all the way down to the underside of the div. Additionally, we’ve eliminated the background from the content material div and can now add the specified background coloration to our outer_wrapper div:
#outer_wrapper {
background: #fff url(background_3.gif) repeat-y left;
}
#wrapper {
background: url(background_2.gif) repeat-y proper;
}The white background will present via the place the picture will not be being displayed, thus coloring our center column. We’re additionally going so as to add the backgrounds to our interior parts to keep away from some ugly gaps which might be current in most variations of Web Explorer.
#container {
width: 100%;
float: left;
margin-right: -200px;
background: url(background_2.gif) repeat-y proper;
}
#content material {
margin-right: 200px;
background: url(background_3.gif) repeat-y left;
}We then add these easy types to once more use margins to place our left and center columns the place wanted.
#primary {
margin-left: 150px;
}
#left {
width: 150px;
float: left;
}Lastly, we’ve added the next types to our header and footer divs to offer the structure a extra completed look:
border: 1px strong #cecea5;
Check out Instance 5 and be happy to view the supply to see it in its entirety.
After all, utilizing the @import rule in your last websites can be a good suggestion to maintain your website from getting displayed with its pants down in legacy browsers.
As you possibly can see, detrimental margins are an under-utilized side of CSS that add one other structure choice for individuals who need to management the order of parts within the supply code and who don’t thoughts including a non-semantic wrapper div to take action.