Understanding Floats in CSS

I started programming for about 20 years now. Back in the days CSS was new and very exceiting for me. Coding web pages via the builtin tags to create different visual output (excatly webdesign) was pretty hard, there was a lot of code copy. A little bit later, web pages was built around the 'table' tag, so every webpage was with nested tables, which was extremely hard to manipulate and the overview over the whole document was loose. With CSS (Cascading Style Sheets) everything was new and different, finally you could split code from design and vise verca. One of the most interesting new features of CSS was using the 'float' element. Now you could sorround a text around a picture. A difficult aspect general when using CSS the first time is, you have to know how to use 'div' and 'span' tags. They are like empty boxes or containers, so you can define them and manipulate them. The most standard tags are also "boxes" but they react different when manipulating them. For example when you have some text and you want to have on the left side a picture, you only on the div/span tag the CSS line "float:left". Floats can be a little bit tricky, especially when you want use more than one float element. They elements gear on there previous elements.
Subscribe to #documentstructure