CSS: One DIV each line, stack image and text horizontally within a DIV, and apply margins

Question

I wrote the code below, and it kind of works except that margins are not working. See the image below. I want margins between items and between the image and the text. How can I get the layout I want? I don't have to use float=left if there is a better way.

.item {
  clear: both;
  margin-bottom: 1em;
  display: block;
}

.leftImage {
  float: left;
}

.rightText {
  margin-left: 1em;
}

<div class="item">
  <img class="leftImage" src="http://via.placeholder.com/640x360" />
  <p class="rightText">Hello <br/> world.</p>
</div>

<div class="item">
  <img class="leftImage" src="http://via.placeholder.com/640x360" />
  <p class="rightText">Hello <br/> world.</p>
</div>

The problem is that in the `item` divs, you have floating elements, so the `item` does have margin on the bottom, but the float is taking it out of the element flow. You need to clear the float on the `item` div. Create a CSS rule `.item::after { content: ''; display: block; clear: both; }` Also, add `float: left` to your `.rightText` — disinfor, Sep 08 '19 at 20:29

disinfor · Accepted Answer · 2019-09-08T20:51:41.710

0

Here's the answer with keeping your floats, using a pseudo element to clear the floating elements in item.

.item {
  clear: both;
  margin-bottom: 1em;
  display: block;
}

.item::after {
  content: '';
  display: block;
  clear: both;
}

.leftImage {
  float: left;
}

.rightText {
  margin-left: 1em;
  float: left;
}

<div class="item">
  <img class="leftImage" src="http://via.placeholder.com/640x360" />
  <p class="rightText">Hello <br/> world.</p>
</div>

<div class="item">
  <img class="leftImage" src="http://via.placeholder.com/640x360" />
  <p class="rightText">Hello <br/> world.</p>
</div>

Here's the same layout, removing floats, using display: flex on your item.

.item {
  display: flex;
  margin-bottom: 1em;
}

.rightText {
  margin-left: 1em;
}

<div class="item">
  <img class="leftImage" src="http://via.placeholder.com/640x360" />
  <p class="rightText">Hello <br/> world.</p>
</div>

<div class="item">
  <img class="leftImage" src="http://via.placeholder.com/640x360" />
  <p class="rightText">Hello <br/> world.</p>
</div>

In regards to the top margin on the .rightText, the browser is adding that. You can remove that using margin-top: 0.

edited Sep 08 '19 at 20:51

answered Sep 08 '19 at 20:34

disinfor

10,865
2
33
44

Thank you. I was writing about the text's left margin not working, but adding float to it as your updated answer, all worked. – Damn Vegetables Sep 08 '19 at 20:37
Glad you got it working! You can use either example I provided. Please mark this answer as accepted if it meets your requirements. – disinfor Sep 08 '19 at 20:38
1

The second one using `flex`, too, and it was simpler, so I will use that instead. I was trying to mark it as the answer, but the system said I have to wait a minute. I'll do it after adding this comment. – Damn Vegetables Sep 08 '19 at 20:41
There is one problem. The text is not aligned with the image (to the top of the DIV). There is a margin above the text. I think somehow the item's bottom margin is affecting the text. Can it be fixed? – Damn Vegetables Sep 08 '19 at 20:46
1

You can add `margin-top: 0` to the `rightText`. The browser is automatically adding that margin. If you use the dev tools in your browser, you'll see that the browser styles are adding `margin-top: 16px` – disinfor Sep 08 '19 at 20:48

ManUtopiK · Answer 2 · 2019-09-08T20:38:21.137

0

Easiest way is to use display:flex; instead:

.item {
  margin-bottom: 1em;
  display: flex;
}

.rightText {
  margin-left: 1em;
}

<div class="item">
  <img class="leftImage" src="http://via.placeholder.com/320x180" />
  <p class="rightText">Hello <br/> world.</p>
</div>

<div class="item">
  <img class="leftImage" src="http://via.placeholder.com/320x180" />
  <p class="rightText">Hello <br/> world.</p>
</div>

edited Sep 08 '19 at 20:38

answered Sep 08 '19 at 20:34

ManUtopiK

4,495
3
38
52

You don't need `clear` in the `.item` div, nor do you need `float` on the `.leftImage` div. If you look at my answer, I have the flex example as well. – disinfor Sep 08 '19 at 20:36
You're true. I just copy-past code as provided. I remove it. – ManUtopiK Sep 08 '19 at 20:37

score 0 · Answer 3 · answered Sep 08 '19 at 20:38

The quickest fix to containers of floating elements is overflow: hidden:

.item {
  clear: both;
  margin-bottom: 1em;
  display: block;
  overflow: hidden;
  
}

.leftImage {
  float: left;
}

.rightText {
  margin-left: 1em;
}

<div class="item">
  <img class="leftImage" src="http://via.placeholder.com/640x360" />
  <p class="rightText">Hello <br/> world.</p>
</div>

<div class="item">
  <img class="leftImage" src="http://via.placeholder.com/640x360" />
  <p class="rightText">Hello <br/> world.</p>
</div>

CSS: One DIV each line, stack image and text horizontally within a DIV, and apply margins

3 Answers3