Control HTML Elements Layout with CSS

Control Element Layout and Display

CSS Provides you with many options to control how your elements are laid out and displayed. Among them are: "position, float, clear, display, visibility, overflow, clip, vertical-align, z-index, top, right, left, bottom and cursor". Lets take a look at how you can use some of these properties.

Position

You can control the position of an element by using the "position" property and combining it with either of top or bottom and right or left. The default "position" value for elements is static, which will display the element according to its position in the HTML as usual.

The relative position value moves an element relative to its normal flow in the page. Combining one of the direction properties tells the browser how far to move the element from that direction.

p {
  position : relative;
  left : 25px;
  top : 15px;
}
		

The absolute position value sets the location of an element in relation to the browser window. If you want to place something in an exact location on your web page, set the position property to absolute and then use top or bottom and right or left to set its location.

p {
  position : absolute;
  left : 25px;
  bottom : 15px;
}
		

Float Property

You can use the float property to align an element to the right or left of its container and have text or other content flow around the other side.

div {
 border : 1px solid #00f;
 color : red;
}
p {
 color : #0ff;
 float : right;
 border : 1px dotted #f00;
 width : 60%
}
		

<p>
	This is text that is in the paragraph. 
	This paragraph will be floated to the right.
</p>
<div>
	This is text that is in the div. This text will flow 
	down the left side of the paragraph that is floated 
	to the right.
</div>
		

Clear Property

When you float an element to one side or another it will float over the boundaries of neighboring elements. If the content that wraps around it isn't longer(higher) than the content that is floated right, the floated contents borders may overlap its parents like so.

div {
border : 1px solid #00f;
color : red;
}
p {
color : #0ff;
float : right;
border : 1px dotted #f00;
width : 60%
}
	

<div>
	<p>
		This is text that is in the paragraph. 
		This paragraph will be floated to the right and 
		the text in the parent div will flow around the 
		left side of this.
	</p>
	This is text that is in the div!
</div>

In this case you need to use an element after the floated content with the "clear" property to create the clearance to clear the floated element and continue on a fresh line.

div {
border : 1px solid #00f;
color : red;
}
p {
color : #0ff;
float : right;
border : 1px dotted #f00;
width : 60%
}
.clear {
clear : both;
}
	

<div>
	<p>
		This is text that is in the paragraph. This 
		paragraph will be floated to the right and
		 the text in the parent div will flow around 
		the left side of this.
	</p>
	This is text that is in the div!
	<p class="clear">This is the paragraph with the 
		classification "clear". It will appear below 
		any floated content due to it creating clearance 
		on both sides.</p>
</div>

z-index

You can control how elements stack, or lay on top of each other with the "z-index" property. The z-index property determines the stacking order of elements. The larger the z-index, the "closer to the user" the element is.

.p1 {
width : 50%;
background : #f00;
height : 30px;
position :relative;
left :5px;
z-index : 2;
}
.p2 {
width : 50%;
background : #0f0;
height : 30px;
position :relative;
left :15px;
bottom :15px;
z-index : 3;
}
.p3 {
width : 50%;
background : #00f;
height : 30px;
position :relative;
left :10px;
bottom :35px;
z-index : 1;
}
	

<p class="p1">Paragraph 1</p>
<p class="p2">Paragraph 2</p>
<p class="p3">Paragraph 3</p>

For more layout and display properties look review our CSS Properties List.