Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Wrapping text around images in opposite corners

    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

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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
    Code:
    <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>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Additinal Info

    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.



    Code:
    .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;
    }

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello janosf,
    Try it like this... obviously, you'll need to use your own images and edit the width/height appropriately:
    Code:
    <!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.
    Last edited by Excavator; 12-28-2007 at 09:01 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •