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

The container and clipping

At the moment the container resizes to show all of the child objects it contains. What if we set the container to a size that isn't big enough for the child objects to display?

The answer is that by default the child objects simply overflow the container, assuming that the page has enough space for them. For example, if we change the container div to be in a class of the same name we can set a style for it:

<div class="container">
<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>

The style can specify a size and a border so that we can see the container:

<style type="text/css">
.container {
width:40px;
height:60px;
border:1px solid gray;
 }
</style>

If you now try this out you will have to look hard to see a difference as the square divs overflow the container. If you look carefully you can just see the border of the container at the top right.

 

overflow

 

Most programmers find this behaviour odd as containers usually clip their contents. After all what is the point of having a container if its contents just leak out? To set clipping on you need to use the overflow attribute which can be set to visible, i.e. do not clip; hidden, i.e. clip; auto, i.e add a scrollbar; and inherit.

So to clip to the size of the container we simply change the style to:

.container {
width:40px;
height:60px;
border:1px solid gray;
overflow:hidden;
}

This produces the result:

 

clip

 

You can try out the auto value if you want to, but it just adds a scrollbar.

Float

Now we come to the most confusing part of the default vertical layout. You can make blocks behave in a different way by specifying the float attribute, which can take the values left or right depending on which side of the page you want the block to move to.

The rules for a float are simple. If you specify a left or right float then the block moves to the vertical position it would have had without the float and then moves as far to the left or right as it can without overlaying any other floated blocks at the same vertical position. The floated block doesn't take part in the default vertical layout with the result that the next block occupies the same vertical position as the floated block. As far as other blocks are concerned the floated block plays no part in the vertical layout - it is as good as not there.

This is more complex than you might think because how things behave depend on which blocks have the float attribute. For example, add float:right to just the second block, i.e. the red block,

.container {
width:400px;
height:300px;
border:1px solid gray;
overflow:hidden; }
<div class="container">
<div style="width:50px;
height:50px;
background-color:blue;">
</div>
<div style="float:right;
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>

What you get is:

 

floatright1

 

This makes sense but notice that the green block is where the red block used to be - it has simply ignored the red block.

To see that this is the case just try changing the red block's float to left. What do you think will happen?



Last Updated ( Monday, 07 January 2013 )
 
 

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