How to use CSS float without hiding parts of a DIV

When CSS float is used on a DIV, other DIVs that are not floated continue to occupy the space of the floated DIV. While I am sure this is intentional, I do not know how to achieve the effect I am looking for. Please consider this example:

<html> <div style="width:400px"> <div style="width:150px;float:right;border:thin black solid"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <div style="background-color:red;border:thin black solid">Some sample text</div> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </div> </html>

If you paste this HTML in a browser (or examine its jsfiddle), you'll notice that "Some sample text" is red, and that the red background extends all the way through the floated DIV. While I am sure there is a way to obscure the parts of the red background I don't want, it would still leave the border cropped off and hidden underneath the DIV. Ideally, I want the background color and border to only occupy valid text space, and not creep underneath the floated DIV. Is this effect possible?

Please note that I am using the float property not as a replacement for columns, but as a block that will have the text flow around it. So far none of the proposed solutions takes this into account. For clarity, here are some images.

This is what I get:

How to use CSS float without hiding parts of a DIV

This is what I want:

How to use CSS float without hiding parts of a DIV

You'll notice that in both examples, the final text wraps around the floated part as the text reaches the bottom. My second example I can achieve by directly specifying the width of the div containing "Some sample text". I do not want to specify the width. It seems redundant since I want the same width as that of the text around it. But perhaps that isn't possible?

-------------Problems Reply------------

If you add a span in your div and style that like so (of course, I would not actually normally use inline styling):

<div style="overflow: hidden;">
<span style="background-color:red;
border:thin black solid;
display: inline-block;">
Some sample text
</span>
</div>

Then you can get this effect shown in this fiddle. Note that the overflow:hidden on the div itself is to accommodate line wrapping for long text strings.

Here's one solution:

<div style="background-color:red;border:thin black solid;overflow:hidden;">Some sample text</div>

Basically the magic here is overflow: hidden, which changes the CSS visual formatting model. Take a look at CSS layout fundamentals, part 5: floats:

Fixing adjacent boxes

Let’s look at the red paragraph border problem first. The reason the paragraph border appears behind the image is because floats don’t reposition block boxes that are adjacent to them. In this example, the floated image is only pushing the line boxes inside the paragraph across. So the text is pushed to the right, but the actual paragraph box still stretches across the full width of the container.

The fix for this issue comes from a very well-hidden paragraph in the floats section of the CSS 2.1 specification:

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same block formatting context as the element itself.

So to prevent our paragraph block from overlapping the floated content, the solution is to create a “new block formatting context”, in CSS specification author terminology. Sounds tricky, eh? Fortunately, it isn’t that hard. New block formatting contexts are created by any block which meets these criteria:

  • is floated
  • is absolutely positioned
  • has a display property value of one of more unusual flavours (inline-block, table-cell, etc.)
  • has its overflow property set to something other than visible.

The last option is the one that is easiest to do in most cases: setting overflow: auto on our paragraph will create a new “block formatting context”, and render the paragraph border in the right place.

It appears this is simply not possible the way I had hoped. As Cletus explained, "Nothing allows that. You can wrap text around the right float but that will extend the block element to the right as well. A block element is, by definition, a square and you seem to want a square with the top right cut out and the border to follow that line. Can't do it."

(I upvoted Cletus' answer, but didn't want to mark it as the correct "answer" because I believe future Googlers should be let down quickly.)

You should specify the other column as float left. The way that you have it right now the text on the left is going to wrap the floated text on the right. It would also be wise to specify the size of the floated object on the left too.

<html>

<div style="width:400px">

<div style="width:150px;float:right;border:thin black solid">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<div style="background-color:red; width: 250px; border:thin black solid">Some sample text

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div></div>

</html>

Also, consider using CSS it will make this code much easier to maintain long-term<<

EDIT: I thought you wanted everything to be floated to the left I think I misunderstood your question. What you are trying to do is not possible. The best thing you could do is either specify the margin of the object floated to the right to be equal to 400-150 (250px), or specify the width of the "some text" object to be equal to (250px).

I think there is only one thing you need to do:

  • Give the "sample text" div a right margin, greater than the width of the right-floated element

That should do it.

Edit: Based on your edit I would suggest you use a span (an inline element) instead of a div (a block element). If you always need it to be on a separate line, you can give both that element and the element after it a clear:left.

I came to know this question so late, anyway I am fixing your problem. See this Fiddle

You need to define display: table;

As this:

<div style="background-color:red;border:thin black solid;display: table;">Some sample text</div>

Note display: block; won't work as display: table; and you could also use display: table-cell;

You may also like this question: css inline-block vs table-cell

Category:html Views:0 Time:2009-10-14

Related post

  • how to get the css floating property to work with four divs? 2011-11-13

    how to get the css floating property to work with four divs? I have four divs I would like to get algin using the layout as an example, div One - div two div Three - div Four Here is what I attempted using the following css and html code but not lini

  • CSS floated divs with form elements disappear in Safari 3 on a mac 2008-10-10

    I'm roughing a layout together and doing some browser testing. Never came across this issue before, check out the contact form in the footer of this page http://staging.terrilynn.com/fundraising/ There is a div with a width of 298px floated to the ri

  • CSS float and HTML questions 2008-11-17

    I have some questions about basic CSS that I was unable to understand or find an answer for. First, I tried placing 3 div tags within another div tag. The first main div tag containing the 3 other tags had nothing set for it except a size, which was

  • IE CSS Float Problem 2009-06-18

    The output of this code looks pretty much identical in FF, Chrome and Safari on Windows. In IE7 it looks weird. For all other browsers the frame div exactly wraps the canvas div even though there is a 24X24 div in the frame but outside the canvas. IE

  • CSS Floats & Collapsing White Space 2009-11-24

    I have a page generated by a database. It creates a DIV for each entry (extremely simplified for sake a question). Each of these DIVs have a set width, and float left. However, these DIVs don't have a set height, so occasionally the following as depi

  • CSS: Floating div to right causes container div to stretch full width of screen in IE 2010-02-04

    I saw a similar question here, and did not see an answer. I'm having an issue where an element is floated right, inside a parent div, and it's causing the div to stretch the entire width of the page in IE7. This does not happen in any other browsers

  • CSS: float:left with a margin-right doesn't push all elements away 2010-03-28

    I'd like all my content to flow around an image. To do this, I simply did img#me { width: 300px; float: left; margin-right: 30px; } This works for text wraping, but other elements go behind it. For example <style> h2 { background: black; color:

  • Issue with css float - Hindering IE6 from putting div in next line 2010-05-12

    I've got an issue with floating divs in IE6. There's one navigation div on the left and one content div for the rest of the page. They've got the following css values: #navigation { float: left; width: 185px; padding-left: 5px; overflow: auto; height

  • jQuery slideDown + CSS Floats 2010-05-12

    I'm using a HTML Table with several rows. Every second row - containing details about the preceding row - is hidden using CSS. When clicking the first row, the second row gets showed using jQuery show(). This is quite nice, but I would prefer the sli

  • Simple CSS Float Problem 2010-06-01

    I have a simple problem with an image going under text, rather than beside it. Markup is like this: <div class="footer"> <p>bla bla bla bla</p> <a href="url_here" class="next" title="Next"><span>Next</span></a

  • How to explain CSS Float in general language? 2010-06-08

    How to explain CSS Float in general language (not Programming) ? Is there any real life example to take a example to explain CSS Float? Is there any Slideshow in very simple way to explain float? --------------Solutions------------- Explain it exactl

  • What is the proper, standard way to handle CSS floats 2010-07-01

    I have always thought that the correct way to handle CSS floats was to use either a clear div, :after pseudo class, or overflow: auto on the parent. As I understand it clear is designed to clear floats and expand the parent element back to normal. Th

  • HTML/CSS Float Right inside 2010-08-18

    I have this code: <p><a href="#">Blah</a> | <span>stuff</span><span>1</span><span>dfh5heh</span> | June 17, 2010 <a href="#" style="float:right;">46884</a></p> It's very trivial,

  • IE wrong paragraph using CSS float layout 2010-09-22

    I am learning XHTML and CSS and I got into trouble. On my learning page I am using CSS float layout. I have floted:left side menu, and to properly render text into content section I have set its margin to be exact same size as left menu. My problem i

  • CSS - Float & Resizing Windows 2011-01-05

    I have two divs on a page and one of them is floating on the right. I've set a min-width on the div which is not floating. As I make my browser window smaller, the floating div encroaches upon the non-floating div as expected but continues past the m

  • CSS float prevents expansion of page 2011-01-11

    This is a very common scenario, I think. I'm relatively (no pun intended) new to CSS and am having an issue with float alignment. I have two divs, one which will hold main content to be floated left and the other for navigation, which should be float

  • CSS Float left question 2011-02-17

    The following code is injected into the page via jQuery. I can't change that, but I can change the css: <div id="slideshow-prevnext" class="slideshow-prevnext"> <a id="prev" class="left" href="#"><span class="invisible">Prev</spa

  • jQuery and CSS float issues with Demo 2011-03-29

    I have a jQuery CSS float issue on the sidebar on the following page. The containing DIV does not expand when the content internal does. Thus we cannot determine the size of the DIV for use in another script. On the following page, you will see a whi

  • Css Float problem, different height divs 2011-04-17

    i was wondering if there is anyway to float many divs with different heights next to each others without pushdown effect, eg:! ||||||| ||2||| |||||||| ||||||| |||||||| ||||3|| ||1|| |||||||| ||||||| ?|||||||| ||||||| ||4|||| ||||||||| the problem is

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.167 (s). 11 q(s)