CODEWITHSUNDEEP
htmlcss
Kris
Kris

Reputation: 5

How do I place these div's next to each other to create a 3x2 layout

How do place these div's next to each other in a 3x2 row instead of rows of 1.

Should I make the event-box and event-info as one div instead of two separate div's? I've tried to combine them as one div and given the <p> the event-info class but that didn't work out. I've also tried different sizes for both of the div's and the container to maybe push them next to each other, but that also didn't work. See my code below. 

 .event-box{
    height: 5rem;
    width: 30rem;
    float: left;
    clear: both;
    padding: 0;
    margin-top: 1rem;
    text-align: center;
    background: url(/assets/images/placeholderimg4.jpg);}

    .event-info{
    height: 5rem;
    width: 30rem;
    float: left;
    clear: both;
    padding: 0;
    margin: 0;
    text-align: center;
    background-color: rgba(77, 75, 75, 0.1);}

    .container{
    height: 100%;
    width: 64rem;
    word-wrap: break-word;
    overflow-y: hidden;
    padding: 0;}
<div class="container">
			<div class="event-box">
				<h3 class="event-text">Event 1</h3>
			</div>
            <div class="event-info">
				<p>1</p>
			</div>

			<div class="event-box">
				<h3 class="event-text">Event 2</h3>
			</div>
            <div class="event-info">
				<p>2</p>
			</div>

			<div class="event-box">
				<h3 class="event-text">Event 3</h3>
			</div>
            <div class="event-info">
				<p>3</p>
			</div>

			<div class="event-box">
				<h3 class="event-text">Event 4</h3>
			</div>
            <div class="event-info">
				<p>4</p>
			</div>

			<div class="event-box">
				<h3 class="event-text">Event 5</h3>
			</div>
            <div class="event-info">
				<p>5</p>
			</div>

			<div class="event-box">
				<h3 class="event-text">Event 6</h3>
			</div>
            <div class="event-info">
				<p>6</p>
			</div>
            

		</div>

Upvotes: 0

Views: 624

Answers (3)

Dante
Dante

Reputation: 73

You can make use of the power of Flexbox! Wrap each row in a div with class row and each column in a div with class col. Example:

<div class="container">
  <div class="row">

    <div class="col">
      <div class="event-box">
        <h3 class="event-text">Event 1</h3>
      </div>
      <div class="event-info">
        <p>1</p>
      </div>
    </div>

    <div class="col">
      <div class="event-box">
        <h3 class="event-text">Event 2</h3>
      </div>
      <div class="event-info">
        <p>2</p>
      </div>
    </div>

    <div class="col">
      <div class="event-box">
        <h3 class="event-text">Event 3</h3>
      </div>
      <div class="event-info">
        <p>3</p>
      </div>
    </div>

  </div>

  <div class="row">

    <div class="col">
      <div class="event-box">
        <h3 class="event-text">Event 4</h3>
      </div>
      <div class="event-info">
        <p>4</p>
      </div>
    </div>

    <div class="col">
      <div class="event-box">
        <h3 class="event-text">Event 5</h3>
      </div>
      <div class="event-info">
        <p>5</p>
      </div>
    </div>

    <div class="col">
      <div class="event-box">
        <h3 class="event-text">Event 6</h3>
      </div>
      <div class="event-info">
        <p>6</p>
      </div>
    </div>

  </div>
</div>

The CSS for the added elements:

.row {
  width: 100%;
  display: flex;
}
.col {
  width: 33%;
  flex: 1;
}

Edit: CSS Grid might be an even easier solution.

Upvotes: 0

Ryan4545
Ryan4545

Reputation: 46

So I used CSS grid for this. I did combine your event-info and event-box div's together to make them one object in the grid. 

.event-box {
            height: 5rem;
            width: 30rem;
            float: left;
            clear: both;
            padding: 0;
            margin-top: 1rem;
            text-align: center;
            background: url(/assets/images/placeholderimg4.jpg);
        }
        
        .event-info {
            height: 5rem;
            width: 30rem;
            float: left;
            clear: both;
            padding: 0;
            margin: 0;
            text-align: center;
            background-color: rgba(77, 75, 75, 0.1);
        }
        
        .container {
            height: 100%;
            width: 64rem;
            word-wrap: break-word;
            padding: 0;
            display: grid;
            grid-template-columns: auto auto auto;
            grid-template-rows: auto auto;
            grid-gap: 2rem;
        }
<div class="container">
        <div class="event-box">
            <h3 class="event-text">Event 1</h3>
            <div class="event-info">
                <p>1</p>
            </div>
        </div>

        <div class="event-box">
            <h3 class="event-text">Event 2</h3>
            <div class="event-info">
                <p>2</p>
            </div>
        </div>

        <div class="event-box">
            <h3 class="event-text">Event 3</h3>
            <div class="event-info">
                <p>3</p>
            </div>
        </div>
        <div class="event-box">
            <h3 class="event-text">Event 4</h3>
            <div class="event-info">
                <p>4</p>
            </div>
        </div>
        <div class="event-box">
            <h3 class="event-text">Event 5</h3>
            <div class="event-info">
                <p>5</p>
            </div>
        </div>
        <div class="event-box">
            <h3 class="event-text">Event 6</h3>
            <div class="event-info">
                <p>6</p>
            </div>
        </div>
    </div>
So in the container class I added a display of grid (to use grid functions) and then I added grid-template-columns (which allows you to specify how many columns you want to include) and a grid-template-rows to do the same thing for the rows. I then added a grid-gap to separate the div tags a bit but this value can be played with depending on the desired gap.

Upvotes: 2

Reidenshi
Reidenshi

Reputation: 300

You can add a wrap div, like 'event' for it :

  <div class="container">
      <div class='event'>
        <div class="event-box">
            <h3 class="event-text">Event 1</h3>
        </div>
        <div class="event-info">
            <p>1</p>
        </div>
      </div>
      <div class='event'>
        <div class="event-box">
            <h3 class="event-text">Event 2</h3>
        </div>
        <div class="event-info">
            <p>2</p>
        </div>
      </div>
      <div class='event'>
        <div class="event-box">
            <h3 class="event-text">Event 3</h3>
        </div>
        <div class="event-info">
            <p>3</p>
        </div>
      </div>
      <div class='event'>
        <div class="event-box">
            <h3 class="event-text">Event 4</h3>
        </div>
        <div class="event-info">
            <p>4</p>
        </div>
      </div>
      <div class='event'>
        <div class="event-box">
            <h3 class="event-text">Event 5</h3>
        </div>
        <div class="event-info">
            <p>5</p>
        </div>
      </div>
      <div class='event'>
        <div class="event-box">
            <h3 class="event-text">Event 6</h3>
        </div>
        <div class="event-info">
            <p>6</p>
        </div>
      </div>
    </div>

And a little css addition: 

.event{
  display:inline-block;
  width:49%;
}

Try it - https://jsfiddle.net/5vz3Lhwc/

Upvotes: 1

Related Questions