Confused about using SPAN vs DIV and natural flow

Question

I have been trying to create a blinking LED with a caption (the relative position between the LED and the caption should be kept at all times) ... I would like the LEDs to be aligned next to each other when the page is wide enough, and to become stacked when the page shrinks (i.e., the LEDs should be responsive).

I am happy with the relative positioning and with the behavior when the page is maximized, but I don't manage to implement the responsive behavior ... I have tried playing around with DIVs, SPANs, inline-block and floating ...

I guess I am confused as to how they interact with each other.

Any suggestions on how to approach/solve this issue?

The CSS is here:

.led {
   height: 20px;
   width: 20px;
   border: 2px solid black;
   border-radius: 20px;
   margin: 40px 60px 20px 60px;
   background: #f2ffe6;
  position: relative;
}

.led_caption {
    width: 700%;
    text-align: center;
    position: absolute;
    display: inline-block;
    top: 30px;
    left: -300%;    
}

The HTML is here:

<div style=" width: 500px; height: 100px; margin: 0 auto; ">
    <div class="led" style="display:inline-block">
        <span class="led_caption"> Caption </span>
    </div>
    <div class="led" style="display:inline-block">
        <span class="led_caption"> Caption </span>
    </div>
    <div class="led" style="display:inline-block">
        <span class="led_caption"> Caption </span>
    </div>
</div>

And the Codepen link is here: http://codepen.io/vpappano/pen/WGYpzm

---

*** EDIT

I have (hopefully) used some of the suggestions/recommendations from Kodie Grantham and Damiano Celent. I have created the following structure:

LED -- holds a 'bulb' and a 'caption' -- see below

.led_bulb {
   height: 20px;
   width: 20px;
   border: 2px solid black;
   border-radius: 20px;
   margin: 10px 40px 20px 65px;
   background: #f2ffe6;
   position: relative;
}

.led_caption {
    width: 700%;
    text-align: center;
    position: absolute;
    top: 30px;
    left: -300%;    
}

.led {
    width: 160px; 
    height: 70px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 10px;
}

@media (max-width: 400px) {
   .led {
     display: block; 
     margin: 0 auto;
   }
}

@media (min-width: 401px) {
   .led {
     display: inline-block; 
   }
}

LED Holder -- holds 2 LEDs -- see below ... The LED holders should show 'next' each other (the screen would show 4 LEDs total), if there is enough room ...

/* http://stackoverflow.com/questions/17188455/how-to-center-multiple-divs-inside-a-container-in-css  */
.led_holder
{
    position: relative; 
    margin: 10px auto; 
    text-align:center;
}

@media (max-width: 800px) {
   .led_holder {
     /* ??? */
     margin: 0 auto;
   }
}

@media (min-width: 801px) {
   .led_holder {
     /* ??? */
   }
}

A single LED Holder is beautifully responsive (2 LEDs ==> 1 LED without a problem).

I am trying to get the same behavior for the combination of 2 LED Holders. The responsive progression would then be: 4 LEDs ==> 2 LEDs ==> 1 LED

I thought I had gotten the hang of it ... but the browser keeps proving me wrong ...

The modified CodePen can be found here ... http://codepen.io/vpappano/pen/PGxKaB

Thank you :-) :-)

---

*** EDIT -- FIXED!! :-)

All,

Thank you for your help and hints .. I fixed the code ...

I initially had

@media (max-width: 800px) {
   .led_holder {
     display: block; 
     margin: 0 auto;
   }
}

@media (min-width: 801px) {
   .led_holder {
     display: inline-block; 
   }
}

but I had forgotten to add

.led_holder {
   position: relative;
}

:-) :-)

Answer 1

I have added a flexbox solution, as long you don't care about prehistoric and ancient browsers, it's good to go.

Let me politely remind you to not use inline styles in the Markup like you did, just do not do it.

Learn to use media queries:

@media screen and (min-width: 980px) {}

This is the syntax, I would always do it element by element, first establish the large screen default, then follow up with a media query for the element, as some elements don't need adjustments and it's easier to read.

Flexbox is something you will have to read about, everyone will have to, it's the responsive design future technology.

As an old school fallback, you can just resort to displaying elements inline-block for large screens and block for small screens(in your case).

Here is the code:

.main{width: 500px; 
height: 100px; margin: 0 auto;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;}

This is just the code for the flexbox wrapper, you need a flexbox wrap, this makes the child elements displayed as flex.

Link to pen:

http://codepen.io/damianocel/pen/gwQWPq

Answer 2

I've changed some html layout like below and use flexbox for this, please have a look

<div class="flex_row">
    <div class="flex_box">
        <span class="led"></span>
        <p> Caption </p>
    </div>
   <div class="flex_box">
        <span class="led"></span>
        <p> Caption </p>
    </div>
    <div class="flex_box">
        <span class="led"></span>
        <p> Caption </p>
    </div>
      <div class="flex_box">
        <span class="led"></span>
        <p> Caption </p>
    </div>
      <div class="flex_box">
        <span class="led"></span>
        <p> Caption </p>
    </div>
      <div class="flex_box">
        <span class="led"></span>
        <p> Caption </p>
    </div>
   </div>

CSS

body{padding:0; margin:0; line-height: 1.1;}
.flex_row
{
     display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
      -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
   -webkit-justify-content:center; /* Safari */
  justify-content:        center;
   -webkit-justify-content: space-around; /* Safari */
  justify-content:         space-around;
    -webkit-align-items: flex-start; /* Safari */
  align-items:         flex-start;
     width: 80%;
    padding: 0 10%;
}
.flex_box
{
    text-align:center;
}
.led {
   height: 20px;
   width: 20px;
   border: 2px solid black;
   border-radius: 20px;
   background: #f2ffe6;
   display:inline-block;
}
@media screen and (max-width: 568px) {
  .flex_row
{
    -webkit-flex-direction: column;
    flex-direction: column;
     width: 98%;
    padding: 0 1%;
}
.flex_box
{
    align-self:center;
}
}

For more screens to handle, you need to add more media screens

Answer 3

To accomplish this you will want to use media queries.

CSS:

.led {
   height: 20px;
   width: 20px;
   border: 2px solid black;
   border-radius: 20px;
   margin: 40px 60px 20px 60px;
   background: #f2ffe6;
   position: relative;
   display: inline-block;
}

@media (max-width: 400px) {
   .led {
     display: block; 
   }
}

.led_caption {
    width: 700%;
    text-align: center;
    position: absolute;
    display: inline-block;
    top: 30px;
    left: -300%;    
}

HTML:

<div style=" width: 500px; height: 100px; margin: 0 auto; ">
    <div class="led">
        <span class="led_caption"> Caption </span>
    </div>
    <div class="led">
        <span class="led_caption"> Caption </span>
    </div>
    <div class="led">
        <span class="led_caption"> Caption </span>
    </div>
</div>