Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About BTH User Agreement Privacy Site Map Contact Advertise Here News Feeds

HTML5 Solutions: Essential Techniques for HTML5 Developers

HTML5 brings the biggest changes to HTML in years. Web designers now have new techniques, from displaying video and audio natively in HTML, to creating realtime graphics on a web page without a plugin.

This book provides a collection of solutions to all of the most common HTML5 problems. Every solution contains sample code that is production-ready and can be applied to any project.

Click Here

Set an Element's Display Property

By Stephen Bucaro

Although it may not seem apparent, everything on a webpage is in a box. It's apparent that certain elements, like tablesanonymous box.

When you load a webpage into a browser, it flows the boxes onto the page. The normal flow is from left-to-right from top-to-bottom. This type of flow is called inline. But some html elements flow as a block. A box that flows as a block has an embedded line-return before and an embedded line-return after its box.

An example of an inline element is a <span>. A span, and its contents will flow inline on the webpage from left-to-right from top-to-bottom along with the other inline elements. It will flow along the same baseline as text on the webpage.

<span style="border-style:solid; border-width:2px; display:block; width:250px;">
Element One Element One Element One Element One
Element One Element One Element One Element One
Element One Element One Element One Element One
</span>

Shown above is code for a span element. A span element is an inline element, but setting its display property to block and setting its width property makes it an inline-block in Internet Explorer

An example of a block element is a <div>. A div, and its contents will break the left-to-right from top-to-bottom flow pattern and move to the left side of the webpage. It will also cause the next element following the div in the html to move to the left side of the webpage. The <p> paragraph is another block element.

Block elements

The nice thing about a block element is that you can give it a width and height. The W3C specification does not accept the width property for inline elements. An inline element will stretch horizontally as long as required to flow its contents. The W3C specification does not accept the height property for inline elements. The height of an inline element is the same as the line-height.

Inline elements in Internet Explorer with
width value accepted.