Menu
I have a container box1 that has a certain width (which might change depending on its content). That box contains box2 which has a fixed width (it could be an icon). Next to box2, I have box3 with some text. I want the text to use all the space available to the right of box2. With the HTML pasted below, you get:
So far so good. If the text gets longer, it doesn't wrap around box2 (which is what I want), however, it doesn't make box1 grow, which is my problem. You'll tell me "hey, if you made box3 a position: absolute, how could you expect it to make box1 grow?". Well, I don't but then, how can I get box3 to show next to box2, use all the horizontal space available, and make box1 grow if necessary? (Do I need to say that I'd like this work on IE6 onward, and to avoid using a table?)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> #box1 { position: relative } #box3 { position: absolute; left: 2.5em; right: .5em; top: .5em } /* Styling */ #box1 { background: #ddd; padding: 1em 0.5em; width: 20em } #box2 { background: #999; padding: .5em; } #box3 { background: #bbb; padding: .5em; } body { font-family: sans-serif } </style> <script type="text/javascript"> </script> </head> <body> <div id="box1"> <span id="box2">2</span> <span id="box3">3</span> </div> </body> </html> 
361
Use "overflow: hidden" to avoid floating elements from wrapping a container's text. We use flexbox for this use case now. The reason behind this is that " overflow: hidden " will give you a new block formatting context.
To clear a float, add the clear property to the element that needs to clear the float. This is usually the element after the floated element. The clear property can take the values of left , right , and both . Usually you'll want to use both.
Clearing floated content Float has a companion property that allows us to force an element underneath other floated elements: clear . In the example above, if we applied clear: left to the second paragraph it would now fall below the floated image.
You need box 3 to be a block level element, so use display:block and then toss in an overflow:hidden in conjunction with float-ing box 2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> #box1 { } #box2 { float:left; } #box3 { display:block;overflow:hidden; } /* Styling */ #box1 { background: #ddd; padding: 1em 0.5em; width: 20em } #box2 { background: #999; padding: .5em; } #box3 { background: #bbb; padding: .5em; } body { font-family: sans-serif } </style> <script type="text/javascript"> </script> <title>How to do a `float: left` with no wrapping?</title> </head> <body> <div id="box1"> <span id="box2">2</span> <span id="box3">3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br /></span> </div> </body> </html> Amazing all the things overflow:hidden can do :D
192
There are a couple of ways to achieve this. Two common ones is either to have an empty element right after with a clear: both like so (inline css just for demo):
<span class="box1">...</span> <br style="clear:both"/> Another way is to use overflow: hidden like so:
<span class="box1" style="overflow: hidden">...</span> However, there are problems with both of these solutions. With the first one you add unnecessary and ugly markup. And with the second if you want something to be positioned outside of your box (like a position: absolute) it won't be visible.
A more common, modern solution is to use the ::after pseudo-element and clear that like so:
.box1::after { content: ''; display: table; clear: both; } 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
