Specifying size and position with CSS

As you know, CSS is the language we use to ‘style’ our page (forgot? Check our CSS intro), i.e. define how all the elements should look exactly.

We will now have a look at one aspect of CSS: using it for defining size and positioning.

HTML Block versus inline elements

The browser views most HTML elements as belonging to one of two ‘display modes’: block elements and inline elements.

Block elements are elements that start (and end) with a new line when displayed in the browser. The main block elements are: <div>,<p> and <table>.

Out of these, <div> elements with a class or id attribute on them, and CSS rules setting their position and dimensions, are central to web design, since <div> is like the ‘template’ block element.

In the following site layout sketch, generously stolen from Jason Beaird’s  page on web anatomy), all the blocks will typically be divs with id of class attributes, and CSS defining their size and position:

layout-anatomy

Pretty huh? In many websites, those names of the block written next to them, are even exactly used for class and id attributes!

Inline elements are meant to fit in the ‘flow’ of the text, and the main examples are <a> for links, the typography elements of <strong> and <em> we saw earlier, and <div>’s stupid little brother, the generic <span> element, existing only to get a class attribute and be styled.

Setting height and width using CSS

Block elements like <div> are by default put on a new line, and have a width stretching all across the page. However, we can specify their size ourselves using the width and height rules. Sizes are typically represented in:

  • percentage (%) of their ‘container’ element (which is often the entire page) or
  • in pixels (px).

Here is the CSS we would use to create a ‘header’ block (not to be confused with the <head> tag in HTML) that stretches all across the page, and is 100 pixels high. There is only one header on the page, so we can use the id attribute rather than class:

<div id="header"><h1>Welcome to my awesome site!</h1></div>
<h2>What is love?</h2>
<p>Baby don't hurt me, don't hurt me, no more.</p>
<style>
#header {
width:100%;
height:100px;
background-color:#aaddff; /* let's make it blue to stand out */
}
</style>

This would look something like this in the browser:

Screen Shot 2014-01-20 at 19.03.44

Floating elements

Sometimes we don’t want a block to be entirely on its own line, but rather have the text going around it. We can achieve this by floating the element, using float:left; or float:right;.

Let’s get fancy and add a floating menu with some links to our code, and since I am writing this on MLK day, some more text to illustrate the effect. Lots of things going on here, study this well!

<div id="header"><h1>Welcome to my awesome site!</h1></div>

<div class="interestinglinks">
Interesting links:
<ul>
<li><a href="http://www.wikipedia.org">Wikipedia</a></li>
<li><a href="http://www.google.com">Google</a></li>
</ul>

</div>
<h2>I have a dream</h2>
<p>
I am happy to join with you today in what will go down in history as the greatest demonstration for freedom in the history of our nation.
</p>
<p>
Five score years ago, a great American, in whose symbolic shadow we stand today, signed the Emancipation Proclamation. This momentous decree came as a great beacon light of hope to millions of Negro slaves who had been seared in the flames of withering injustice. It came as a joyous daybreak to end the long night of their captivity.
</p>
<p>
But one hundred years later, the Negro still is not free. One hundred years later, the life of the Negro is still sadly crippled by the manacles of segregation and the chains of discrimination. One hundred years later, the Negro lives on a lonely island of poverty in the midst of a vast ocean of material prosperity. One hundred years later, the Negro is still languished in the corners of American society and finds himself an exile in his own land. And so we've come here today to dramatize a shameful condition.
</p>
<style>
#header {
width:100%;
height:100px;
background-color:#aaddff; /* let's make it blue to stand out */
}

.interestinglinks {
float:left;
width:150px;
height:100px;
background-color:#ffffaa;
}
</style>

As you will see, things are looking real nice real fast:

Screen Shot 2014-01-20 at 19.16.07Conclusions

We have just started scratching the surface here, and positioning of elements with CSS is really quite an extensive subject, even more so since everybody and their mother started surfing  from their cellphone or tablet.

With your keen eye for design, you probably couldn’t help but noticing that the last example was kinda ugly because the text is crammed to the edges too much. Well observed, young grashopper!

We will see how to add some much-needed ‘breathing space’ to our elements in the next lesson about the CSS box model: margin, border and padding.

Advertisements

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s