...

View Full Version : Wrapping text around images in opposite corners



janosf
12-28-2007, 02:24 PM
I have started working with float based layouts and I am stumped on a simple problem. Can somebody point me in the right direction? Her is the issue:

I have 600x600 div container. I am trying to put an image in the top left corner and another one in the bottom right corner. I want text wrap around both of them. A crude representation is below. The O's representing the images and the xxx the text. Both the images and text are dynamically loaded so I don't know their sizes and length. The images will never overlap and they have to remain in their respective corners even if the text does not reach to the bottom. I am floating the top image to the left and the right image to the right. The text nicely wraps around both and expands on the bottom but I cannot get the right image to the bottom of the container. If I change the right image position to absolute and set the top attripute, the text gets covered by the image.

OOOOOO xxxxxxxxxxxxxxxxxxxxxxxxxx
OOOOOO xxxxxxxxxxxxxxxxxxxxxxxxxx
OOOOOO xxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxx OOOOOOO
xxxxxxxxxxxxxxxxxxxxxxxxx OOOOOOO
xxxxxxxxxxxxxxxxxxxxxxxxx OOOOOOO

effpeetee
12-28-2007, 02:50 PM
This may help you.

http://www.maxdesign.com.au/presentation/page_layouts/

It would also help if we could see your code. A url would be even better.

Frank

abduraooft
12-28-2007, 03:21 PM
A float:left to the first image do nicely to position your first image. But to work a float:right on your second image (since this is to be shown at bottom), you may have to insert the img tag in the middle of your text, say

<div style="width:600px;text-align:justify;">
<img src="path-to-left" style="float:left;">
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<img src="path-to-right" style="float:right;">
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
</div>

janosf
12-28-2007, 04:17 PM
I guess what it comes down to is how do I get the text to go above the right image. The current code is below. The length of the text will vary so inserting the right image in the middle will not work.

http://tangentx.com/Archive/AdManager.jpg


.AdManagerLeftImage
{
float:left;
margin-right:5px;
margin-left:4px;
margin-top:10px;
margin-bottom:5px;
}
.AdManagerRightImage
{
float:right;
margin-top:70px;
}
.AdManagerHeaderText
{
text-align:center;
}
.AdManagerBodyText
{
padding-top:10px;
text-align:left;
margin-left:5px;
margin-right:5px;
}

effpeetee
12-28-2007, 04:38 PM
This site may help you.

http://lists.econsultant.com/top-css-layouts-downloads-hacks-galleries-tricks.html

Frank

janosf
12-28-2007, 08:50 PM
Thank you Frank for your help. The resources you have posted are all excellent and and I saved them in my favorites. Unfortunately they don't seem to show any examples of text flowing above the right image. I will repost and rephrase my question with the image. It seems a simple enough problem but there may not be a solution for it.

Janos

Excavator
12-28-2007, 08:59 PM
Hello janosf,
Try it like this... obviously, you'll need to use your own images and edit the width/height appropriately:
<!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" />
<title>Untitled Document</title>
<meta name="" content="authored by http://nopeople.com/Design" />
<style type="text/css">
html, body {
background: #CCCCCC;
}
* {
margin: 0;
padding: 0;
border: none;
}
#container {
width: 400px;
margin: 50px auto;
background: #fff;
overflow: auto;
}
#one {
float: left;
}
#two {
float: right;
}
</style>
</head>
<body>
<div id="container">
<img src="curlybody.gif" alt="description" width="100" height="100" id="one" />
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
<img src="curlybody.gif" alt="description" width="100" height="100" id="two" />
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end container--></div>
</body>
</html>


In your example above, the margin-top: 70px; is what's stopping the text from going above the image. You also have the image presented in the wrong order in the markup.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum