HTML5/CSS Layout
HTML5/CSS Layout
Written by David Conrad   
Article Index
HTML5/CSS Layout
Float
In-line elements

 

For example if you take six blocks and float all of them to the left then you would end up with a line of six blocks with a possible wrap around to the "next line" if they didn't fit in the container.

 

loaftleft3

 

However if you now add a clear:both or a clear:left to the yellow block it will start a new line:

 

loaftleft4

 

The HTML is:

<div class="container">
 <div style="float:left;
             width:50px;
             height:50px;
             background-color:blue;">
 </div>
 <div style="float:left;
             width:50px;
             height:50px;
             background-color:red;">
 </div>
 <div style="float:left;
             width:50px;
             height:50px;
             background-color:green;">
 </div>
 <div style="clear:both;
             float:left;
             width:50px;
             height:50px;
             background-color:yellow;">
 </div>
 <div style="float:left;
             width:50px;
             height:50px;
             background-color:blue;">
 </div>
 <div style="float:left;
             width:50px;
             height:50px;
             background-color:red;">
 </div>
</div>

 

All of the above layout rules work if the blocks have different heights. In this case the tallest block is used to set the height of the space used by the blocks.

For example if you make the first red block much taller than the rest the result of the previous layout is:

 

loaftleft5

 

In-line elements

The above rules are about how block elements interact during layout. Most accounts of how layout works, floats in particular, tend to concentrate on how in-line elements interact with blocks, text in particular.

First recall that the rules for in-line elements and non-floated blocks specify that in-line elements start new layout lines, just like non-floated blocks. So if we have six non-floated blocks they form a stack and any text starts underneath the stack.

The rules for in-line elements and floated blocks are also fairly easy. They simply wrap around any block elements that are floated to the left or right. Any in-line element that has a clear set avoids all of the corresponding floated blocks and is position on a new layout line.

For example, if you place two paragraph blocks of text inside the container with the six floated blocks of the last example the result is:

 

text1

 

You can see that the two paragraphs justify around the blocks. If you want the second paragraph to avoid the floated blocks and start below the last row of floats you can set clear:

<p style="clear:both";>

This produces the result:

 

text2

 

There are more complicated examples that you can think up but once you have the idea of how the default vertical layout works, and how it can be changed using floated blocks, then you can generally understand what is going on.

Is this stuff useful?

Well obviously using floated blocks makes text layout more flexible and sophisticated but there is another use.

In the examples we simply used an empty div with a colored background to show where the block elements were. In most layouts the block elements would contain other child elements. What this means is that you can use floated block elements to create complex grid-like layouts - more of this in another article.

If you are thinking, why not use a table, then you are missing the whole point of HTML and CSS. Remember that HTML isn't about layout and HTML tables should be used for tabular data. If you want a grid layout then one option is to use CSS to create floated blocks with a regular pattern but there are other alternatives as we shall see.

 

cssicon

 

Related Articles

jQuery 3 - Selectors 

CSS For Programmers - Building a Custom CSS Button

 

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on, Twitter, FacebookGoogle+ or Linkedin.

 

Banner


Discover How Web Apps Perform With Chrome User Experience Report
25/10/2017

Unveiled at the Chrome Dev Summit in San Francisco, the Chrome User Experience Report is intended to let developers discover how their web apps perform in the wild by providing data collected from the [ ... ]



Firefox Quantum - Fast For Good
15/11/2017

Firefox 57, aka Quantum, has arrived and it does live up to its claims - both of being twice as fast as it used to be and being faster than Chrome. It also seems stable, in the sense of not crashing,& [ ... ]


More News

 
 

 

blog comments powered by Disqus



Last Updated ( Thursday, 23 February 2017 )
 
 

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