locked
How to make text surrounding a picture ?

    Question

  • Hi, Friends,

    Now I wrap many word and a picture in a div tag. Like this:

        <div style ="width: 600px; overflow-y:auto;">
            I have a dream that one day this nation will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident, that all men are created equal.
            "I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners will be able to sit down together at the table of brotherhood.
            I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by the content of their character.
            I am happy to join with you today in what will go down in history as the greatest demonstration for freedom in the history of our nation. Five score years ago, a great American, in whose symbolic shadow we stand today, signed the Emancipation Proclamation. 
            This momentous decree came as a great beacon light of hope to millions of Negro slaves who had been seared in the flames of withering injustice. 
            It came as a joyous daybreak to end the long night of their captivity. 
            But one hundred years later, the Negro still is not free. One hundred years later, the life of the Negro is still sadly crippled by the manacles of segregation and the chains of discrimination. 
            One hundred years later, the Negro lives on a lonely island of poverty in the midst of a vast ocean of material prosperity. 
            One hundred years later, the Negro is still languished in the corners of American society and finds himself an exile in his own land.
             And so we've come here today to dramatize a shameful condition.
            <img src ="/images/2.jpg" style ="width: 120px; height: 100px;" />
        </div>
            

    I want the picture is 'top: 100px; left: 200px;', and the text is surrounding the picture. What should I do?




    • Edited by Lattimore Friday, March 22, 2013 1:40 AM
    Friday, March 22, 2013 1:27 AM

Answers

  • Here is the HTML/CSS for your solution (for Win8 Apps or IE10):

    <html>
    <head>
    <style>
    .container{
    	  display: -ms-grid;
    	width: 600px; overflow-y:auto;
    	-ms-grid-columns: 1fr 120px 1fr;
    	-ms-grid-rows: 1fr 1fr 1fr;
    
    }
    .wrapped{
    	-ms-grid-row: 2;
    	-ms-grid-column: 2;
    	-ms-wrap-flow: both;
    	
    
    }
    .text{
    	-ms-grid-row: 1;
                -ms-grid-column: 1;
                -ms-grid-column-span: 3;
                -ms-grid-row-span: 3;
    
    }
    </style>
    </head>
    
    <body>
    <div class="container" >
    		<div class="wrapped"><img  src ="/images/2.jpg" style ="width: 120px; height: 100px;" /></div>
    		
            <div class="text"><p>I have a dream that one day this nation will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident, that all men are created equal.
            "I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners will be able to sit down together at the table of brotherhood.
            I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by the content of their character.
            I am happy to join with you today in what will go down in history as the greatest demonstration for freedom in the history of our nation. Five score years ago, a great American, in whose symbolic shadow we stand today, signed the Emancipation Proclamation. 
            This momentous decree came as a great beacon light of hope to millions of Negro slaves who had been seared in the flames of withering injustice. 
            It came as a joyous daybreak to end the long night of their captivity. 	
    		
            But one hundred years later, the Negro still is not free. One hundred years later, the life of the Negro is still sadly crippled by the manacles of segregation and the chains of discrimination. 
            One hundred years later, the Negro lives on a lonely island of poverty in the midst of a vast ocean of material prosperity. 
            One hundred years later, the Negro is still languished in the corners of American society and finds himself an exile in his own land.
            And so we've come here today to dramatize a shameful condition.</p></div>
            
    		
    		
        </div>
    </body>
    </html>

    The basics of this are described below, and its based on an experimental CSS3 feature called Exclusions.

    You can take a look in here: CSS3 regions and exclusions

    The problem is that this feature is not enabled in many browsers, what basically does it create a "hole" of any geometrical shape within a text where you can place your image, therefore wrapping it, but MS made IE10 compatible with the "-ms" prefix.

    MSDN CSS3 Exclusions

    More CSS3 Exclusions in IE10

    CSS3 Exclusion example (only for IE10)

    And last but not least, is this MSDN doc called Advanced Layout that might prove useful for other scenarios.




    • Edited by Ealsur Monday, March 25, 2013 1:45 PM added links
    • Marked as answer by Lattimore Tuesday, March 26, 2013 1:01 AM
    Monday, March 25, 2013 1:43 PM

All replies

  • To get the text to wrap around an image you need to use the css property float (read more here: http://msdn.microsoft.com/en-us/library/ie/ms530755(v=vs.85).aspx )

    so for example:

    <div style ="width: 600px; overflow-y:auto;">
      <img class="f" src="/images/2.jpg" style ="width: 120px; height: 100px;" />
            I have a dream that one day this nation will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident, that all men are created equal.
            "I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners will be able to sit down together at the table of brotherhood.
            I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by the content of their character.
            I am happy to join with you today in what will go down in history as the greatest demonstration for freedom in the history of our nation. Five score years ago, a great American, in whose symbolic shadow we stand today, signed the Emancipation Proclamation. 
            This momentous decree came as a great beacon light of hope to millions of Negro slaves who had been seared in the flames of withering injustice. 
            It came as a joyous daybreak to end the long night of their captivity. 
            But one hundred years later, the Negro still is not free. One hundred years later, the life of the Negro is still sadly crippled by the manacles of segregation and the chains of discrimination. 
            One hundred years later, the Negro lives on a lonely island of poverty in the midst of a vast ocean of material prosperity. 
            One hundred years later, the Negro is still languished in the corners of American society and finds himself an exile in his own land.
             And so we've come here today to dramatize a shameful condition.
            
    </div>
    
    <style>
      .f {
         float:right;
      }
    </style>
    

    Note 

    i moved the image to the top of the div, and gave it a class name

    Friday, March 22, 2013 7:04 AM
  • Thanks,

    What I want would not be so simple. I mean that the picture would be surrounded by text at four sides: top, right, bottom and left, like in Microsoft Word.

    Monday, March 25, 2013 3:37 AM
  • Here is the HTML/CSS for your solution (for Win8 Apps or IE10):

    <html>
    <head>
    <style>
    .container{
    	  display: -ms-grid;
    	width: 600px; overflow-y:auto;
    	-ms-grid-columns: 1fr 120px 1fr;
    	-ms-grid-rows: 1fr 1fr 1fr;
    
    }
    .wrapped{
    	-ms-grid-row: 2;
    	-ms-grid-column: 2;
    	-ms-wrap-flow: both;
    	
    
    }
    .text{
    	-ms-grid-row: 1;
                -ms-grid-column: 1;
                -ms-grid-column-span: 3;
                -ms-grid-row-span: 3;
    
    }
    </style>
    </head>
    
    <body>
    <div class="container" >
    		<div class="wrapped"><img  src ="/images/2.jpg" style ="width: 120px; height: 100px;" /></div>
    		
            <div class="text"><p>I have a dream that one day this nation will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident, that all men are created equal.
            "I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners will be able to sit down together at the table of brotherhood.
            I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by the content of their character.
            I am happy to join with you today in what will go down in history as the greatest demonstration for freedom in the history of our nation. Five score years ago, a great American, in whose symbolic shadow we stand today, signed the Emancipation Proclamation. 
            This momentous decree came as a great beacon light of hope to millions of Negro slaves who had been seared in the flames of withering injustice. 
            It came as a joyous daybreak to end the long night of their captivity. 	
    		
            But one hundred years later, the Negro still is not free. One hundred years later, the life of the Negro is still sadly crippled by the manacles of segregation and the chains of discrimination. 
            One hundred years later, the Negro lives on a lonely island of poverty in the midst of a vast ocean of material prosperity. 
            One hundred years later, the Negro is still languished in the corners of American society and finds himself an exile in his own land.
            And so we've come here today to dramatize a shameful condition.</p></div>
            
    		
    		
        </div>
    </body>
    </html>

    The basics of this are described below, and its based on an experimental CSS3 feature called Exclusions.

    You can take a look in here: CSS3 regions and exclusions

    The problem is that this feature is not enabled in many browsers, what basically does it create a "hole" of any geometrical shape within a text where you can place your image, therefore wrapping it, but MS made IE10 compatible with the "-ms" prefix.

    MSDN CSS3 Exclusions

    More CSS3 Exclusions in IE10

    CSS3 Exclusion example (only for IE10)

    And last but not least, is this MSDN doc called Advanced Layout that might prove useful for other scenarios.




    • Edited by Ealsur Monday, March 25, 2013 1:45 PM added links
    • Marked as answer by Lattimore Tuesday, March 26, 2013 1:01 AM
    Monday, March 25, 2013 1:43 PM