Keeping a div's vertical spacing when it collapses underneath a floated item

Question

I have a div/icon (#user-initials) floated to the left of two other divs: .employee-name and .status.

If the .employee-name line happens to consist of two lines, the .status div gets pushed to the left side, underneath #user-initials. This works fine.

What I'm trying to do is keep the original spacing on top of .status that it had from .employee-name (11px). Once it's below the floated item, however, its margin gets cut to about 6px. See screenshot below for a better idea:

Fiddle: https://jsfiddle.net/kfjtnk9r/1/

.container {
  width: 220px;
  background-color: #fff;
}
.user_img_color,
.user_img_color_large {
  background: #8aa943;
  border-radius: 40px;
  color: #fff;
  float: left;
  font-size: 15px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 40px;
  z-index: 1;
  margin-right: 10px;
}
.employee-name {
  word-wrap: break-word;
}
.status {
  margin-top: 4px;
}
.welcome-message {
  margin-top: 10px;
  font-size: 11px;
  line-height: 15px;
}
div.status-indicator {
  display: inline-block;
  height: 8px;
  width: 8px;
  content: " ";
  line-height: 14px;
  background: #f5c002;
  border-radius: 8px;
  margin: 0 2px 0 0;
  vertical-align: middle;
}
div.status-message {
  display: inline-block;
  font-size: 11px;
  line-height: 14px;
  white-space: nowrap;
  vertical-align: middle;
}

<div class="container">

  <div class="clearfix">
    <div id="user-initials" class="inline-block">
      <div class="user_img_color user_img_color-pending">TH</div>
    </div>
  </div>


  <div class="employee-name">Name Namington</div>

  <div class="status">
    <div class="status-indicator status-indicator-complete"></div>
    <div class="status-message">Status Message</div>
  </div>


  <div class="welcome-message">
    Welcome message Welcome message
    <br>Welcome message Welcome message
  </div>

</div>

Any help would be much appreciated... I've tried everything.

Edit: added better screenshot image

https://jsfiddle.net/wk79s3qf/1/ is the best solution done by **Simon Knittel** but you need to check the supported browsers. — Kishore Chandra, Nov 02 '16 at 19:24
Possible duplicate of [How to disable margin-collapsing?](http://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing) — Zach Saucier, Nov 03 '16 at 18:22

Simon Knittel · Accepted Answer · 2016-11-02T19:32:01.047

3

Solution
You can wrap the icon, name and status message into a container with display: flex; (called flexbox) like this https://jsfiddle.net/wk79s3qf/1/

Flexbox
Flexbox is a new CSS3 feature which allows you to easily create grid-like layouts while not needing margin and float and other tricks.

Cheat Sheet
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Browser Support
http://caniuse.com/flexbox

edited Nov 02 '16 at 19:32

answered Nov 02 '16 at 19:18

Simon Knittel

1,730
3
15
24

I really appreciate it, however, I'm trying to keep the status message flush to the left once it's under the icon. Do you know if that's possible with Flex? I'll be playing around with it. – Tim Nov 02 '16 at 19:57
Can you rephrase that? I don't really get what you want. – Simon Knittel Nov 03 '16 at 07:25
The "Status Message" line -- I'm trying to get that to be left aligned underneath the "TH" green circle. – Tim Nov 03 '16 at 14:03
Wasn't that the issue you wanted to prevent? Sorry, but can you do a small drawing or something like that? – Simon Knittel Nov 03 '16 at 15:08
Sorry! The issue I was trying to prevent was the vertical spacing, not horizontal --- the "TH" icon being floated disregards the top margin on the "Status Message", once it gets pushed below it. So there's the correct amount of vertical spacing between name and status in the first image example and in the second there's too little vertical spacing. – Tim Nov 03 '16 at 15:14

score 0 · Answer 2 · answered Nov 03 '16 at 15:50

0

Your .status rule has in fact a margin: 4px. Change that to 10px (or whatever you like) and it will work:

https://jsfiddle.net/c036a3mg/1/

answered Nov 03 '16 at 15:50

Johannes

64,305
18
73
130

unfortunately, the same problem persists -- only now when the name is just one line there's extra spacing – Tim Nov 03 '16 at 16:00
well, but that's the "real" spacing - it just seems more below the text (as opposed to below the image) because of the line height of the text above it, which includes space for the descenders of letters like j, y, g etc., whereas the image doesn't have extra bottom space like that. – Johannes Nov 03 '16 at 16:23

Keeping a div's vertical spacing when it collapses underneath a floated item

2 Answers2