Richard Monjed Richard Monjed - 7 days ago 6
HTML Question

Keep Divs on the same line when resizing responsively

I am having trouble figuring out how to keep my divs on the same line. I wanted all images to remain on the same line, scaling down/up in size as the screen adjusted without any overflow or horizontal scrolling. Each image is a link that javascript code will run to display hidden text.

Here is the site where the issue lies: My website

I have created a jsfiddle for all my code: jsfiddle code

HTML Code:

<ul class="tab">
<li>
<a href="javascript:void(0)" class="tabimg" onclick="openTab(event, 'Newborns')">
<img src="http://debora.com.au/wp-content/uploads/revslider/food-carousel/muesli-e1478867936723.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:void(0)" class="tabimg" onclick="openTab(event, 'Children')">
<img src="http://debora.com.au/wp-content/uploads/revslider/food-carousel/muesli-e1478867936723.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:void(0)" class="tabimg" onclick="openTab(event, 'Families')">
<img src="http://debora.com.au/wp-content/uploads/revslider/food-carousel/muesli-e1478867936723.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:void(0)" class="tabimg" onclick="openTab(event, 'Lifestyle')">
<img src="http://debora.com.au/wp-content/uploads/revslider/food-carousel/muesli-e1478867936723.jpg" alt="">
</a>
</li>
</ul>

<div id="Newborns" class="tabcontent">
<h3>Newborns</h3>
<p>London is the capital city of England.</p>
</div>

<div id="Children" class="tabcontent">
<h3>Children</h3>
<p>Paris is the capital of France.</p>
</div>

<div id="Families" class="tabcontent">
<h3>Families</h3>
<p>Tokyo is the capital of Japan.</p>
</div>

<div id="Lifestyle" class="tabcontent">
<h3>Lifestyle</h3>
<p>Tokyo is the capital of Japan.</p>
</div>


CSS

/* Style the list */
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
text-align: center;
}

/* Float the list items side by side */
ul.tab li {
float: left;
}

/* Style the links inside the list items */
ul.tab li a {
display: inline-block;
color: black;
text-align: center;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {
background-color: #ddd;
}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {
background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

/*style the images*/
.tabimg{
max-width: 100%;
height: auto;
border: 3px solid blue;
}


I checked numerous questions on here and scoured W3schools but can't find a solution.

I believe I am doing something wrong with the container (sorry I am still a beginner).

Thank you,

Richard

Answer

All credit goes to Tommy Schmidt who created the jsfiddle: jsFiddle created by Tommy

I'll post the code so if the link ever dies the answer will still be available for those who may need it in future:

HTML:

<ul class="tab">
  <li>
    <a href="#" class="tabimg" data-city-name="Newborns">
      <img src="http://debora.com.au/wp-content/uploads/revslider/food-carousel/muesli-e1478867936723.jpg" alt="">
    </a>
  </li>
  <li>
    <a href="#" class="tabimg" data-city-name="Children">
      <img src="http://debora.com.au/wp-content/uploads/revslider/food-carousel/muesli-e1478867936723.jpg" alt="">
    </a>
  </li>
  <li>
    <a href="#" class="tabimg" data-city-name="Families">
      <img src="http://debora.com.au/wp-content/uploads/revslider/food-carousel/muesli-e1478867936723.jpg" alt="">
    </a>
  </li>
  <li>
    <a href="#" class="tabimg" data-city-name="Lifestyle">
      <img src="http://debora.com.au/wp-content/uploads/revslider/food-carousel/muesli-e1478867936723.jpg" alt="">
    </a>
  </li>
</ul>

<div id="Newborns" class="tabcontent">
  <h3>Newborns</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Children" class="tabcontent">
  <h3>Children</h3>
  <p>Paris is the capital of France.</p>
</div>

<div id="Families" class="tabcontent">
  <h3>Families</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<div id="Lifestyle" class="tabcontent">
  <h3>Lifestyle</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

CSS:

/* Style the list */

ul.tab {
  whitespace: nowrap;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  text-align: center;
}

/* Style the a tags */
ul.tab li a {
  display: inline-block;
  color: black;
  text-align: center;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}


/* Change background color of links on hover */

ul.tab li a:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

ul.tab li a:focus,
.active {
  background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}


/*style the images*/

.tabimg {
  box-sizing: border-box;
  border: 3px solid blue;
}

.tab {
  font-size: 0; /* To get rid of the space below the li tags */
  display: inline-block;
  /* change this to display: block; in order to make the container as wide as the page is */
  box-sizing: border-box;
  overflow: hidden;
  /* to clear the float */
}

.tab li {
  box-sizing: border-box;
  float: left;
  width: 25%;
}

.tab li a {
  width: 100%; /* remove this if you dont want the images to resize if the container is as wide as the page (if .tab is display: block;*) */
}

.tab li img {
  width: 100%;
  display: block;
  box-sizing: border-box;
}

Javascript:

/* Simple foreach as the js foreach method is not supported by IE9 and you may want to support it.
CanIUse: http://caniuse.com/#search=foreach */
function simpleForEach(array, callback) {
  for (var i = 0; i < array.length; i++) {
    callback(array[i], i);
  }
};

/* Parts of this can be done with pure css.
This function should executed on load:
    document.addEventListener("load", load);
or on DOMContentLoaded:
    document.addEventListener("DOMContentLoaded", load);
CanIUse: http://caniuse.com/#search=DOMContentLoaded. */
function load() {
  var tabimgs = document.getElementsByClassName("tabimg");
  // for each tabimg
  simpleForEach(tabimgs, function(tabimg) {
    var cityName = tabimg.getAttribute("data-city-name");
    // add the click event listener
    tabimg.addEventListener("click", function(evt) {
      // onclick do:
      // hide all tabcontents
      simpleForEach(document.getElementsByClassName("tabcontent"), function(tc) {
        tc.style.display = "none";
      });
      // remove the active class
      simpleForEach(document.getElementsByClassName("tabimg"), function(ti) {
        ti.className = ti.className.replace(" active", "");
      });
      // show the current tab, and add "active" class to the link that opened the tab
      document.getElementById(cityName).style.display = "block";
      tabimg.className += " active";
    });
  });
};
// in order to make it work in jsfiddle
load();