Menu
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:
This is what I want:
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?
678
Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side. float:right; This property is used for those elements(div) that will float on right side.
The clear CSS property sets whether an element must be moved below (cleared) floating elements that precede it. The clear property applies to floating and non-floating elements.
Note: Elements next to a floating element will flow around it. To avoid this, use the clear property or the clearfix hack (see example at the bottom of this page).
How do you float other HTML elements in CSS? As mentioned earlier, any HTML element can be floated in CSS, not just images. Let's say you want a button to float to the left of the text in a container. You can use a class selector to target the button class and define it with the rule float: left or float: right.
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.
58
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.
24
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.)
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
