Hi there, I have tried unsuccessfully to achieve this floating text, as the sample I have attached to this thread. - B,C,D: typical "share" buttons - E,F: images - G: floating text Possible to achieve this? If so, how?
I don't understand the question. Do you want to text wrapped around the other divs or to just sit on top of them? like an overlay.
Back on the problem. Seems I didn't explain properly my question? My question: is it possible to "stack" vertically some float-left images (each one has a different width) and let the text flow on the right? See the sample below:
Back on the problem. Seems I didn't explain properly my question? Try again: is it possible to "stack" vertically some float-left images (each one has a different width) and let the text flow on the right? See the sample below: B,C,D,E,F should be floating images. G is the floating text
Without adding constraints on block sizes, no. You'd have to know when you could break the text into an additional block. In order for 'f' not to drop below 'a' when clearing, 'e2' and 'f' must be in a container with its own block formatting context. 'g' must also be in that container, else it will not wrap 'e2', and wrap 'e1' as a block. But if 'g' is in 'e1', it will not wrap 'a'. The issue lies in the fact that blocks are rectangular only, not any other polygonal shape. In the following code, move 'g' out of 'e1'. Do the same with 'e2' and 'f'. <!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"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" /> <title>Test Page</title> <style type="text/css"> /*<![CDATA[*/ #b, #c, #d, #e2, #f { border: 1px solid blue; height: 100px; margin: 5px; } #a { border: 1px solid black; float: left; margin: 5px; width: 100px; } #e1 { border: 1px solid black; overflow: hidden; margin: 5px; zoom: 1; /*triggers hasLayout in IE6*/ } #e2 { float: left; width: 50px; } #f { clear: left; float: left; width: 100px; } /*]]>*/ </style> </head> <body> <div id="a"> A <div id="b"> B </div> <div id="c"> C </div> <div id="d"> D </div> </div> <div id="e1"> E1 <div id="e2"> E2 </div> <div id="f"> F </div> <div id="g"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam leo mauris, pretium vitae sollicitudin pharetra, imperdiet ac arcu. Sed tincidunt eros odio. Nam in arcu leo; vitae rhoncus purus. Vestibulum vel nisl libero. Quisque consequat lobortis nisl ac pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed feugiat augue eget mi condimentum aliquet! Vivamus vestibulum suscipit dui, in sodales elit dictum quis. Morbi et venenatis orci? Vivamus id ornare elit. Etiam sed tortor orci, vel lobortis leo? In hac habitasse platea dictumst. Vestibulum non tellus lectus, a lacinia nisi. Curabitur ac dolor odio; vitae semper mi. Fusce ornare mauris sed ligula pulvinar tincidunt. Nulla ultrices est non nunc feugiat vulputate.</p> <p>Nullam feugiat magna id massa venenatis pellentesque. In hac habitasse platea dictumst. Donec mattis hendrerit nunc; quis tempus libero cursus et. Morbi augue lorem, pulvinar non aliquam a, dapibus sed est. Sed dignissim pretium nisl eu sollicitudin. Cras feugiat, est eu lobortis malesuada, risus nibh consequat risus, a rhoncus nisi massa pretium mi? Donec non lacus et dolor condimentum bibendum sit amet eu magna. Integer id neque a mauris eleifend tempor. Donec rhoncus commodo nunc a consequat. Integer auctor nisl et arcu facilisis auctor. Sed non dolor ligula, at sodales orci. Cras laoreet aliquam quam accumsan euismod. Sed sagittis, lacus et pharetra tristique, dolor neque convallis lacus, sed eleifend arcu leo sed nulla. Aenean bibendum rhoncus risus, id euismod lacus pretium tincidunt. Morbi fermentum pharetra varius. Etiam sed dui enim, at vestibulum magna. Praesent eget lectus adipiscing tellus aliquam lacinia. Suspendisse potenti. Praesent non varius purus!</p> </div> </div> </body> </html> Code (markup): cheers, gary
Hi mate, thanks for getting into it. A,B,C,D & F have fixed width & height, while E has fixed width and variable height with some 20/30 possible pixel shift. I'm missing your sample.... was it cut out?
You were too quick out of the blocks. You must have been reading in the four minutes between my initial post and the edit adding the forgotten code. cheers, gary
Ok, now I see the code ;-) I have moved out E2,F & G out of E1; doing so, F will drop below A: <!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"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" /> <title>Test Page</title> <style type="text/css"> /*<![CDATA[*/ #b, #c, #d, #e2, #f { border: 1px solid blue; height: 100px; margin: 5px; } #a { border: 1px solid black; float: left; margin: 5px; width: 100px; } #e1 { border: 1px solid black; overflow: hidden; margin: 5px; zoom: 1; /*triggers hasLayout in IE6*/ } #e2 { float: left; width: 50px; } #f { clear: left; float: left; width: 100px; } /*]]>*/ </style> </head> <body> <div id="a"> A <div id="b"> B </div> <div id="c"> C </div> <div id="d"> D </div> </div> <div id="e2"> E2 </div> <div id="f"> F </div> <div id="g"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam leo mauris, pretium vitae sollicitudin pharetra, imperdiet ac arcu. Sed tincidunt eros odio. Nam in arcu leo; vitae rhoncus purus. Vestibulum vel nisl libero. Quisque consequat lobortis nisl ac pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed feugiat augue eget mi condimentum aliquet! Vivamus vestibulum suscipit dui, in sodales elit dictum quis. Morbi et venenatis orci? Vivamus id ornare elit. Etiam sed tortor orci, vel lobortis leo? In hac habitasse platea dictumst. Vestibulum non tellus lectus, a lacinia nisi. Curabitur ac dolor odio; vitae semper mi. Fusce ornare mauris sed ligula pulvinar tincidunt. Nulla ultrices est non nunc feugiat vulputate.</p> <p>Nullam feugiat magna id massa venenatis pellentesque. In hac habitasse platea dictumst. Donec mattis hendrerit nunc; quis tempus libero cursus et. Morbi augue lorem, pulvinar non aliquam a, dapibus sed est. Sed dignissim pretium nisl eu sollicitudin. Cras feugiat, est eu lobortis malesuada, risus nibh consequat risus, a rhoncus nisi massa pretium mi? Donec non lacus et dolor condimentum bibendum sit amet eu magna. Integer id neque a mauris eleifend tempor. Donec rhoncus commodo nunc a consequat. Integer auctor nisl et arcu facilisis auctor. Sed non dolor ligula, at sodales orci. Cras laoreet aliquam quam accumsan euismod. Sed sagittis, lacus et pharetra tristique, dolor neque convallis lacus, sed eleifend arcu leo sed nulla. Aenean bibendum rhoncus risus, id euismod lacus pretium tincidunt. Morbi fermentum pharetra varius. Etiam sed dui enim, at vestibulum magna. Praesent eget lectus adipiscing tellus aliquam lacinia. Suspendisse potenti. Praesent non varius purus!</p> </div> <div id="e1"> E1 </div> </body> </html> Code (markup):
Exactly. That is why you need the containing block for e2 and f, but that block excludes a, so the text can't wrap a. cheers, gary