Part 3: DIVs and CSS


Sometimes it is useful to create a section or division (div) within your web page so you can apply special formatting just to that section. For example, you might want to have a breakout paragraph with a special coloured background to stand out from the rest of the page.

To use divs you create div tags in your page to define the areas, and use a class tag to define the styling rules. Then make sure you create the CSS rules for that style.

<div class="breakout" >
Breakout content goes here

In your CSS rules for your site you would then have formatting rules for the breakout style:
.breakout {background-color: #CCCCCC; border: solid 1px #000000}

More Advanced Topics

Floating a division / section of a page

This is a division of text that has been given a width of 40% and floated to the right.

Using HTML you can create a division within your page. You can then set a width for the div, and also apply a style to it. The most common reason for doing this is to take a part of a page (text and/or images) and float it to the left or right of the rest of the page. The div you see to the right has been setup using the following HTML:
<div width=”40%” class=”alignright”>
This is a division of text that has been given a width of 40% and floated to the right.

But you can also apply an additional class to a div so you can style it with CSS so it looks different.

This chunk of text is in a division (div) that has been floated to the right and formatted with CSS rules.

This is the HTML code that is used to create the floated div you can see to the right.
<div class=”breakout alignright”>
This chunk of text is in a division (div) that has been floated to the right and formatted with CSS rules.

The div is created simply by surrounding a part of the web page with <div> and </div>

You can assign on or more classes to the div by adding a class=”yourclass” clause to the opening part of the div. There are two classes applied to this div that use CSS rules from the website’s style sheet. The alignright class has the CSS rules that float the div and right align it. The breakout class has the CSS rules that set the width of the div and apply the background colour / border styling.

You can create new CSS rules for your own purposes using Dashboard, Appearance, Site Design and using the Custom CSS field. For example, to use a style called blueborder you would add this to your site’s Custom CSS:
.blueborder {border: solid 1px blue;}

This is the CSS rule (with 6 parts) used for the breakout style used on this page:
.breakout {width: 250px; background-color: #EEE; font-style: italic; border: solid 1px green; margin-left: 25px; padding: 10px; }

Once a style has been created, you can use it on any div like this:
<div class=”blueborder”>

And of course you can add the alignright or alignleft classes (which already have rules ready for them) to float the div to the left or right.

Note that you can add class=”alignright” to an image tag, so you don’t have to put an image in a div just to float it. If you want to float several images together with text, or float several rotators in a group, you would use a div for that.

Learn More with Treehouse

If you have found learning about HTML useful and want learn more, I can highly recommend Treehouse – they have put together a really well structured set of materials to walk you through HTML in some detail. And they cover CSS as well.

The link below is my referral link from Treehouse. If you use that link to sign up, you get 50% off your first month, and I get a discount on my subscription. So thanks in advance if you do use it!

Back to Part 2: Images and Tables

Automate your WooCommerce store with Zapier

Automatically send your WooCommerce order, customer, or subscription data to 1500+ cloud services.

Built by OM4.

Other WooCommerce Extensions by OM4

After The Order

WooCommerce Order Management plugin that helps make everyone on your team an order management expert.

e-Path Gateway

Collect credit details securely online and process using your existing bank merchant account offline.

Enter your details below to receive our latest WooCommerce articles via email.

It's a great way for WooCommerce store owners and WooCommerce developers to stay informed about everything WooCommerce related!