Dave Woods - Freelance Web Design Warwickshire

CSS Floats Without Text Wrap

Understanding floats is extremely important when creating CSS layouts. One of the trickiest issues when dealing with floats is stopping text from wrapping underneath a floated element.

Within this short tutorial, I’ll explain how this can easily be accomplished with no extra HTML markup required.

Example

Here’s an example of the kind of layout this tutorial will help you create:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><title>CSS Floats Without Text Wrap</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="container">
<img src="penguin.jpg" alt="">
<h1>CSS Floats Without Text Wrap</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tristique venenatis ligula. Ut massa leo, tincidunt sit amet, tincidunt nec, volutpat ac, lorem. Integer odio. Donec tempus. Nam vestibulum lectus ut pede. Donec mattis nunc et quam. Duis ipsum eros, interdum eu, auctor gravida, rhoncus sit amet, odio. Curabitur sit amet urna. Quisque et sem. Sed laoreet purus quis risus.
</p>
<p>
Vivamus elit. Mauris odio felis, bibendum eu, eleifend non, rutrum in, tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed malesuada sapien sit amet risus fringilla nonummy. Praesent laoreet tristique sem. Vestibulum venenatis congue lacus. Etiam volutpat, lacus sit amet eleifend posuere, purus leo bibendum nulla, sit amet vulputate nisi elit at ante. Nulla luctus, eros id tempus vestibulum, velit quam suscipit arcu, id tempus tortor felis et ante. Donec bibendum dapibus mi. Integer nunc. Donec nonummy, turpis non posuere tempor, libero magna semper ante, in egestas erat odio pharetra metus. Vivamus semper fringilla felis. Morbi ultrices sapien nec odio. Fusce vitae lectus. Proin feugiat, ipsum quis accumsan feugiat, diam dui vestibulum arcu, nec vehicula leo nisl tincidunt lorem. Donec sit amet ante eu lorem aliquet scelerisque. Suspendisse erat mauris, semper ut, pharetra ac, ultrices id, sapien. Cras enim. Fusce velit.
</p>
</div>
</body>
</html>

As you can see, the HTML for this is very simple and includes an image, heading, couple of paragraphs and a container div to hold our layout.

CSS

We’ll start the CSS off with some simple formatting rules which will just style the content a little nicer and create some standard rules for spacing and positioning of the content.

* {
padding: 0;
margin: 0;
}
html {
overflow-y: scroll; /* Force Scrollbar - Firefox, Opera and Safari */
}
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 100%;
padding: 10px;
}
#container {
font-size: 0.75em;
width: 760px;
margin: 0 auto;
}#container h1 {
font-size: 1.7em;
}
#container p {
padding-bottom: 1em;
}

Next, we’ll float the image left so that it sits in the top left corner of the div and allows for the text to flow around the image.

img {
float: left;
}

If you view the layout at this stage, you’ll see the problem. The text flow’s alongside the image nicely but as soon as it reaches the bottom of the div, the text decides that as there’s now space to the left, it will jump across and start flowing underneath.

You could easily fix this by wrapping the content in a div, specifying a width and floating it right but that would introduce extra markup to the HTML when it really isn’t needed so here’s the solution.

#container h1, #container p {
margin-left: 120px;
}

The image itself is 100px, so what this does is create a 120px margin from the left side of the container which forces the h1 and the paragraph over and creates a nice space between the text and the image.

It’s really that simple and will work in all the modern browsers, including IE6 but as always if you have any issues or problems with this solution please feel free to contact me or post in the comments below.

18 comments on “CSS Floats Without Text Wrap

  1. Andrew Assarattanakul

    There are a couple if issues with this solution is that you need to know the specific width of the image otherwise you cannot set the correct left margin to the rest of the content and you have to specify every possible element in the content that needs to have the extra 120px margin.

    Of course this depends on the layout of the site and if you have full control on what images go where if you can restrict the images to only be 100px wide (for this example). If it would be unknown for the image width then you’ll have to go back to the extra markup. Same goes with the content for the different html tags.

  2. Dave Post author

    Hi Andrew, Yeah I completely agree that this solution does have it’s limitations but is useful for the situations where you can use it.

    I tend to work with quite a few differently structured websites and this solution has served me well on a lot of them (if not all of them).

    My thinking behind this tutorial really is that the more ideas and information we have when dealing with CSS layouts, the more tools we’ll have at our disposal for any layout we encounter.

  3. Pingback: Weird Wonderful Web Links for January 21st | False Positives

  4. Duncan Tart

    Hi
    Please canyou help me.
    I want to rewrite the website for our Men’s activity.
    My request is this – how do I store text files and then bring them into the various pages.

    What I really want is a standard page with two columns that have links in one column and article in second.

    Your help would be much appreciated

  5. Mike

    Thank you so much. This is the exact answer I was looking for! This problem has been haunting me for the past few days now. I’ve read and tried everything and had been about to give into using “margin-bottom: —%” in my sidebar for every single page. You saved me from this and I thank you!

  6. red

    still looking for tutorials on weaving/wrapping text between and among multiple left and right floats – some of which partially share horizontal positions, some are on the same horizontal (right/left floats with space between) and so forth. Perhaps you’ll cover that sometime?

  7. Dave Post author

    Hi Newbie,

    The only thing that won’t validate with the CSS2 validator is the following code.

    html {
    overflow-y: scroll; /* Force Scrollbar – Firefox, Opera and Safari */
    }

    However, overflow-y is in the spec for CSS3 and is perfectly fine to use.

  8. Pingback: WEB 3.0 » Blog Archive » ¿Así que querías saber de CSS?

  9. Sam

    Hello Dave,

    I’m currently working on a site and haven’t mastered positioning just yet but this was exactly what I needed. Keep up the good work.

    Thanks.

  10. Henna

    Thank you – it’s really helped. I can’t seem to get it to work in Safari – firefox is fine but the Safari browser can’t display it.

  11. Pingback: 網站製作學習誌 » [Web] 連結分享

  12. Shaileen

    Superb man…
    its working now!! broke my head for this before this solution!!
    Appriciate it!!

  13. Hez

    Thanks man! This is one of those very rare times I find _exactly_ what i was looking for. It’s a small thing but this really helped a lot!