float left and then hard line break

Forum Moderators: not2easy

Message Too Old, No Replies

float left and then hard line break

Tabi

7:41 pm on Nov 15, 2010 (gmt 0)

I would like to achieve the following effect with text:

Some paragraphs here
line break
image1 image2
line break
additional paragraphs

This could be achieved easily by putting images in a 100% width table.
But I am wondering if it is possible without table, only css.

I inserted image1 just after the first paragraphs and made its style float:left. Then image2 also float:left. Both images take around 60% of the page width. Then I can see no way of typing the additional paragraphs under the images - the text appears to the top right of the second image. Inserting line breaks until the cursor goes under the images is one option. Is there a more elegant css option to do it?

alt131

12:36 am on Nov 16, 2010 (gmt 0)

Hi Tabi, and welcome to WebmasterWorld [webmasterworld.com] ;)

Recall that float:left tells the images to float left of what follows in the code. So the first image is floating to the left of the second image, and the second image is obediently floating to the left of the paragraph. To fix, only float the first image.

If you must float both images, set the para to clear:left.

kockhwie

8:34 am on Nov 16, 2010 (gmt 0)

try add additional <div style="clear:both"></div> as line break. Make your code looks like "table style"

milosevic

9:51 am on Nov 16, 2010 (gmt 0)

Recall that float:left tells the images to float left of what follows in the code.

This is true, but I think floats are easier to understand from the opposite angle - "adding float makes the following elements flow around something (unless cleared)" - this makes it more intuitive to realise why source ordering of floats is important and what clearing does.

birdbrain

10:23 am on Nov 16, 2010 (gmt 0)

Hi there Tabi,

I cannot see what your problem is. ;)

This code meets your requirements...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<base href="http://www.coothead.co.uk/images/"> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="language" content="english">  
 
<title>A paragraph followed by two images and then a paragraph</title> 
 
</head> 
<body> 
 
<p> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac  
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh  
orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes,  
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare  
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam.  
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum  
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna.  
Pellentesque in dui. In eget elit. Praesent eu lorem. 
</p> 
 
<div> 
 <img src="apple.jpg" alt="apple"> 
 <img src="banana.jpg" alt="banana"> 
</div> 
 
<p> 
Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae,  
orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum  
augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet  
interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque  
lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis,  
lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi.  
Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum  
volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla.  
Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque  
metus urna, semper eget, aliquam ac, feugiat nec, massa. 
</p> 
 
</body> 
</html>

birdbrain

Tabi

12:22 pm on Nov 16, 2010 (gmt 0)

Thank you all so much for the replies. I checked them one by one and I was wondering why none of them works for me, while at the same time they work e.g. in w3c test page. Finally found the answer. The real problem is that I am using Drupal and a module "image caption", which surrounds each image with style="display:block". This causes images display one image per line, so I had to float left to display them in one line.

The fix is to add to my custom stylesheet a line overwriting the image caption style and then I can do it without floating or additional div tags. In case someone has a similar problem in the future. (or if I forget) here is the line:

.image-caption-container {
display:inline-block !important;
}

alt131

1:39 pm on Nov 16, 2010 (gmt 0)

Good spotting Tabi!
Just check the display if you are supporting older browsers as inline-block is not always supported.

kockhwie, a clearing div is not required if the para has been set to clear:left.

kockhwie

10:17 am on Nov 23, 2010 (gmt 0)

ah! i m sorry, i thot he is using all elements (the paragraphes) by using DIVs. ;p