0

I want the image inside each div to float to the left of the text so the text be on the right of the image for each single div. I was able to do this for one div using CSS but once I add more than one div and select all the divs in CSS, it doesn't work anymore. 

.club {
  text-align: left;
  padding: 0px 35px;
  font-weight: bold;
  border-radius: 10px;
  position: relative;
}

img.club {
  position: absolute;
  left: 15px;
  top: 35px;
}
<div class="club">
  <img style="width:300px;height:300px;" src="images/wccs.jpg" />
  <h3>blah blah </h3>
  <p>blah blah
    <p>
</div>

<div class="club">
  <img style="width:300px;height:300px;" src="images/wccs.jpg" />
  <h3>blah blah </h3>
  <p>blah blah
    <p>
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Robot0110
  • 191
  • 8
  • 2
    `img.club` isn't being applied because those images don't have that (or any) class. maybe you meant `.club img`? – j08691 Oct 01 '18 at 16:52

1 Answers1

1

You don't need the relative/absolute positioning. You need float/clear. You also need to set a minimum height to make the layout not overlap. Try removing the min-height property from .club's declaration in this working pen I made to see what happens without it.

Also, what you are trying to do can be done more elegantly and without the kludgy forcing of min-heights by using flexbox or grid. You can check out this CSS cheatsheet I made for a quick summary.

To model the layout better, I used placeholder images. Other than that the HTML is unchanged. The revised CSS is as follows:

{
  text-align: left;
  padding: 0px 35px;
  font-weight: bold;
  border-radius: 10px;
  background-color: yellow;
  min-height: 300px;
}

.club img {
  float: left;
  clear: both;
}
<div class="club">
  <img style="width:300px;height:300px;" src="https://via.placeholder.com/300x300" />
  <h3>blah blah </h3>
  <p>blah blah
    <p>
</div>

<div class="club">
  <img style="width:300px;height:300px;" src="https://via.placeholder.com/300x300" />
  <h3>blah blah </h3>
  <p>blah blah
    <p>
</div>

.club
mplungjan
  • 169,008
  • 28
  • 173
  • 236
vipatron
  • 166
  • 1
  • 8
  • 1
    I created a snippet for you. It is the `[<>]` button in the editor – mplungjan Oct 01 '18 at 17:31
  • Thanks. Still new at the stackOverflow thing. Update: Unfortunately, it doesn't work in the snippet, but does on the pen. – vipatron Oct 01 '18 at 17:33
  • Thank you! this works. One more question, how do you vertically align the text beside the image to be in the center? – Robot0110 Oct 01 '18 at 18:11
  • You should check out the w3schools page on layout within a div. it covers even your original question: https://www.w3schools.com/css/css_align.asp. However, vertical alignment within a div has [already been answered](https://stackoverflow.com/questions/2939914/how-do-i-vertically-align-text-in-a-div). Basically, the best option is to use flexbox. The cheatsheet I linked to explains quickly, but I've updated the pen to show why it works better and simpler than the initial solution – vipatron Oct 01 '18 at 18:25