HTML5/CSS Layout
Written by David Conrad   
Article Index
HTML5/CSS Layout
The container and clipping
Interactions
In-line elements

 

The HTML default layout rules can be a mystery. They are usually introduced to users late on and as part of achieving something complicated and this tends to obscure the principles. So if you want to get to grips with floated, non-floated blocks, clipping and clear then read on.

One of the problems with trying to get to grips with HTML/CSS is that it is often introduced slowly and with easy and obvious examples. Only later when you are trying to implement something complex do you realize that you never fully understood what is going on. What exactly the rules are that you are playing by?

In this article I am going to try to make the rules as clear as possible in the style that a programmer might use to think about layout in general. You could say that the purpose is to describe HTML/CSS as a layout panel or frame.

Be warned, however, that the layout rules are fairly strange when compared to the sort of thing you encounter in a flow panel or a grid.

Containers

The first thing to say is that all layout in HTML is with respect to a block container. Block containers are the layout panels of HTML.

The confusing thing is that block container are also block elements which are the objects that the container contains and formats.

Put simply a <div> can be a container and it can be an element within a container.

Other block elements include image tags, table tags, forms and so on.

Another complication is that HTML gave up being about how things are displayed a long time ago. In principle everything that controls the way things are displayed is part of the CSS. So in theory an HTML page is just a nested set of block elements. (We are ignoring in-line elements for the moment as their layout properties are simple to understand once you know how block elements work.)

So in principle you can regard a structure like:

<div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
</div>

as having nothing at all to say about layout. All it tells you is that there are four divs nested within a top level div. Of course, there is a default layout so this isn't strictly true.

Regarding each div as a container the basic rule is that the size of the container is adjusted to accommodate what it is nested in side it.

This is usually a good way to work but for our examples we need to give the divs a known size without having to find suitable content so let's simply use the width and height attributes to size them.

The default layout method for any container is "vertical". The rule is that unless the size of the container is specified it takes the full available width and as much height as need to contain its child elements.

Each child element also takes the full width of the container and hence they are organized one above the other in a vertical stack on the page.

To see this in action we need to give each of the inner divs a height and a color:

<div>
<div style="height:50px;
background-color:blue;">
</div>
<div style="height:50px;
background-color:red;">
</div>
<div style="height:50px;
background-color:green;">
</div>
<div style="height:50px;
background-color:yellow;">
</div>
</div>

The result is:

 

bars

 

Notice that you have to determine height for a child element either by setting it explicitly or by putting something inside it that has a determined height.Also notice that the container object set its size to accommodate its child elements.

Also notice the size of a block is determined by the CSS block layout model which includes margins, padding and borders. While this isn't really part of this articles topic you need to be aware that it can change the final size of a block.

If you set the width of a child element then the width that it occupies doesn't change but the way it looks does. In other words if you set each of the divs to say 50px wide they appear as squares but each one still starts a new line. To see this change the HTML to:

<div>
<div style="width:50px;
height:50px;
background-color:blue;">
</div>
<div style="width:50px;
height:50px;
background-color:red;">
</div>
<div style="width:50px;
height:50px;
background-color:green;">
</div>
<div style="width:50px;
height:50px;
background-color:yellow;">
</div>
</div>

This produces the result:

 

 

squares

<ASIN:0321772741>

 



Last Updated ( Monday, 07 January 2013 )
 
 

   
Copyright © 2014 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.