Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

Flow Text Around Lists

Many times with lists on web pages there are only a few words to each list item, which can leave an excess of white space that can make a page look sparse.

White Dogs
Green Frogs
Brown Logs
Gray Bogs
Still here?

By using CSS to "float" the list your other content will flow around the list rather than starting under it. There's a simple list to the left that demonstrates this, and a really nice looking list down the page. Let's cover the simple list first, 'cuz . . . you know, it's right here.

OK, the "simple" list was kind of boring looking, so I dressed it up with a border and gradient background. It's still pretty simple, as you'll see in the code below.

The HTML Code

<ul class="easy-list"><li>
White Dogs

</li><li>
Green Frogs

</li><li>
Brown Logs

</li><li>
Gray Bogs

</li><li>
Still here?

</li></ul>

The CSS Code

ul.easy-list {float: left; 
margin-right: 22px; 
padding: 9px 18px 9px 36px; 
border: 1px solid gray; 
background: orange; 
background-image: linear-gradient(burlywood, linen, burlywood);

The CSS code shown would be in an embedded or external style sheet. You could make in inline, too. Follow this link ifi you need a tutorial on style sheets.

NOTE	If you use padding on the left side of a list, the padding starts at the left margin of the containing element, not at the default indent margin. That's why the padding on the left is double the padding on the right. You just have to play around with it a bit to get it to look right.

The Downright Freaking Gorgeous List

Practice licking elbow.
Run in circles to unwind.
Call everyone Bobby.
Wax the car muffler.
Sell ad space on forehead.

Now have a gander at the list to the right. Sweet looker, no?

Well, it was downright freaking gorgeous on my computer screen, but it wasn't so great on the smart phone. I had to do a bit of playing to make it look good at smaller resolutions.

It would have been much easier if I'd have use a background that tiled, but I wanted the "torn edges" look, which means I couldn't have it repeat.

Still, I think it came out fairly well. I like it, and as Judge Judy would say, "My opinion is the only one that matters." rolling eyes emoji

The HTML

<ol class="torn">
<li>Practice licking elbow.</li>
<li>Run in circles to unwind.</li>
<li>Call everyone Bobby.</li>
<li>Wax the car muffler.</li>
<li>Sell ad space on forehead.</li>
</ol>

To use the same font I did, place the following line of code in the <head> section of your page:

It's a small font, so you'll probably need to increase the font size (as shown in the CSS code).

The CSS

ol.torn {float: right; 
max-width: 270px; 
height: auto; 
margin-top: 12px; 
margin-left: 27px; 
background-image: url('../images/list-bg.png'); 
background-repeat: no-repeat; 
background-size: 100% 100%; 
padding: 47px 17px 37px 47px; 
font-family: Mynerve, sans-serif;
font-size: 32px;}

If you wonder why not just make the list items part of the image, it’s because:

Assuming the list related to the content, there's a search engine optimization benefit with text.
You can update the list without making a new graphic.
Your visitors can copy and paste from the text.
Because it’s fun!

That’s all I’ve got for you . . . what’s on your list?

Flow Text Around Lists

NOTE

The Downright Freaking Gorgeous List

Essentials

Drawing Board

Notices

Sample Graphics