This tutorial helps you make your website more attractive. Choose the topic and start your journey to the wonderland of CSS.
Introduction To Float Property
Float property is used for the layout of a webpage and means that you can float an element to the right or to the left of a webpage.
It is very important to know that a floated element would be out of the normal flow. Normal flow is basically
the way that elements are displayed in a webpage which is from top-left to the bottom-right.
How float Property works
When you apply floating on an element and float it to the right or left, it seems that the floated element cannot be
seen by other elements. So those elements which are below, move up to fill in the
empty space of the floated element.
Please consider the following example. We have one blue box and a paragraph of text (lorem ipsum) and one green box.
In this example, There are no floating on the page. See their HTML and CSS code in figure 1-1 and figure 1-2. You can see
the output in figure 1-3.
1-1. HTML code1-2. CSS code with NO floating1-3. What you see in your browser
Floating to the right
Now let's float the blue box to the right of the page by adding float: right; declaration to
#blue-box styles as you see in the figure 2-1.
As you know, because it is out the normal flow,
the paragraph and the green box move up and the paragraph goes around the blue box which is unpleasant. See Figure 2-2.
2-1. float to right CSS code2-2. What you see in your browser
Clear Float
Now we need to find a way to fix the moved text under the floated element which is here the blue box.
For this reason, apply clear to the blue box element in the same direction as the float. Here just add
clear: right; to <p> element's style as shown in figure 3-1.
You can see the result in figure 3-2. It seems that the paragraph has just seen the blue box and moved down to avoid
interfering.
3-1. Clear right CSS code3-2. What you see in your browser
Introduction To Display Property
Display property in CSS specifies the way an element is rendering on a page.
There are many different values
for display property. Display property has a key role in controlling the layout of a webpage. The browser
or HTML specify the default value of display property for each element.
Display Values
We are going to explain four of the most
commonly used display property values in this article. As you see in figure 4-1. They are:
none
block
inline
inline-block
I am going to explain what each value does when you apply it to an element in the
following article.
4-1. Commonly used display property values
How display property works
none: A value of none for the display property of an element makes it hidden also takes it
out of the page layout. block: An element with a display of block also known as a block-level element which is a type of element that
starts in a new line and occupies the whole horizontal space of its container.
The default value for display property in most of HTML elements is block. You can assign values to the width, height and
margin properties of block-level elements. <div>, <p> and <h1> are examples of block-level elements. inline: An element with a display of inline also known as an inline-level element.
An inline element does not need the whole line of the container.
They can sit next to each other and share the horizontal space. <span> is an example of the inline-level elements. inline-block They have both specifications of block-level and inline-level elements.
They can sit beside each other on a line, also width, height and margin values can be assigned to them.
