CSS Floating 101

As someone who is starting to learn web designing, all of these new terms and concepts are all somewhat a bit confusing to me. So hearing the term “floating” in CSS, I was a bit intrigued because this property would help stylize my web page and in my eyes make it look better. But every time I tried to use it, it never would work the way that I wanted. Like Noah Stokes stated, it gave me ( new user) frustrated and confused, making me not want to use the float property on a web site ever. That I would just stick to indents and margining. But after reading Stokes’ article, CSS Floats 101,   it’s made me rethink the situation.

In his article, he teaches the readers the basics of the float property ( 4 different kinds: float right, float left, float inherit and float none) and little tips on how to use it to your advantage. For example, using the property “clear.”  he shows how what 3 blocks would look like with the normal float property in Example C. Below is the CSS for it:

.block {

float: left;

width: 200px;

height: 200px; }

Now when trying to add a float property to only two of the blocks in Example E, the green block would disappear, even the CSS looks right:

<div class="block pink float"></div>
<div class="block blue float"></div>
<div class="block green"></div>
<div class="block orange"></div>

.block {
	width: 200px;
	height: 200px;
}
.float { float: left; }
.pink { background: #ee3e64; }
.blue { background: #44accf; }
.green { background: #b7d84b; }
.orange { background: #E2A741; }

Then Noah explains in with  Example E2: the clear property needs to be added in CSS for the green block. By doing that, it will apply to the green box in the element and make it appear underneath the first two. Here is the CSS with the clear property included:

<div class="block pink float"></div>
<div class="block blue float"></div>
<div class="block green clear"></div>
<div class="block orange"></div>

.block {
	width: 200px;
	height: 200px;
}
.float { float: left; }
.clear { clear: left; }
.pink { background: #ee3e64; }
.blue { background: #44accf; }
.green { background: #b7d84b; }
.orange { background: #E2A741; }

These are just some of the few things that I learned from Stokes’ article about CSS floating. Because I know the structure and markup of these properties better, I don’t feel angry or confused when considering using the float property. Yes maybe getting there is a little more difficult than it seems. But because I understand it better now, I feel can apply what I have learned to my CSS code and improve on my web page even more with the float property. Sure, it will be awhile before I’m a master at it, but at least understanding it is a start.