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 going back to its founding by the Romans, who named it Londinium.

The picture Element

Resize the browser to see different versions of the picture loading at different viewport sizes. The browser looks for the first source element where the media query matches the user's current viewport width, and fetches the image specified in the srcset attribute.

The img element is required as the last child tag of the picture declaration block. The img element is used to provide backward compatibility for browsers that do not support the picture element, or if none of the source tags matched.