Split a div into four separate divs

Question

_{(source: kheper.net)}

The effect I'm going for is the whole square being one div, with each square being a smaller div within the bigger div, correctly aligned, to take up the entire viewport.

Similar to montere.it minus the JavaScript.

I've tried to highlight the problematic bits of code, the corresponding CSS isn't formatting correctly but I've linked a JS bin below. Apologies if my code is spaghetti code, it's less my code and more a copy and paste session gone wild.

#bodyHobbies {
    width: 100%;
    height: 500px;
}

.intbox1 {
    height: 25%;
    width: 100%;
    background-color: #009900;
    margin: auto;
    text-align: center;
}

.intbox2 {
    height: 25%;
    width: 100%;
    background-color: #990000;
    margin: auto;
    text-align: center;
    color: #FFFFFF;
}

.intbox3 {
    height: 25%;
    width: 100%;
    background-color: #000000;
    margin: auto;
    text-align: center;
    color: #FFFFFF;
}

.intbox4 {
    height: 25%;
    width: 100%;
    background-color: #990000;
    margin: auto;
    text-align: center;
    color: #FFFFFF;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="bodyHobbies">
    <div class="intbox1">
        <p>1</p>
        <img src="foobar1.jpg" border="0" />
    </div>
    <div class="intbox2">
        <p>2</p>
        <img src="foobar.jpg" border="0" />
    </div>
    <div class="intbox3">
        <p>3</p>
        <img src="foobar.jpg" border="0" />
    </div>
    <div class="intbox4">
        <p>4</p>
        <img src="foobar.jpg" border="0" />
    </div>
</div>

https://jsbin.com/heyibe/edit?html,css,output

Answer 1

Just added display: inline-table to you #bodyHobbies and added a common class to the intbox divs. Removed the individual intbox stylings related to width and heights.

#bodyHobbies {
  width: 100%;
  height: 500px;
  display: inline-table;
}

.intbox {
  width: 50%;
  height: 50%;
  display: inline-block;
}
.intbox img {
  width: 100%;
}

.intbox1 {
  background-color:#009900;
  margin:auto;
  text-align:center;

}

.intbox2 {
  background-color:#990000;
  margin:auto;
  text-align:center;
  color:#FFFFFF;
}

.intbox3 {
  background-color:#000000;
  margin:auto;
  text-align:center;
  color:#FFFFFF;
}

.intbox4 {
  background-color:#933230;
  margin:auto;
  text-align:center;
  color:#FFFFFF;
}

<div id="bodyHobbies">
    <div class="intbox intbox1"><p>1</p>
      <img src="http://lorempixel.com/900/700/sports/1/" border="0" />
    </div>
    <div class="intbox intbox2"><p>2</p>
      <img src="http://lorempixel.com/900/700/sports/1/" border="0" />
    </div>
    <div class="intbox intbox3"><p>3</p>
      <img src="http://lorempixel.com/900/700/sports/1/" border="0" />
    </div>
    <div class="intbox intbox4"><p>4</p>
      <img src="http://lorempixel.com/900/700/sports/1/" border="0" />
    </div>
</div>

Answer 2

you can done that using css3 flexbox concept

html,body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  }
img{
  width:100%;
  }
#bodyHobbies{
  display:flex;
  flex-flow: row wrap;
  }
.item{
  flex-basis:50%;
  }

<div id="bodyHobbies">
    <div class="intbox1 item"><p>1</p>
      <img src="https://i.sstatic.net/GSqmw.jpg" border="0" />
    </div>
    <div class="intbox2  item"><p>2</p>
      <img src="https://i.sstatic.net/GSqmw.jpg" border="0" />
    </div>
    <div class="intbox3 item"><p>3</p>
      <img src="https://i.sstatic.net/GSqmw.jpg" border="0" />
    </div>
    <div class="intbox4 item"><p>4</p>
      <img src="https://i.sstatic.net/GSqmw.jpg" border="0" />
    </div>
  </div>

Answer 3

At css use vw, vh units to set body, parent element width, height to 100vw, 100vh. Set [class=^"int"] selector position to absolute. Set element left and top properties corresponding to the four positions within the viewport using :nth-of-type() pseudo class. left:0vw, top:0vh; left:50vw, top:0vh; left:0vw, top:50vh, left:50vw, top:50vh.

body {
  width: 100vw;
  height: 100vh;
}
#bodyHobbies {
  width: 100vw;
  height: 100vh;
  display: block;
  position: relative;
  border: 2px solid sienna;
}
[class^="int"] {
  width: 50vw;
  height: 50vh;
  display: block;
  position: absolute;
  border: 2px solid gold;
}
[class^="int"]:nth-of-type(1) {
  left: 0vw;
  top: 0vw;
  background: blue;
}
[class^="int"]:nth-of-type(2) {
  left: 50vw;
  top: 0vh;
  background: green
}
[class^="int"]:nth-of-type(3) {
  left: 0vw;
  top: 50vh;
  background: red;
}
[class^="int"]:nth-of-type(4) {
  left: 50vw;
  top: 50vh;
  background: tan;
}

<div id="bodyHobbies">
  <div class="intbox1">
    <p>1</p>
    <img src="foobar1.jpg" border="0" alt="foobar1" />
  </div>
  <div class="intbox2">
    <p>2</p>
    <img src="foobar.jpg" border="0" alt="foobar2" />
  </div>
  <div class="intbox3">
    <p>3</p>
    <img src="foobar.jpg" border="0" alt="foobar3" />
  </div>
  <div class="intbox4">
    <p>4</p>
    <img src="foobar.jpg" border="0" alt="foobar4" />
  </div>
</div>

jsfiddle https://jsfiddle.net/69zkbjgw/

Answer 4

<div id="bodyHobbies">
    <div class="box">
        <p>1</p>
        <img src="foobar1.jpg" border="0" />
    </div>
    <div class="box">
        <p>2</p>
        <img src="foobar.jpg" border="0" />
    </div>
    <div class="box">
        <p>3</p>
        <img src="foobar.jpg" border="0" />
    </div>
    <div class="box">
        <p>4</p>
        <img src="foobar.jpg" border="0" />
    </div>
</div>

<style>
    .box{width:calc(50% - 2px); margin:2px; float:left; min-height:100px;}
</style>

Answer 5

Try this

<div id="bodyHobbies">
<div class="intbox1"><p>1</p>
  <img src="foobar1.jpg" border="0" />
</div>
<div class="intbox2"><p>2</p>
  <img src="foobar.jpg" border="0" />
</div>
<div class="intbox3"><p>3</p>
  <img src="foobar.jpg" border="0" />
</div>
<div class="intbox4"><p>4</p>
  <img src="foobar.jpg" border="0" />
</div>

CSS

 #bodyHobbies div{
   float: left;
   width: 50%;
  }