divs move when resizing the page

Question

I have a timeline on a site I'm trying to recreate and when I resize the window to mobile, the divs get separated. I'm a little far into the site and am very cautious about what I need to do to make this work. The timeline has icons (which have their own div) & a icon background (which have their own div too) but I think I need to wrap them around in one larger div to make this work, but not sure how.

See images here for a before I resize and after I resize:

See how the icons get separated from the background?

Html code for each item in timeline:

                    <div class="timeline_item">
                     <div class="timeline_time"><p><em>1 hr ago</em></p></div>
                     <div class="icon_background"></div>
                     <div class="timeline_icon "><i class="ss-icon">doc</i></div>
                     <div class="timeline_text"><p>You read the article </p> </div>                  
                    </div>

CSS:

.timeline_item {
 width: 100%;
 padding-bottom: 17%;
}

.timeline_item .timeline_time {
 float: left;
 width: 20%;
}

.timeline_item .timeline_icon {
 float: left;
 width: 1%;
 }

.timeline_item .timeline_text {
 float: left;
 width: 65%;
 padding-left: 3%;
}

.timeline_icon {
 margin-left: -4%;
 margin-top: 2.5%;
}

Answer 1

Since there was no complete html or css, this is a mobile first approach that requires fairly decent css skills to follow, but it starts off in a logical way for small viewports and adjusts fluidly. The min-width is where the layout for larger view ports starts. The styles before this are global (shared by all view port sizes).

DEMO: http://jsbin.com/zerijo/1/

http://jsbin.com/zerijo/1/edit

CSS:

/*demo only body */
body {
    font-family: sans-serif;
    background:#fff;
    padding:5%;
}

/* ---------- timeline styles ------------ */

.timeline_wrapper:after, .timeline_item:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.timeline_wrapper, .timeline_item {
    display: inline-block
}

* html .timeline_wrapper, * html .timeline_item {
    height: 1%
}

.timeline_wrapper, .timeline_item {
    display: block
}

.timeline_wrapper,
.timeline_wrapper div,
.timeline_wrapper *:before,
.timeline_wrapper *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.timeline_wrapper {
    position: relative;
    padding-top: 10px;
    line-height: 1.5;
}

.timeline_wrapper:before {
    position: absolute;
    top: -5px;
    bottom: 10px;
    left: 15px;
    content: "";
    height: 100%;
    display: block;
    border-right: 1px solid #777;
    width: 1px;
    z-index: -1;
}

.timeline_wrapper p {
    margin: 0
}

.timeline_icon i {
    background: red;
    display: block;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 32px;
    text-align: center;
    font-size: 15px;
    color: #fff;
    float: left;
}

.timeline_text {
    float: left;
    width: 100%;
    padding: 0 0 0 40px;
}

.timeline_time {
    padding-left: 40px
}

.timeline_item {
    width: 100%;
    position: relative;
}
.timeline_item:not(:last-child) {
    padding-bottom: 30px;
}



@media (min-width:480px) { 
    .timeline_wrapper {
        position: relative;
        padding-top: 10px;
    }

    .timeline_wrapper:before {
        left: 27%
    }

    .timeline_item > div {
        float: left;
        position: relative;
    }

    .timeline_time {
        width: 22%;
        text-align: right;
        padding: 0;
        left: -10%;
    }

    .timeline_icon {
        width: 10%;
        min-height: 50px;
        left: 22%;
        top:-5px;
    }

    .timeline_icon i {
        margin: 0 auto;
        float: none;
    }

    .timeline_text {
        float: left;
        width: 100%;
        margin-left: -37%;
        padding: 0 0 0 37%;
    }
}

HTML -- structured differently for mobile then adjusted position at the min-width:

<div class="timeline_wrapper">
 <div class="timeline_item">
  <div class="timeline_icon">
   <i class="your-icon"></i>
  </div>
  <div class="timeline_time">
   <p><em>1 hr ago</em></p>
  </div>
  <div class="timeline_text">
   <p>Lack of peppering one's sentences with gerunds.Lack of peppering one's sentences with gerunds. Lack of peppering one's sentences with gerunds. You read the article </p>
  </div>
 </div>
 <div class="timeline_item">
  <div class="timeline_icon">
   <i class="your-icon"></i>
  </div>
  <div class="timeline_time">
   <p><em>1 hr ago</em></p>
  </div>
  <div class="timeline_text">
   <p>You read the article Lack of peppering one's sentences with gerunds. Lack of peppering one's sentences with gerunds.Lack of peppering one's sentences with gerunds.Lack of peppering one's sentences with gerunds.</p>
  </div>
 </div>
 <div class="timeline_item">
  <div class="timeline_icon">
   <i class="your-icon"></i>
  </div>
  <div class="timeline_time">
   <p><em>1 hr ago</em></p>
  </div>
  <div class="timeline_text">
   <p>You read the article.</p>
  </div>
 </div>

Answer 2

Without access to a proper Jsfiddle Demo, here's one suggestion with a reduced HTML structure which uses pseudo-elements.

You could use an icon-font, sprite or whatever where I have used a single letter.

Codepen Demo

HTML

<div class="timeline">

  <article class="timeline_item">
    <div class="timeline_time">
      <p>1 hr ago<p>
    </div>
    <div class="timeline_text" data-event-type="doc"><p>You read the article </p> </div>                  
  </article>

  <article class="timeline_item">
    <div class="timeline_time">
      <p>1 hr ago<p>
    </div>
    <div class="timeline_text" data-event-type="alert"><p>You have a 'Do Not Miss' Meeting scheduled for tomorrow 9a.m.</p> </div>                  
  </article>

  <article class="timeline_item">
    <div class="timeline_time"><p>1 hr ago<p>
    </div>
    <div class="timeline_text" data-event-type="video"><p>You watched a video</p> </div>                  
  </article>

</div>

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.timeline {
  width:50%;
  margin: 1rem auto;
  border:1px solid lightgrey;
}

.timeline_item {
  display: table;
  width:100%;
}
.timeline_time,
.timeline_text {
  display: table-cell;
  padding:1rem 2rem;
}

.timeline_time {
  width:25%;
  text-align: right;
  border-right:1px solid lightgrey;
}

.timeline_text {
  position: relative;
}
[data-event-type]:before {
  position: absolute;
  content:"";
  width:32px;
  height:32px;
  line-height: 32px;
  text-align: center;
  color:white;
  left:0;
  top:0;
  border-radius: 50%;
  transform:translate(-50%,50%);
}

[data-event-type="doc"]:before {
  content:"D";
  background: #00f;
}

[data-event-type="alert"]:before {
    content:"A";
  background: #f00;
}
[data-event-type="video"]:before {
    content:"V";
  background: #0f0;
}

The techniques shown here might help you wit your current issue(s).

There are, of course, alternatives to this layout method, including floats and actual tables. some of those will require 'fixes' to achieve the 'equal heights' that is native to CSS tables.