Question

Hi , I want to make an html page like shown in image. Two div next to each other. Div on right has more height. The text starts below div1, but also has to come below div2.
What html should I write for this?

I displayed images next to each other using float:left; But the div containing text starts below div2 , leaving an empty space below div1 to the start of text.
Div2 height not fixed. Div1 has fixed height.

Answer 1

Here is the fiddle

<div id='d1'>
  This is left one...
</div>

<div id='d2'>
  This is right one...
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ultricies pulvinar venenatis.
Maecenas a erat sed augue viverra volutpat sit amet sed nulla. Nunc velit metus, vulputate sit amet interdum ut, egestas quis velit. Nunc porta nisl nisi. Duis vitae elit diam. Proin lacinia sodales nulla non aliquet. Duis egestas nunc in nisl pulvinar scelerisque.
Phasellus dignissim dolor sed massa fermentum sagittis. Phasellus nec neque sed nibh ultricies elementum facilisis in turpis. Pellentesque id arcu orci, non feugiat massa. Nunc dapibus volutpat arcu vitae luctus.
Phasellus sollicitudin enim tellus. Sed et lectus vitae urna sollicitudin sagittis. Pellentesque volutpat massa id erat vestibulum sed sodales nulla ullamcorper. Nullam convallis commodo massa id consectetur.

And the CSS

#d2 {
  width: 40%;
  height: 125px;
  border: solid #000000 2px;
  float: right;
}

---

Edit

To rectify the problem pointed out by Sowmya; you need to add following in CSS:

div {
  margin: 5px;
}

#d1 {
  border:1px solid black;
  width:100px;
  height:100px;
  float: left;
}

Updated Fiddle