Sat10 Sat10 - 3 months ago 11
CSS Question

How to position a text div next to an image div perfectly, without text wrapping around it?

I have 4 main divs. The parent div and 3 child divs. The child divs contain an image and some text which is parented by a row div.
How do I get the image div to float to the left and the text div to position beside it on the right, without having the text wrap underneath the image (as my image is smaller the height of the text).
I also would like the image div to be vertically centred against the text div.
Please view what I have and what I want it to look like.What I want it to look like



.wwuContent {
width: 70%;
margin: 0 auto;
background-color: white;
height: 100%;
margin-top: 3px;
padding: 10px 0px;
font-family: arial;
}
.mainWWUContent {
width: 100%;
background-color: #4a61d5;
padding: 10px 0;
}
#wwuRows {
background-color: #4a61d5;
color: white;
margin-bottom: 10px;
padding: 0 20px;
border: solid red 1px;
}
#wwuText {
border: solid blue 1px;
}
#wwuImages img {
width: 90px;
height: auto;
}
#wwuImages {
border: solid green 1px;
float: left;
margin-top: 25px;
}

<div class="wwuContent">
<div class="mainWWUContent">
<div id="wwuRows">
<div id="wwuImages">
<img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg">
</div>
<div id="wwuText">
<h2>Title 1</h2>
<p>Paragraph 1. Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.</p>
</div>
</div>

<div id="wwuRows">
<div id="wwuImages">
<img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg">
</div>
<div id="wwuText">
<h2>Title 2</h2>
<p>Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2.<br> Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2.<br> Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2.<br> Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2.</p>
</div>
</div>

<div id="wwuRows">
<div id="wwuImages">
<img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg">
</div>
<div id="wwuText">
<h2>Title 3</h2>
<p>Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.</p>
</div>
</div>
</div>




Answer

As the Flexbox solution I was going to provide has already been covered, I'll offer an alternative solution which involves setting a margin-left on the text div and positioning the image div absolutely. Note that the value you give the id attribute of each element must be unique so you'll need to make some changes to your markup to correct that.

.wwuContent {
  width: 70%;
  margin: 0 auto;
  background-color: white;
  height: 100%;
  margin-top: 3px;
  padding: 10px 0px;
  font-family: arial;
}
.mainWWUContent {
  width: 100%;
  background-color: #4a61d5;
  padding: 10px 0;
}
#wwuRows {
  background-color: #4a61d5;
  color: white;
  margin-bottom: 10px;
  padding: 0 20px;
  position:relative;
  border: solid red 1px;
}
#wwuText {
  border: solid blue 1px;
  margin-left:90px;
}
#wwuImages img {
  width: 90px;
  height: auto;
  vertical-align:middle;
}
#wwuImages {
  border: solid green 1px;
  left:20px;
  position:absolute;
  top:50%;
  transform:translatey(-50%);
}
<div class="wwuContent">
  <div class="mainWWUContent">
    <div id="wwuRows">
      <div id="wwuImages">
        <img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg">
      </div>
      <div id="wwuText">
        <h2>Title 1</h2>
        <p>Paragraph 1. Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.</p>
      </div>
    </div>
    <div id="wwuRows">
      <div id="wwuImages">
        <img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg">
      </div>
      <div id="wwuText">
        <h2>Title 2</h2>
        <p>Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph
          2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2.
          <br>Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2.
          <br>Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2.
          <br>Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2.</p>
      </div>
    </div>
    <div id="wwuRows">
      <div id="wwuImages">
        <img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg">
      </div>
      <div id="wwuText">
        <h2>Title 3</h2>
        <p>Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph
          3.Paragraph 3.</p>
      </div>
    </div>
  </div>

Comments