CODEWITHSUNDEEP
htmlcss
Vincent Chua
Vincent Chua

Reputation: 1009

Make image float with text wrapping around the image?

How do you make an image with text wrapping around it when both the image and text are in separate divs?

I've recreated the scenario below:

http://codepen.io/vincentccw/full/yatsr/

The first part is the one I've having problem with styling it, and the second part is what I wanted to achieve.

I can't tweak the HTML since it is actually an extract from a responsive layout that it needs to have the divs set up like this.... Is it possible?

Upvotes: 2

Views: 430

Answers (4)

TribalChief
TribalChief

Reputation: 785

I finally got something that could work!

It uses a pseudo element.

.yourDivWithALotOfText:before {
    content:"";
    padding-left: 100px;
    padding-bottom: 100px;
    float:left;
}

Make sure all your elements are set to:

display: inline;
position: absolute;

Caveat: padding-left and padding-bottom should be set manually.

Demo: http://jsfiddle.net/thauwa/utYkZ/

Upvotes: 1

Suresh Karia
Suresh Karia

Reputation: 18218

Your Modified Code is here: ImageDivInsideTextFlow

html

 <h1>My current setup</h1>

<div class="template-g">
  <div>

  </div>
  <div>
    <h4>Unique Rooftop Bar, Bali</h4>
    <p>
      <figure><div class="fakeImage"></div>
      <figcaption>Photo: Unique Rooftop Bar</figcaption>
    </figure>Finding the perfect sundowner bar has become a Balinese holiday ritual. For the setting alone – 360 degree views of Uluwatu Hills and sunset over the Indian Ocean – the newly opened two-storey Unique Rooftop Bar makes for a serious contender. By day, it’s a pool club, with a raised infinity-edged 25-metre pool facing the sunset. In the evening, it turns into a cocktail bar and restaurant serving an Asian-inspired menu. The earthy interior design concept is an extension of its lush green surroundings, with features such as exposed timber trusses, recycled shipwood walls, andesite stone flooring and mother-of-pearl ceiling. Unique is of course part of the new RIMBA Jimbaran Bali resort, which opened last year in the forest grounds of the well-acclaimed cliff-top Ayana Resort and Spa. www.rimbajimbaran.com</p>

     <p>Finding the perfect sundowner bar has become a Balinese holiday ritual. For the setting alone – 360 degree views of Uluwatu Hills and sunset over the Indian Ocean – the newly opened two-storey Unique Rooftop Bar makes for a serious contender. By day, it’s a pool club, with a raised infinity-edged 25-metre pool facing the sunset. In the evening, it turns into a cocktail bar and restaurant serving an Asian-inspired menu. The earthy interior design concept is an extension of its lush green surroundings, with features such as exposed timber trusses, recycled shipwood walls, andesite stone flooring and mother-of-pearl ceiling. Unique is of course part of the new RIMBA Jimbaran Bali resort, which opened last year in the forest grounds of the well-acclaimed cliff-top Ayana Resort and Spa. www.rimbajimbaran.com</p>     <p>Finding the perfect sundowner bar has become a Balinese holiday ritual. For the setting alone – 360 degree views of Uluwatu Hills and sunset over the Indian Ocean – the newly opened two-storey Unique Rooftop Bar makes for a serious contender. By day, it’s a pool club, with a raised infinity-edged 25-metre pool facing the sunset. In the evening, it turns into a cocktail bar and restaurant serving an Asian-inspired menu. The earthy interior design concept is an extension of its lush green surroundings, with features such as exposed timber trusses, recycled shipwood walls, andesite stone flooring and mother-of-pearl ceiling. Unique is of course part of the new RIMBA Jimbaran Bali resort, which opened last year in the forest grounds of the well-acclaimed cliff-top Ayana Resort and Spa. www.rimbajimbaran.com</p>
    <p class="articleHighlight">Drink in the view</p>
  </div>
</div>

<hr />
<h1>What I want to achieve</h1>

<div class="template-h">

  <div>

    <figure><div class="fakeImage"></div>
      <figcaption>Photo: Unique Rooftop Bar</figcaption>
    </figure>

    <h4>Unique Rooftop Bar, Bali</h4>
    <p>Finding the perfect sundowner bar has become a Balinese holiday ritual. For the setting alone – 360 degree views of Uluwatu Hills and sunset over the Indian Ocean – the newly opened two-storey Unique Rooftop Bar makes for a serious contender. By day, it’s a pool club, with a raised infinity-edged 25-metre pool facing the sunset. In the evening, it turns into a cocktail bar and restaurant serving an Asian-inspired menu. The earthy interior design concept is an extension of its lush green surroundings, with features such as exposed timber trusses, recycled shipwood walls, andesite stone flooring and mother-of-pearl ceiling. Unique is of course part of the new RIMBA Jimbaran Bali resort, which opened last year in the forest grounds of the well-acclaimed cliff-top Ayana Resort and Spa. www.rimbajimbaran.com</p>

     <p>Finding the perfect sundowner bar has become a Balinese holiday ritual. For the setting alone – 360 degree views of Uluwatu Hills and sunset over the Indian Ocean – the newly opened two-storey Unique Rooftop Bar makes for a serious contender. By day, it’s a pool club, with a raised infinity-edged 25-metre pool facing the sunset. In the evening, it turns into a cocktail bar and restaurant serving an Asian-inspired menu. The earthy interior design concept is an extension of its lush green surroundings, with features such as exposed timber trusses, recycled shipwood walls, andesite stone flooring and mother-of-pearl ceiling. Unique is of course part of the new RIMBA Jimbaran Bali resort, which opened last year in the forest grounds of the well-acclaimed cliff-top Ayana Resort and Spa. www.rimbajimbaran.com</p>
         <p>Finding the perfect sundowner bar has become a Balinese holiday ritual. For the setting alone – 360 degree views of Uluwatu Hills and sunset over the Indian Ocean – the newly opened two-storey Unique Rooftop Bar makes for a serious contender. By day, it’s a pool club, with a raised infinity-edged 25-metre pool facing the sunset. In the evening, it turns into a cocktail bar and restaurant serving an Asian-inspired menu. The earthy interior design concept is an extension of its lush green surroundings, with features such as exposed timber trusses, recycled shipwood walls, andesite stone flooring and mother-of-pearl ceiling. Unique is of course part of the new RIMBA Jimbaran Bali resort, which opened last year in the forest grounds of the well-acclaimed cliff-top Ayana Resort and Spa. www.rimbajimbaran.com</p>
    <p class="articleHighlight">Drink in the view</p>
  </div>
</div>

css

  head,body{
  width:100%;
  height:100%;
}

*{
  margin:0;
  padding:0;
}

hr{
  margin:20px 0; 
}

.fakeImage{
  width:50%;
  height:200px;
  background:red;
  float:left;
  display:inline-block;
}


.template-g{
  width:100%;
  overflow:hidden;
}

.template-g>div{
  float:left;
}

.template-g>div:first-child{/*width for image*/
  width:30%
}

.template-g>div:last-child{
  width:70%
}


.template-h>div{
  width:100%
}

.template-h figure{
  width:600px;
  float:left;
}

Upvotes: 1

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

Use image inside your div or paragraph and assign image to align left/right with horizontal and vertical space.

Some Sample code:

  <img src="http://i-cdn.phonearena.com/images/article/32854-image/First-samples-from-Sonys-new-13MP-stacked-camera-sensor-capable-of-HDR-video-show-up.jpg" border="0" align="left" hspace="10" />

FIDDLE DEMO

Upvotes: 1

Rahiil
Rahiil

Reputation: 110

so your image is in a <div>. So give some id to that DIV and use this css
#divid {float:left} Is it working ?

Upvotes: 0

Related Questions