CSS: Float and Clear Both

Remember, the w3schools website is basically our “textbook” for this class. Here are the sections we will spend the most of our time in: HTML and CSS.

Float

With the CSS float property, an element can be pushed to the left or right, allowing other elements to wrap around it. Here is what the CSS looks like:

.div1 {
float: left;
width: 200px;
}

.div2 {
float: right;
width: 200px;
}

floats

Floats are also used on images to allow text to wrap around it. This is what is used when you justify your blog post images to the left and the text wraps around your image!

Clear Both

We use the clear:both property on the element if we do not wish it to wrap around the element before it. Here is what the CSS looks like:

.div2 {
clear: both;
width: 200px;
}

clear_both

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s