WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] CSS text wrap around (6 posts)

  1. kothea
    Member
    Posted 4 years ago #

    hi
    the vertical-align="top" seems to only work for one line of text. which from what i have read is how it should work.

    how do i have just one box with a top right large image and then variable length text that

    a. wraps around the image as in printed media
    b. introduces '...more' functionality half way through the text

    that would really help. otherwise i'm going back to html and IE6!!!

  2. krembo99
    Member
    Posted 4 years ago #

    add more divs .
    #div 1 (contains image and text)
    -- #div 2 (contain image)

    #div 1 {
    width : wahtever% ; /**Bigger then image and #div2**/
    }
    
    #div 2 {
    float :left;
    }

    That is it -

    if you really want to over-do you can add
    {
    clear:none;
    }

  3. kothea
    Member
    Posted 4 years ago #

    That's what I thought but I can't get it to work for the life of me. there needs to be multiple lines of wrapping text down the side of the image which then continues underneath the image.

    <div id="container">
    	<div id="content" >
    	 <div id="floatingimg"><img src="images/home.jpg"/>
    	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et felis quis lacus suscipit placerat. Donec porttitor vehicula fermentum. etc etc...a lot of text.
    	 </div>
    	 </div>
    <div id="sidebar" >Menu</div>
    </div>
    #content {
    	min-width: 478px;
    	min-height:700px;
    	float: left;
    }
    
    	#content floatingimg {
    		width: 249px;
    		height: 369px;
    		float: left;
    		min-height:700px;
    		margin-right: 200px;
    	}
  4. kothea
    Member
    Posted 4 years ago #

    i've tried with the <p> bits as well but can't get it to work.

  5. krembo99
    Member
    Posted 4 years ago #

    Float:left; is all you need .

    in your code, the <p> element (inline) with the text is INSIDE the #floatingimg id

    further more, you can not declare 2 ID´s and then this :

    #content floatingimg {
    		width: 249px;
    		height: 369px;
    		float: left;
    		min-height:700px;
    		margin-right: 200px;
    	}

    either use commas, or in your case, you MUST seperate them.
    Alco , do not use ID , but classes, because i immagine you would want MORE then one image on a page.

    #content .floatingimg

    see also here and here

  6. kothea
    Member
    Posted 4 years ago #

    Sorted, thank you very much

Topic Closed

This topic has been closed to new replies.

About this Topic