Now we will create a column to improve the readability as well as the look of our page .For this we write code in CSS as :
#welcome {
float: left;
width: 275px;
padding: 0 100px 50px 35px ;
}
This also aligns the "reviews" division to the right of "welcome" division .Though this only happens because other divisions try to wrap around "welcome" division once we declare it as float: left; . 50px provides padding in the bottom .
To align the top of "reviews" with the top of "welcome" division .
#reviews {
margin-top: 0.5em ;
padding: 0 0 50px 0 ;
}
We are basically creating a column aligned to the left of page of width 275px . We provide padding horizontally to avoid two columns i.e. "welcome" and "reviews" from overlapping each other .
We can also create a custom sized box underneath the heading "Welcome to Movies Freak!" with the text wrapping around it .
<div id="welcome">
<h1>Welcome to Movies Freak!</h1>
<div id="floatbox">Hi! Wecome to movies freak .</div>
CSS for the box :
#floatbox {
float: left;
width: 60px;
height: 75px;
padding: 10px;
background-color: #FFAABB;
margin-right: 1em;
margin-top: 0.5em
}
margin-right and margin-top settings are adjusted to align the box with the text as well as avoid overlapping .
#reviews {margin-top: 0.5em ;}
Till now our footer looks just like a part of the "reviews" division .So , to differentiate it :
#footer {
clear: both;
text-align: center;
border-top: 1px solid;
}
clear:both - This places the footer below our specified column ."both" ensures no matter of what height our divisions "welcome" and "reviews" are , the footer is always placed below both the divisions .
Text align places all the text in the footer in the middle of the page .border-top differentiates between the footer and the divisions by creating a 1px thick line at the top of the footer .
#welcome {
float: left;
width: 275px;
padding: 0 100px 50px 35px ;
}
This also aligns the "reviews" division to the right of "welcome" division .Though this only happens because other divisions try to wrap around "welcome" division once we declare it as float: left; . 50px provides padding in the bottom .
To align the top of "reviews" with the top of "welcome" division .
#reviews {
margin-top: 0.5em ;
padding: 0 0 50px 0 ;
}
We are basically creating a column aligned to the left of page of width 275px . We provide padding horizontally to avoid two columns i.e. "welcome" and "reviews" from overlapping each other .
We can also create a custom sized box underneath the heading "Welcome to Movies Freak!" with the text wrapping around it .
<div id="welcome">
<h1>Welcome to Movies Freak!</h1>
<div id="floatbox">Hi! Wecome to movies freak .</div>
CSS for the box :
#floatbox {
float: left;
width: 60px;
height: 75px;
padding: 10px;
background-color: #FFAABB;
margin-right: 1em;
margin-top: 0.5em
}
margin-right and margin-top settings are adjusted to align the box with the text as well as avoid overlapping .
#reviews {margin-top: 0.5em ;}
Till now our footer looks just like a part of the "reviews" division .So , to differentiate it :
#footer {
clear: both;
text-align: center;
border-top: 1px solid;
}
clear:both - This places the footer below our specified column ."both" ensures no matter of what height our divisions "welcome" and "reviews" are , the footer is always placed below both the divisions .
Text align places all the text in the footer in the middle of the page .border-top differentiates between the footer and the divisions by creating a 1px thick line at the top of the footer .
