pls see the atchmnt...... i'm currently workng in a cms project..... and i need to build a html layout as shown in the figure.... there are two pictures in the layout and they are fixed in position and size.... and the text should "flow" between the two pics... i.e the content should be of variable length.... and if it is very lengthy it should flow between the two pictures..... the content is placed in an outer div and the two pics are placed in separate div's inside the outer div....... i hope u all understood the question.... pls help me out..... anyway the direct link to the image is... h*tp://img253.imageshack.us/img253/365/cms1td1.jpg
just float the images so you will have 2 classes like this img_right { float: right; } img_left { float: left; } Code (markup): then just assign the classes to the images such as <img src="imagename.jpg" class="img_right" /> and <img src="image2name.jpg" class="img_left" /> Code (markup): cheers
pls examin the follwing code... <div style="width:350; border: 1px solid gray;"> <img style="float:right;" border="0" src="uplift.jpg" width="151" height="113" /> <p> A safari park is a large nature reserve intended for safari tours and encounters with rare wildlife. They are common in Africa, but many exist elsewhere, including popular parks in England. People who wish to see animals in their natural state will love a trip to the safari. A safari park is a large nature reserve intended for safari tours and encounters with rare wildlife. They are common in Africa, but many exist elsewhere, including popular parks in England. People who wish to see animals in their natural state will love a trip to the safari. </p> <img style="float:left;" border="0" src="uplift.jpg" width="151" height="113" /> </div> the above code produces the following result... in the figure, the position of the second image is not fixed..... the second image will come down as the text increases.... and the position of the image will vary according to the contents....this is not i want.... the position of the image should be fixed and the text should flow in between them......as shown in the previous figure.... nywy thanx for ur reply.....
You will still need to set a fixed position for these images. So for the same styles add position:absolute; and then top:200px; or something close to that.
pls see the code....... <div style="width:350; border: 1px solid gray;"> <img style="float:right;" border="0" src="uplift.jpg" width="151" height="113" /> <p> A safari park is a large nature reserve intended for safari tours and encounters with rare wildlife. They are common in Africa, but many exist elsewhere, including popular parks in England. People who wish to see animals in their natural state will love a trip to the safari. A safari park is a large nature reserve intended for safari tours and encounters with rare wildlife. They are common in Africa, but many exist elsewhere, including popular parks in England. People who wish to see animals in their natural state will love a trip to the safari. A safari park is a large nature reserve intended for safari tours and encounters with rare wildlife. They are common in Africa, but many exist elsewhere, including popular parks in England. People who wish to see animals in their natural state will love a trip to the safari. </p> <img style="float:left;position:absolute;top:200px;left:15px;" border="0" src="uplift.jpg" width="151" height="113" /> </div> will produce the following result.... but small portion of the text will be showned behind the image.... pls see the picture..... the hidden text should be place right to the second image..... ie text should flow between the two images..... is there any way to show the text behind the image..... any idea...???
A little study should make the solution apparent. The empty div is æsthetically displeasing, but there you are. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta name="generator" content="HTML Tidy for Windows (vers 1st February 2003), see www.w3.org" /> <meta name="editor" content="Emacs 21" /> <meta name="author" content="Gary Turner" /> <meta http-equiv="content-type" content="text/html; charset=UTF8" /> <title></title> <style type="text/css"> /*<![CDATA[*/ html, body { margin: 0; padding: 0; } body { font: 100% verdana, sans-serif; } #wrap { width: 500px; margin: 25px auto; padding: 10px; border: 1px solid black; } .leftbank { float: left; clear: left; } .rightbank { float: right; } .spacer { width: 0; height: 300px; } /*]]>*/ </style> </head> <body> <div id="wrap"> <img class="rightbank" src="bullseye.jpg" width="200" alt="" /> <div class="spacer leftbank"> <!-- --> </div> <img class="leftbank" src="bullseye.jpg" width="200" alt="" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent eget arcu. In aliquet. In dignissim nulla ac dui. Aliquam euismod est at erat. In hac habitasse platea dictumst. Proin at orci vel erat bibendum hendrerit. Donec molestie. Quisque in quam. Nulla condimentum turpis eu augue. Proin arcu enim, mattis nec, posuere vestibulum, sollicitudin adipiscing, quam. Nam ac ipsum vel nulla faucibus feugiat. Aenean eget tellus nec erat euismod aliquam. Phasellus rutrum sem in turpis. Aliquam in urna sed ligula dapibus consequat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sollicitudin, nulla eget interdum dignissim, pede odio egestas lacus, commodo porttitor neque risus viverra risus. Sed ullamcorper varius arcu. Maecenas vulputate. Suspendisse potenti. Fusce egestas dui et pede. Nulla dui mi, pulvinar ac, eleifend eget, facilisis at, lectus. Pellentesque laoreet congue neque. In lorem dui, convallis fringilla, viverra blandit, rutrum ac, dolor. Phasellus tristique dignissim leo. Quisque nonummy. Fusce sit amet quam et est mattis facilisis.</p> </div> </body> </html> Code (markup): cheers, gary
Excellent one dude.......n thnx..... but i hav one more doubt...... suppose we want to flow the text as columns.... (as shown in the figure below...the red arrow indicates the text direction) so is there any way to implement this...... anyway thanx a lot for your solution....
Flowed columns are a part of the css3 working draft. The Moz/Gecko browsers experimentally support it. It will be a useful property, but subject to abuse. It's something that works well in print, but poorly on a web page. It's no fun to scroll down to read something, then scroll back up to continue in the next column. I've posted an example of flowed columns. You'll have to use Firefox to view the effect. cheers, gary