creating a responsive html/css only image slider

Question

My goal here, is to make the html/css slider responsive. Currently, when the width is about that of a standard iPhone, the slider images are odly aligned, and so is text starting below the image slider. Id like to keep the slider as a separate "box" taking up the entire width at all times so that the text wont jump around when scaling the page. I thought this was achieveable by wrapping the entire slider element in a div and setting the width of said element to 100%, but unfortunately not.

I have tried playing around with the slider images for while now, and my initial thought was to use percentages, as i could set a gap of 4% between all 6 spaces, and 16% width for all the slider images, but when i add a percentage width to the sliders, it doesnt apply correctly.

Constraints: I cannot load in external css (Yes, this would be easy with bootstrap), I cannot use Javascrip. Only css and html.

I am doing this on a ghost blog page, hence the constraints.

Take a look at the code here:

<style>
* {
  margin: 0;
  padding: 0;
}

.slider {
  width: 100%;
  position: relative;
  padding-top: 48%;
  margin: 10px auto;
}

.slider>img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transition: all 0.2s;
}

.slider input[name^='slide_switch'] {
  display: none;
}

.slider label {
  margin: 4.6% 0 0 4.6%;
  border: 3px solid #999;
  float: left;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.6;
}

.slider label img {
  display: block;
}

.slider input[name^='slide_switch']:checked+label {
  border-color: #666;
  opacity: 1;
}

.slider input[name^='slide_switch']~img {
  opacity: 0;
}

.slider input[name^='slide_switch']:checked+label+img {
  opacity: 1;
}
</style>

**The Atlanta: **
Insert image
About text (Model, owner, possible notes on the model)
Gallery of the Atlanta

<div class="slider">
  <input type="radio" name="slide_switch_1" id="id1" checked="checked"/>
  <label for="id1">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />
  <input type="radio" name="slide_switch_1" id="id2" />
  <label for="id2">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />
  <input type="radio" name="slide_switch_1" id="id3" />
  <label for="id3">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />
  <input type="radio" name="slide_switch_1" id="id4" />
  <label for="id4">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />
  <input type="radio" name="slide_switch_1" id="id5" />
  <label for="id5">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />
</div>

</br></br></br>
**The Puerto Rico**
Insert image
About text (Model, owner, possible notes on the model)
Gallery of the Puerto Rico

<div class="slider">
  <input type="radio" name="slide_switch" id="id6" checked="checked"/>
  <label for="id6">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />
  <input type="radio" name="slide_switch" id="id7" />
  <label for="id7">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />
  <input type="radio" name="slide_switch" id="id8" />
  <label for="id8">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />
  <input type="radio" name="slide_switch" id="id9" />
  <label for="id9">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />
  <input type="radio" name="slide_switch" id="id10" />
  <label for="id10">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />
      <input type="radio" name="slide_switch" id="id11" />
  <label for="id11">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />
  <input type="radio" name="slide_switch" id="id12" />
  <label for="id12">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />
  <input type="radio" name="slide_switch" id="id13" />
  <label for="id13">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />
  <input type="radio" name="slide_switch" id="id14" />
  <label for="id14">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />
  <input type="radio" name="slide_switch" id="id15" />
  <label for="id15">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />
</div>

</br></br></br>
More body text is written here, and this is to simulate that body text,  More body text is written here, and this is to simulate that body text, 
More body text is written here, and this is to simulate that body text.

Answer 1

You need

.slider {
  overflow: hidden;
}

... to make it extend to include it's floating children. Otherwise, its height will not include the floating elements, making content after the slider fill any space left around the labels.

* {
  margin: 0;
  padding: 0;
}

.slider {
  width: 100%;
  position: relative;
  padding-top: 48%;
  margin: 10px auto;
  overflow: hidden;
}

.slider>img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transition: all 0.2s;
}

.slider input[name^='slide_switch'] {
  display: none;
}

.slider label {
  margin: 4.6% 0 0 4.6%;
  border: 3px solid #999;
  float: left;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.6;
}

.slider label img {
  display: block;
}

.slider input[name^='slide_switch']:checked+label {
  border-color: #666;
  opacity: 1;
}

.slider input[name^='slide_switch']~img {
  opacity: 0;
}

.slider input[name^='slide_switch']:checked+label+img {
  opacity: 1;
}

**The Atlanta: **
Insert image
About text (Model, owner, possible notes on the model)
Gallery of the Atlanta

<div class="slider">
  <input type="radio" name="slide_switch_1" id="id1" checked="checked"/>
  <label for="id1">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />
  <input type="radio" name="slide_switch_1" id="id2" />
  <label for="id2">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />
  <input type="radio" name="slide_switch_1" id="id3" />
  <label for="id3">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />
  <input type="radio" name="slide_switch_1" id="id4" />
  <label for="id4">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />
  <input type="radio" name="slide_switch_1" id="id5" />
  <label for="id5">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />
</div>

</br></br></br>
**The Puerto Rico**
Insert image
About text (Model, owner, possible notes on the model)
Gallery of the Puerto Rico

<div class="slider">
  <input type="radio" name="slide_switch" id="id6" checked="checked"/>
  <label for="id6">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />
  <input type="radio" name="slide_switch" id="id7" />
  <label for="id7">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />
  <input type="radio" name="slide_switch" id="id8" />
  <label for="id8">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />
  <input type="radio" name="slide_switch" id="id9" />
  <label for="id9">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />
  <input type="radio" name="slide_switch" id="id10" />
  <label for="id10">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />
      <input type="radio" name="slide_switch" id="id11" />
  <label for="id11">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />
  <input type="radio" name="slide_switch" id="id12" />
  <label for="id12">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />
  <input type="radio" name="slide_switch" id="id13" />
  <label for="id13">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />
  <input type="radio" name="slide_switch" id="id14" />
  <label for="id14">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />
  <input type="radio" name="slide_switch" id="id15" />
  <label for="id15">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />
</div>

</br></br></br>
More body text is written here, and this is to simulate that body text,  More body text is written here, and this is to simulate that body text, 
More body text is written here, and this is to simulate that body text.

However, having float:left on your labels is not a very responsive friendly solution, as they won't be centered at particular widths. I'd go for a flexbox solution to fix this issue:

.slider {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.slider label {
  margin: 4.6% 15px 0;
}

* {
  margin: 0;
  padding: 0;
}

.slider {
  width: 100%;
  position: relative;
  padding-top: 48%;
  margin: 10px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.slider>img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transition: all 0.2s;
}

.slider input[name^='slide_switch'] {
  display: none;
}

.slider label {
  margin: 4.6% 15px 0;
  border: 3px solid #999;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.6;
}

.slider label img {
  display: block;
}

.slider input[name^='slide_switch']:checked+label {
  border-color: #666;
  opacity: 1;
}

.slider input[name^='slide_switch']~img {
  opacity: 0;
}

.slider input[name^='slide_switch']:checked+label+img {
  opacity: 1;
}
</style>

**The Atlanta: **
Insert image
About text (Model, owner, possible notes on the model)
Gallery of the Atlanta

<div class="slider">
  <input type="radio" name="slide_switch_1" id="id1" checked="checked"/>
  <label for="id1">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />
  <input type="radio" name="slide_switch_1" id="id2" />
  <label for="id2">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />
  <input type="radio" name="slide_switch_1" id="id3" />
  <label for="id3">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />
  <input type="radio" name="slide_switch_1" id="id4" />
  <label for="id4">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />
  <input type="radio" name="slide_switch_1" id="id5" />
  <label for="id5">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />
</div>

</br></br></br>
**The Puerto Rico**
Insert image
About text (Model, owner, possible notes on the model)
Gallery of the Puerto Rico

<div class="slider">
  <input type="radio" name="slide_switch" id="id6" checked="checked"/>
  <label for="id6">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />
  <input type="radio" name="slide_switch" id="id7" />
  <label for="id7">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />
  <input type="radio" name="slide_switch" id="id8" />
  <label for="id8">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />
  <input type="radio" name="slide_switch" id="id9" />
  <label for="id9">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />
  <input type="radio" name="slide_switch" id="id10" />
  <label for="id10">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />
      <input type="radio" name="slide_switch" id="id11" />
  <label for="id11">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />
  <input type="radio" name="slide_switch" id="id12" />
  <label for="id12">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />
  <input type="radio" name="slide_switch" id="id13" />
  <label for="id13">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />
  <input type="radio" name="slide_switch" id="id14" />
  <label for="id14">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />
  <input type="radio" name="slide_switch" id="id15" />
  <label for="id15">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />
</div>

</br></br></br>
More body text is written here, and this is to simulate that body text,  More body text is written here, and this is to simulate that body text, 
More body text is written here, and this is to simulate that body text.

---

Another option to properly center them (if you need to support archaic browsers) is to use display:inline-block; on labels, removing float from them and adding text-align: center to .slider:

.slider {
  text-align: center;
}
.slider label {
  margin: 4.6% 15px 0;
  display: inline-block;
  /* don't forget to remove float:left; ! */
}

---

Also, remember to properly prefix your CSS before deploying. Set > 0% in the Filter box for max browser compatibility.

Answer 2

For the slider label, try display: inline-block; instead of float: left;:

.slider label {
    margin: 4.6% 0 0 4.6%;
    border: 3px solid #999;
    display: inline-block;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.6;
}

As float: left; causes the elements below to fill the space to the right, it can create trouble depending on the situation.

Another option would be to add some css to the style sheet setting the slider element to clear:both on :after (this removes the floating effect for elements that follow.)

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

Here's an example with display:block; instead of float on the .slider label:

* {
  margin: 0;
  padding: 0;
}

.slider {
  width: 100%;
  position: relative;
  padding-top: 48%;
  margin: 10px auto;
}

.slider>img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transition: all 0.2s;
}

.slider input[name^='slide_switch'] {
  display: none;
}

.slider label {
  margin: 4.6% 0 0 4.6%;
  border: 3px solid #999;
  display: inline-block;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.6;
}

.slider label img {
  display: block;
}

.slider input[name^='slide_switch']:checked+label {
  border-color: #666;
  opacity: 1;
}

.slider input[name^='slide_switch']~img {
  opacity: 0;
}

.slider input[name^='slide_switch']:checked+label+img {
  opacity: 1;
}

**The Atlanta: **
Insert image
About text (Model, owner, possible notes on the model)
Gallery of the Atlanta

<div class="slider">
  <input type="radio" name="slide_switch_1" id="id1" checked="checked"/>
  <label for="id1">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />
  <input type="radio" name="slide_switch_1" id="id2" />
  <label for="id2">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />
  <input type="radio" name="slide_switch_1" id="id3" />
  <label for="id3">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />
  <input type="radio" name="slide_switch_1" id="id4" />
  <label for="id4">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />
  <input type="radio" name="slide_switch_1" id="id5" />
  <label for="id5">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />
</div>

</br></br></br>
**The Puerto Rico**
Insert image
About text (Model, owner, possible notes on the model)
Gallery of the Puerto Rico

<div class="slider">
  <input type="radio" name="slide_switch" id="id6" checked="checked"/>
  <label for="id6">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />
  <input type="radio" name="slide_switch" id="id7" />
  <label for="id7">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />
  <input type="radio" name="slide_switch" id="id8" />
  <label for="id8">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />
  <input type="radio" name="slide_switch" id="id9" />
  <label for="id9">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />
  <input type="radio" name="slide_switch" id="id10" />
  <label for="id10">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />
      <input type="radio" name="slide_switch" id="id11" />
  <label for="id11">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />
  <input type="radio" name="slide_switch" id="id12" />
  <label for="id12">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />
  <input type="radio" name="slide_switch" id="id13" />
  <label for="id13">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />
  <input type="radio" name="slide_switch" id="id14" />
  <label for="id14">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />
  <input type="radio" name="slide_switch" id="id15" />
  <label for="id15">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />
</div>

</br></br></br>
More body text is written here, and this is to simulate that body text,  More body text is written here, and this is to simulate that body text, 
More body text is written here, and this is to simulate that body text.