Friday, August 12, 2016

The display property is the most important CSS property for controlling layout.

The display Property

The display property specifies if/how an element is displayed.
Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

Click to show panel

This panel contains a <div> element, which is hidden by default (display: none).
It is styled with CSS, and we use JavaScript to show it (change it to (display: block).

Block-level Elements

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

The <div> element is a block-level element.

Examples of block-level elements:

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary.
This is an inline <span> element inside a paragraph.
Examples of inline elements:

<span>
<a>
<img>

Display: none;

display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them. Take a look at our last example on this page if you want to know how this can be achieved.
The <script> element use display: none; as its default.

Override The Default Display Value

As mentioned, every element has a default display value. However, you can override this.
Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow the web standards.
A common example is making inline <li> elements for horizontal menus:

Example

li {
display: inline;}

Note: Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display: block; is not allowed to have other block elements inside it.

The following example displays <span> elements as block elements:

Example

span {
display: block;}

The following example displays <a> elements as block elements:

Example

a {
display: block;}

Hide an Element - display:none or visibility:hidden?

Hiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there:

Example

h1.hidden {
display: none;}

visibility:hidden; also hides an element.
However, the element will still take up the same space as before. The element will be hidden, but still affect the layout:

Example

h1.hidden {
visibility: hidden;}

Wednesday, August 10, 2016

some layout tips

center an element:
style="margin:auto;"

set a div that only fit its contents:
style="display:inline-block;"

div without content have width:
insert   into the div

Using DIV and CSS to make a table

In modern web development I'm coming across this pattern ever more often. It looks like this:

<div class="table">
    <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
</div>

And in CSS there is something like:

.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }

HTML div Tag

Example

A section in a document that will be displayed in blue:

<div style="color:#0000FF">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
Try it Yourself »

Definition and Usage

The <div> tag defines a division or a section in an HTML document.

The <div> tag is used to group block-elements to format them with CSS.

Browser Support

Element

<div> Yes Yes Yes Yes Yes

Element
<div>	Yes	Yes	Yes	Yes	Yes

Tips and Notes

Tip: The <div> element is very often used together with CSS, to layout a web page.

Note: By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS.

Differences Between HTML 4.01 and HTML5

The align attribute not supported in HTML5.

Attributes

Attribute Value Description

align left
right
center
justify Not supported in HTML5.
Specifies the alignment of the content inside a <div> element

Attribute	Value	Description
align	left right center justify	Not supported in HTML5. Specifies the alignment of the content inside a <div> element

CSS layout - float and clear

« Previous

Next Chapter »

The float property specifies whether or not an element should float.

The clear property is used to control the behavior of floating elements.

The float Property

In its simplest use, the float property can be used to wrap text around images.

The following example specifies that an image should float to the right in a text:

Example

img {
    float: right;
    margin: 0 0 10px 10px;}

Try it Yourself »

The clear Property

The clear property is used to control the behavior of floating elements.

Elements after a floating element will flow around it. To avoid this, use the clear property.

The clear property specifies on which sides of an element floating elements are not allowed to float (thuộc tính clear chỉ ra side nào của một element, mà các element khác không được float)

Example

div {
    clear: left;}

Try it Yourself »

The clearfix Hack - overflow: auto;

If an element is taller than the element containing it, and it is floated, it will overflow outside of its container.

Then we can add overflow: auto; to the containing element to fix this problem:

Example

.clearfix {
    overflow: auto;}

Try it Yourself »

Web Layout Example

It is common to do entire web layouts using the float property:

Example

div {
    border: 3px solid blue;}

.clearfix {
    overflow: auto;}

nav {
    float: left;
    width: 200px;
    border: 3px solid #73AD21;}

section {
    margin-left: 206px;
    border: 3px solid red;}

Try it Yourself »

CSS Layout - float and clear

« Previous

Next Chapter »

The float property specifies whether or not an element should float.

The clear property is used to control the behavior of floating elements.

The float Property

In its simplest use, the float property can be used to wrap text around images.

The following example specifies that an image should float to the right in a text:

Example

img {
    float: right;
    margin: 0 0 10px 10px;}

Try it Yourself »

The clear Property

The clear property is used to control the behavior of floating elements.

Elements after a floating element will flow around it. To avoid this, use the clear property.

The clear property specifies on which sides of an element floating elements are not allowed to float:

Example

div {
    clear: left;}

Try it Yourself »

The clearfix Hack - overflow: auto;

If an element is taller than the element containing it, and it is floated, it will overflow outside of its container.

Then we can add overflow: auto; to the containing element to fix this problem:

Example

.clearfix {
    overflow: auto;}

Try it Yourself »

Web Layout Example

It is common to do entire web layouts using the float property:

Example

div {
    border: 3px solid blue;}

.clearfix {
    overflow: auto;}

nav {
    float: left;
    width: 200px;
    border: 3px solid #73AD21;}

section {
    margin-left: 206px;
    border: 3px solid red;}

Try it Yourself »

Tuesday, August 9, 2016

learnlayout.com

This site teaches the CSS fundamentals that are used in any website's layout.

I assume you already know what selectors, properties, and values are. And you probably know a thing or two about layout, though it may still be a rage-provoking activity for you. If you want to learn HTML and CSS from the beginning, you should check out this tutorial. Otherwise, let's see if we can save you some fury on your next project.

HTML layouts using table and div - tutorialpoint

A webpage layout is very important to give better look to your website. It takes considerable time to design a website's layout with great look and feel.

Now a days, all modern websites are using CSS and Javascript based framework to come up with responsive and dynamic websites but you can create a good layout using simple HTML tables or division tags in combination with other formatting tags. This chapter will give you few examples on how to create a simple but working layout for your webpage using pure HTML and its attributes.

HTML Layout - Using Tables

The simplest and most popular way of creating layouts is using HTML <table> tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like.

Example

For example, the following HTML layout example is achieved using a table with 3 rows and 2 columns but the header and footer column spans both columns using the colspan attribute:

<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width="100%" border="0">
  <tr>
    <td colspan="2" bgcolor="#b5dcb3">
      <h1>This is Web Page Main title</h1>
    </td>
  </tr>
  <tr valign="top">
    <td bgcolor="#aaa" width="50">
      <b>Main Menu</b><br />
      HTML<br />
      PHP<br />
      PERL...
    </td>
    <td bgcolor="#eee" width="100" height="200">
        Technical and Managerial Tutorials
    </td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#b5dcb3">
      <center>
      Copyright © 2007 Tutorialspoint.com
      </center>
    </td>
  </tr>
</table>
</body>
</html>

This will produce following result:

This is Web Page Main title
Main Menu HTML PHP PERL...	Technical and Managerial Tutorials
Copyright © 2007 Tutorialspoint.com

Multiuple Columns Layout - Using Tables

You can design your webpage to put your web content in multiple pages. You can keep your content in middle column and you can use left column to use menu and right column can be used to put advertisement or some other stuff. This layout will be very similar to what we have at our website tutorialspoint.com.

Example

Here is an example to create three column layout:

<!DOCTYPE html>
<html>
<head>
<title>Three Column HTML Layout</title>
</head>
<body>
<table width="100%" border="0">
  <tr valign="top">
    <td bgcolor="#aaa" width="20%">
      <b>Main Menu</b><br />
      HTML<br />
      PHP<br />
      PERL...
    </td>
    <td bgcolor="#b5dcb3" height="200" width="60%">
        Technical and Managerial Tutorials
    </td>
    <td bgcolor="#aaa" width="20%">
      <b>Right Menu</b><br />
      HTML<br />
      PHP<br />
      PERL...
    </td>
   </tr>
<table>
</body>
</html>

This will produce following result:

Main Menu
HTML
PHP
PERL...

Technical and Managerial Tutorials

Right Menu
HTML
PHP
PERL...

HTML Layouts - Using DIV, SPAN

The <div> element is a block level element used for grouping HTML elements. While the <div> tag is a block-level element, the HTML <span> element is used for grouping elements at an inline level.

Although we can achieve pretty nice layouts with HTML tables, but tables weren't really designed as a layout tool. Tables are more suited to presenting tabular data.

Note: This example makes use of Cascading Style Sheet (CSS), so before understanding this example you need to have a better understanding on how CSS works.

Example

Here we will try to achieve same result using <div> tag along with CSS, whatever you have achieved using <table> tag in previous example.

<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>
<body>
<div style="width:100%">
  <div style="background-color:#b5dcb3; width:100%">
      <h1>This is Web Page Main title</h1>
  </div>
  <div style="background-color:#aaa; height:200px;width:100px;float:left;">
      <div><b>Main Menu</b></div>
      HTML<br />
      PHP<br />
      PERL...
  </div>
  <div style="background-color:#eee; height:200px;width:350px;float:left;">
    <p>Technical and Managerial Tutorials</p>
  </div>
  <div style="background-color:#aaa; height:200px;width:100px;float:right;">
      <div><b>Right Menu</b></div>
      HTML<br />
      PHP<br />
      PERL...
  </div>
  <div style="background-color:#b5dcb3;clear:both">
  <center>
      Copyright © 2007 Tutorialspoint.com
  </center>
  </div>
</div>
</body>
</html>

This will produce following result:

This is Web Page Main title

Main Menu

HTML
PHP
PERL...

Technical and Managerial Tutorials

Right Menu

HTML
PHP
PERL...

You can create better layout using DIV, SPAN along with CSS. For more information on CSS, please refer to CSS Tutorial.

Friday, August 12, 2016

The display Property

Block-level Elements

Inline Elements

Display: none;

Override The Default Display Value

Example

Example

Example

Hide an Element - display:none or visibility:hidden?

Example

Example

Wednesday, August 10, 2016

Example

A section in a document that will be displayed in blue: <div style="color:#0000FF"> <h3>This is a heading</h3> <p>This is a paragraph.</p> </div> Try it Yourself »

Definition and Usage

The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements to format them with CSS.

Browser Support

Element <div>YesYesYesYesYes

Tips and Notes

Tip: The <div> element is very often used together with CSS, to layout a web page. Note: By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS.

Differences Between HTML 4.01 and HTML5

The align attribute not supported in HTML5.

Attributes

AttributeValueDescription alignleft right center justifyNot supported in HTML5. Specifies the alignment of the content inside a <div> element

The float Property

Example

The clear Property

Example

The clearfix Hack - overflow: auto;

Example

Web Layout Example

Example

CSS Layout - float and clear

The float Property

Example

The clear Property

Example

The clearfix Hack - overflow: auto;

Example

Web Layout Example

Example

Tuesday, August 9, 2016

HTML Layout - Using Tables

Example

This is Web Page Main title

Multiuple Columns Layout - Using Tables

Example

HTML Layouts - Using DIV, SPAN

Example

This is Web Page Main title

A section in a document that will be displayed in blue:

<div style="color:#0000FF">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
Try it Yourself »

The <div> tag defines a division or a section in an HTML document.

The <div> tag is used to group block-elements to format them with CSS.

Element

<div> Yes Yes Yes Yes Yes

Tip: The <div> element is very often used together with CSS, to layout a web page.

Note: By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS.

Attribute Value Description

align left
right
center
justify Not supported in HTML5.
Specifies the alignment of the content inside a <div> element