HTML Tutorial
HTML Forms
HTML Graphics
HTML Media
HTML API
HTML Layout Elements and Techniques
Websites display content in multiple columns (like a magazine or a newspaper).
Example:
/* Style the header *
.city{
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Create two columns/boxes that floats next to each other */
.place{
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}
/* Style the list inside the menu */
.place ul {
list-style-type: none;
padding: 0;
}
.desc {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
.sec::after {
content: "";
display: table;
clear: both;
}
/* Style the footer */
.bottom {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
.place, .desc {
width: 100%;
height: auto;
}
}
CSS Layout Float
In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.
Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)
Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history.
Output:
CSS Layout Float
In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.
Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)
Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history.