How to Manage Your Webpage’s Layout with CSS

Published March 2, 2015 by saurav.roy.


Before CSS was out, people used tables in order to layout their webpages. Now, the introduction of CSS changed all that. CSS provides us with a lot of flexibility to position the elements in a webpage. In this tutorial we’re going to dive into the two main CSS properties used to defining layout of webpages: the position property and the float property.

The position CSS property
The position property is primarily used to define how an element is treated in the flow of the page. There are four main values that could be used with the position property.
static: The default value of any element. This value renders the element in its normal order as it appears inside the HTML.
relative: This is similar to static but the element can still be moved from its original position with the properties top, right, bottom and left.
absolute: This option removes the element out of the normal flow of the HTML and lets you control its position with top, right, bottom and left.
fixed: This value pretty much behaves absolute but it will also position the element in reference to the browser window and not the webpage. So the fixed elements always stay where they are on the screen even when you scroll the page.

With those options in mind we can create a two column layout easily with absolute positioning if we have something like the following HTML:

 <div id="navigation">
    <ul>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
	<li><a href="#">Link4</a></li>
    </ul>
 </div>
 <div id="content">
    <h1>Header of Column2</h1>
    <p>Some Text inside column 2</p>
 </div>

By applying the following simple CSS:

#navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;}
#content {
    margin-left: 200px;}

We will see that this will set the navigation bar to the left and set its width to 200 pixels. Because the navigation is absolutely positioned, it has nothing to do with the flow of the rest of the page. All that is needed is to set the left margin of the content area to be equal to the width of the navigation bar.
Isn’t that easy? And the good news is we’re not limited to this two-column approach. With clever positioning, we can arrange as many blocks as we like. If we wanted to add a third column, for example, we could add a “navigation2” block to the HTML and change the CSS to:

#navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}
#navigation2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
}
#content {
    margin: 0 200px;
}

The only downside to absolutely positioned boxes is that because they live in a world of their own, there is no way to accurately determine where they end. If we were to use the examples above and all of our pages had small navigation bars and large content areas, we would be okay, but, especially when using relative values for widths and sizes, we often have to abandon any hope of placing anything, such as a footer, below these boxes. If we wanted to do such a thing, one way would be to float the divs, rather than absolutely positioning them. Which brings us to the second part of our tutorial.

The float CSS property
Floating a box will shift it to the right or left of the container div, with any surrounding content flowing around it.
Floating is normally used to shift around smaller divs within a page, some navigation links to the right of the container, but it can also be used with bigger divs, such as navigation columns.

The float property takes only two values, either float:left or float:right.
Using the same HTML we wrote earlier, we could apply the following CSS:

#navigation {
    float: left;
    width: 200px;
}
#navigation2 {
    float: right;
    width: 200px;
}
#content {
    margin: 0 200px;
}

However, floating introduces a small problem with container boxes. That means, if you have a container with all floating elements inside it, the container box won’t wrap around the boxes. Its height or width won’t increase to take the full size of the floating elements inside. Luckily, there is a fix for that, the clear property.

clear:left; will clear left floated boxes
clear:right; will clear right floated boxes
clear:both; will clear both left and right floated boxes.

Adding an extra div inside the container with the CSS property clear:both will clear the floating elements and allow the container to wrap correctly around them. So if, for example, we wanted a footer in our page, we could add a footer div in the HTML as follows:

<div id="footer">
    <p>Footer Text</p>
</div>

and then add the following CSS

#footer {
    clear: both;
}

There we have it! A footer that will appear underneath all columns, regardless of the length. Hope you enjoyed this tutorial. Check this codepen for a full preview.

Share and Enjoy !

0Shares
0 0

Understanding the CSS Float Property

Published March 18, 2010 by saurav.roy.

I want to take a moment today and talk about CSS floats. They’re used everywhere in modern web design, from navigation bars to building CSS columns and dozens of techniques in between. However, despite their prevalence, not everyone understands exactly how they work, or what the repercussions might be from using them. So let’s remedy that. You can see all the examples from this article here. Read On…

Share and Enjoy !

0Shares
0 0

A Full-Width Centered Navigation Bar

Published December 17, 2009 by saurav.roy.

Centered Navigation Bar - Click to see it in action!

Right around the time I was developing the code for the Super Simple Navigation Bar I wrote about a while back, a friend came to me with an interesting problem. He needed a horizontal navigation bar like the one I was creating, with the following changes:

  1. The navigation bar background should stretch the full width of the screen (not just the width of the centered content area), but
  2. The navigation elements themselves should still be centered over the content area.

The sketch below outlines the basic design concept. Read On…

Share and Enjoy !

0Shares
0 0

The CSS-Only Accordion Effect

Published April 9, 2008 by saurav.roy.

Update: I’ve created an advanced version of this technique that works in IE6! Read more here.

The Accordion Effect is fast becoming one of the most commonly used (and perhaps abused?) effects of the Web 2.0 world. Most JavaScript frameworks make such an effect fairly easy to pull off – heck, MooTools even built their reputation on it in the early days. So what makes this accordion effect special? It doesn’t require a single line of JavaScript.

First off, what is an “accordion” effect? Generally speaking, the accordion effect takes several larger elements and then compresses them into a small space so that only a small portion (like a heading) of most or all of the elements is visible. Then, when the user interacts with that element — either by clicking on it or maybe only mousing over — the accordion expands so that the element of interest is visible, and the other elements shrink down automatically. When it’s in use, it looks a bit like an accordion expanding and contracting: hence the name.

Our accordion will work exactly the same way: all of the elements will be partially visible when the user loads the page. And then when they mouse over a particular section, it will instantly expand – and the other elements will contract – to make reading more easy.

example of accordion effect before and after the user mouses over it

So how do we accomplish this trick? First, we start with our XHTML, which just consists of a couple of divs with some IDs applied:

<div id="accordion">
	<div id="part1">
		<p>This text is in part 1.</p>
	</div>
	<div id="part2">
		<p>This text is in part 2.</p>
	</div>
	<div id="part3">
		<p>This text is in part 3.</p>
	</div>
	<div id="part4">
		<p>This text is in part 4.</p>
	</div>
</div>

My first div defines where my accordion starts and ends. The divs nested inside are just parts of my accordion – they don’t even technically need IDs unless I want to style them differently. That’s all the XHTML it takes!

So now, let’s start building our accordion. We start by defining the physical limitations of our space:

#accordion { 
	width: 500px; 
	margin: 100px auto; }

All I’ve done is give my accordion a specific width and centered it in the page for a nice visual effect. Now, I have to create the default state for the divs inside of my accordion:

#accordion div {
	float: left;
	width:25%;
	height: 300px;
	overflow: hidden;}

This snippet floats all of my divs to the left and gives them a specific width and height. I’ve chosen a width of 25% because I have four elements in my accordion, so they all split that width up evenly by default. If I’d had five elements, I would have used 20%, and so on. My height of 300 pixels also becomes the height of my accordion div.

The overflow: hidden part here is also crucially important. This is what prevents my divs from either resizing to fit their content or spilling their content out of the containing div and onto our page. It also creates a nice visual effect… people will wonder what content they’re missing, and will mouse over the area to investigate.

extra text is hidden from the user, inspiring curiosity.

So now that we’ve created our default state, we need to create our hover or “active” state. This requires two CSS rules. The first looks like this:

#accordion:hover div { width: 20px; }

We’re using the :hover pseudo-class here in a pretty creative way – we’re telling all of the divs inside of the div we’re hovering over to change. Specifically, we’re shrinking them all down to 20 pixels to make room for our expanded accordion section. So now we just need to make sure it expands:

#accordion:hover div:hover {
	width: 440px;
	overflow: auto; }

The :hover pseudo-class comes into play here again. Now, we’re applying styles to an element we’re hovering over, inside of an element we’re hovering over. We’re styling this element differently than our others by giving it a specific width – 440 pixels, i.e. 500 pixels minus the 20 pixels taken up by our other three divs – and setting its overflow to “auto.” These two classes cause our active div to expand, and then give it a scroll bar if the content is too long.

And that’s all there is to creating a CSS-only accordion box! If you’d like to see it in action, click here. The only change I’ve made to the full version is I’ve added a few background styles and some interior padding to each of the accordion sections to make them stand out and look a little more attractive.

This example creates a horizontal accordion box. But it’s just as easy to create a vertically oriented accordion. All we really need to do is eliminate the floats on our nested divs and turn most of our width tags into height tags. Here is the markup:

#accordion {
	width: 500px;
	height: 400px;
	margin: 20% auto; }
#accordion div {
	height:25%;
	overflow: hidden;}
#accordion:hover div {
	height: 20px; }
#accordion:hover div:hover {
	height: 340px;
	overflow: auto; }

And you can see it in action here.

As with any trick this cool, there are some caveats. Most significantly: this technique does not work in IE6, (update: now works in IE6! Read more here) because IE6 doesn’t support hover states on anything other than anchors. Therefore, you can make it work if you’re willing to make a sacrifice: if you wrap all of your divs in anchor tags, and then apply the hover state to those anchors instead of your divs, the technique should work the same (I haven’t tried it, though). However, that wouldn’t be particularly semantic or valid, so I’m not showing it here.

Also, if you apply any padding or borders to your #accordion div, that can cause some problems. The border and padding are part of your div, and therefore part of your :hover class. However, if you’re hovering over the containing div’s padding, you aren’t hovering over one of the sections of your accordion – meaning all of your interior divs will shrink down to their smallest size, and none will grow to fill the space. It took me half an hour of debugging to figure this one out. :)

So there you have it. Use it, share it, love it. And let me know in the comments if you come up with a particularly interesting or attractive implementation – mine is obviously pretty simple!

Share and Enjoy !

0Shares
0 0