# CSS float: How do I tell it to stop wrapping?

**URL:** https://boards.straightdope.com/t/css-float-how-do-i-tell-it-to-stop-wrapping/300630
**Category:** Factual Questions
**Created:** [April 22, 2005, 5:06pm UTC](https://boards.straightdope.com/t/css-float-how-do-i-tell-it-to-stop-wrapping/300630 "2005-04-22T17:06:30Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![iamthewalrus\_3](https://avatars.discourse-cdn.com/v4/letter/i/258eb7/32.png) [@iamthewalrus\_3](https://boards.straightdope.com/u/iamthewalrus_3)
#### Post date: [April 22, 2005, 5:06pm UTC](https://boards.straightdope.com/t/css-float-how-do-i-tell-it-to-stop-wrapping/300630/1 "2005-04-22T17:06:30Z")

</div>

On my weblog, I post small pictures in the body of posts from time to time. I’d like to have the text in the post wrap around those pictures in a nice and spiffy way, but when I use the “float” property in the img tag, the text of further posts wraps around the image as well. What I’d like to be able to do is tell the float property to _stop_ wrapping text after a certain point, but I’m not sure how to do that.

See the brokenness [here](http://www.evilblog.net/badfloat.html)

In addition, if you scroll a bit further down that page to the post titled “BBQ Pictures”, I have the problem that I can’t seem to get the images to align at the top of the screen and have the text wrap between them. I have one set as “float:right” and the other “float:left”, but whichever one is first in the html ends up being one text-line higher than the other, and the text doesn’t wrap the way I want it to.

Is there a way to make my images behave?

---

<div class="post-metadata">

### Author: ![Gary\_Robson](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/gary_robson/32/3448_2.png) [@Gary\_Robson](https://boards.straightdope.com/u/Gary_Robson)
#### Post date: [April 22, 2005, 6:06pm UTC](https://boards.straightdope.com/t/css-float-how-do-i-tell-it-to-stop-wrapping/300630/2 "2005-04-22T18:06:21Z")

</div>

Follow the text with \<br clear=all\> and it should slide it down as far as necessary to clear the picture. Is that what you’re looking for?

---

<div class="post-metadata">

### Author: ![Gary\_Robson](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/gary_robson/32/3448_2.png) [@Gary\_Robson](https://boards.straightdope.com/u/Gary_Robson)
#### Post date: [April 22, 2005, 6:08pm UTC](https://boards.straightdope.com/t/css-float-how-do-i-tell-it-to-stop-wrapping/300630/3 "2005-04-22T18:08:24Z")

</div>

I should have previewed. I thought tag symbols got processed. Make that \<br clear=all\>

---

<div class="post-metadata">

### Author: ![iamthewalrus\_3](https://avatars.discourse-cdn.com/v4/letter/i/258eb7/32.png) [@iamthewalrus\_3](https://boards.straightdope.com/u/iamthewalrus_3)
#### Post date: [April 22, 2005, 6:19pm UTC](https://boards.straightdope.com/t/css-float-how-do-i-tell-it-to-stop-wrapping/300630/4 "2005-04-22T18:19:03Z")

</div>

Sweet. Thanks **Wombat**.

Any idea about getting the two images to vertically align when floated to opposite sides? Do I have to make three columnar divs for that?

---

<div class="post-metadata">

### Author: ![Gary\_Robson](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/gary_robson/32/3448_2.png) [@Gary\_Robson](https://boards.straightdope.com/u/Gary_Robson)
#### Post date: [April 23, 2005, 4:50pm UTC](https://boards.straightdope.com/t/css-float-how-do-i-tell-it-to-stop-wrapping/300630/5 "2005-04-23T16:50:35Z")

</div>

If you just include an “align=right” in one and an “align=left” in the other, and put the two img tags right up against each other with no space in between, it usually works fairly well (is that waffly enough for you?).

I’ve also tried making a style that floats right and a style that floats left, but I’ve had inconsistent results. Building three columns (using either styles and divs or a table) is fine, but you end up with all of the text running in a little tiny space down the middle of the page. I almost always end up pushing all of the pictures to the same side of the text to avoid that.

When I’m working late at night and my eyes get bleary, I often enlarge the text size in my browser. There’s nothing more annoying than having a window 1,200 pixels wide and a column of text 200 pixels wide, containing a few words per line, with a huge empty space filling the rest of the browser. I don’t know _why_ so many Web designers force their pages into narrow fixed widths rather than letting them expand naturally to fill the window.

---

<div class="post-metadata">

### Author: ![iamthewalrus\_3](https://avatars.discourse-cdn.com/v4/letter/i/258eb7/32.png) [@iamthewalrus\_3](https://boards.straightdope.com/u/iamthewalrus_3)
#### Post date: [April 23, 2005, 10:57pm UTC](https://boards.straightdope.com/t/css-float-how-do-i-tell-it-to-stop-wrapping/300630/6 "2005-04-23T22:57:22Z")

</div>

I’d like not to use align because it’s deprecated. Thanks for the suggestions.

---

<div class="post-metadata">

### Author: ![Duckster](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/duckster/32/1244_2.png) [@Duckster](https://boards.straightdope.com/u/Duckster)
#### Post date: [April 24, 2005, 3:05am UTC](https://boards.straightdope.com/t/css-float-how-do-i-tell-it-to-stop-wrapping/300630/7 "2005-04-24T03:05:02Z")

</div>

> [@iamthewalrus(:3=](#):
>
> Sweet. Thanks **Wombat**.
> 
> Any idea about getting the two images to vertically align when floated to opposite sides? Do I have to make three columnar divs for that?

Yes.

For more CSS ideas, see

- [http://www.maxdesign.com.au/presentation/page\_layouts/index.cfm](http://www.maxdesign.com.au/presentation/page_layouts/index.cfm)
- [http://www.thenoodleincident.com/tutorials/box\_lesson/index.html](http://www.thenoodleincident.com/tutorials/box_lesson/index.html)
- [http://www.positioniseverything.net/](http://www.positioniseverything.net/)
