If you have ever worked with CSS you know the problem you can have when you float one element, and then have text next to it. Especially if that text is in a list, or a highlighted box (usually surrounded with a border and/or background color). Essentially the margin of the element next to the floated element is off.
Normally, we just float our images with a style something like:
img {
float: left;
margin-right: 5px;
}
But this will get you into trouble. While the elements display and are seen, your box/bullet points may not be aligned correctly, and/or they are on top (bullets) or behind (border and background color/images) the image or other floated element. See image below:
This is because the ul, ol, and p tags are block level tags. They will take up 100% of the width that they can. Even though the content of the tags isn’t overwritten, the style doesn’t look right because the browser is pushing elements around to make them fit. You can see this represented in FireBug below.
However, we can set the width of those elements to auto, which will size it to the available space, not the 100% quality. Second, we will need to set the overflow to hidden. This will remove the background/border element – with the width pushing it to the correct spot.
So the style rule for those tags would look something like:
p, ul, ol {
width: auto;
overflow: hidden;
}
What’s great about this, is it doesn’t affect the elements that are not next to a floated element. Why, because width takes what it can, because it is set to auto. So if it can take 100% it does, but if it can only take 15%, that is all it will take.
If you want to see this operation in action, watch the following video clip.
Controlling the Look of Elements Next to Floated Items was originally found on Access 2 Learn
