CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 35

Aligning Divs Correctly

newbie to coding here currently practicing display and positioning. I have created a webpage which has several divs all containing the same information as is shown in my coding below (image, heading, one-line paragraph). These display nicely in vertical order scrolling down the page, however I am now looking to position these divs side by side in rows of 2 scrolling down the page as opposed to one on top of the other. So 2 images side by side with their respected information sitting directly under them. I've tried various times to get this right but I haven't quite got my head around it yet, so could anybody please explain the best way to do this? Do I need to use a grid? I would be very grateful as this is the part i'm struggling with the most in my learning. I have included all of my HTML and CSS code below:

<!DOCTYPE html>

<html>

<head>
<link href="./stylesheet.css" type="text/css" rel="stylesheet">
<meta charset ="utf-8"/>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
</head>

<body> 

<div id="container">

  <nav class="banner">
    <img src="./banner.jpg" alt="banner image of various Moto GP riders racing on track">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Contenders</a></li>
      <li><a href="#">Manufacturers</a></li>
      <li><a href="#">Tech Sec</a></li>
      <li><a href="#">Calendar</a></li>
    </ul>
  </nav>

  <div class="opening">
    <h1>MotoGP World Championship Contenders</h1>
    <p>Here are the top Moto GP riders that will be competing for the World Championship in 2018...</p>
  </div>

  <div class="motogp-contenders">

    <div class="marquez">
      <img class ="rider-image" src="./marquez.jpg" alt="photo of Marc Marquez">
      <h2 class ="rider-name">Marc Marquez</h2>
      <p class="rider-desc">Reigning 4-times Moto GP World Champion</p>
    </div>

    <div class="dovi">
      <img class="rider-image" src="./dovi.jpg" alt="photo of Andrea Dovizioso">
      <h2 class="rider-name">Andrea Dovizioso</h2>
      <p class="rider-desc">So close in 2017!</p>
    </div>

    <div class="rossi">
      <img class="rider-image" src="./rossi.jpg" alt="photo of Valentino Rossi">
      <h2 class="rider-name">Valentino Rossi</h2>
      <p class="rider-desc">Can he win another title before he retires?</p>
    </div>

    <div class="vinales">
      <img class="rider-image" src="./vinales.jpg" alt="photo of Maverick Vinales">
      <h2 class="rider-name">Maverick Vinales</h2>
      <p class="rider-desc">Can he be fast at every round and win the champonship?</p>
    </div>

    <div class="lorenzo">
      <img class="rider-image" src="./lorenzo.jpg" alt="photo of Jorge Lorenzo">
      <h2 class="rider-name">Jorge Lorenzo</h2>
      <p class="rider-desc">JL got used to the Duke at the end of the 2017 season...will he be a title contender this year?</p>
    </div>

    <div class="pedrosa">
      <img class ="rider-image" src="./pedrosa.jpg" alt="photo of Dani Pedrosa">
      <h2 class="rider-name">Dani Pedrosa</h2>
      <p class="rider-desc">The greatest rider never to win a world title?</p>
    </div>

    <div class="zarco">
      <img class ="rider-image" src="./zarco.jpg" alt="photo of Johann Zarco">
      <h2 class="rider-name">Johann Zarco</h2>
      <p class="rider-desc">The dark horse?</p>
    </div>

  </div>

</div>

</body>

</html>

My CSS styling is as below:

body {
font-family: "arial";
background-color: black;
margin: 0;
}

#container {
width: 1200px;
margin: auto;
}

.banner img {
width: 100%;
}

.banner ul {
text-align: center;
list-style: none;
}

.banner li {
display: inline-block;
font-size: 18px;
padding: 10px;
background-color: white;
border-radius: 3px;
margin: 0 10px;
}

.banner a{
text-decoration: none;
color: black;
}

.banner li:active {
position: relative;
top: 2px;
}

.opening h1 {
color: white;
text-align: center;
font-family: 'Indie Flower';
font-size: 45px;
}

.opening {
color: white;
text-align: center;
font-size: 18px;
margin-bottom: 40px;
}

.rider-image {
width: 35%;
height: 290px;
margin: auto;
display: block;
border-radius: 50px;
}

.rider-name {
color: white;
text-align: center;
font-family: 'Indie Flower'
}

.rider-desc {
color: white;
text-align: center;
font-size: 16px;
margin-bottom: 40px;
}

Upvotes: 2

Views: 230

Answers (2)

Bellator
Bellator

Reputation: 352

This can be easily accomplished by using the Bootstrap library and their built in grid system, as seen below:

However, if you do not wish to use an external library, please inform me and I will update you with raw code.

EDIT: I have updated the Snippet at the request of the asker to include the actual source code instead of the library. In the CSS, you can now see how the code functions and learn from it. (It is to be noted that this code was directly copied and pasted from BootStrap 4.0.0).

* {
margin: 5px;
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}
<div class="row">
    <div class="col">
      <img class="rider-image" src="./marquez.jpg" alt="photo of Marc Marquez">
      <h2 class="rider-name">Marc Marquez</h2>
      <p class="rider-desc">Reigning 4-times Moto GP World Champion</p>
    </div>

    <div class="col">
      <img class="rider-image" src="./dovi.jpg" alt="photo of Andrea Dovizioso">
      <h2 class="rider-name">Andrea Dovizioso</h2>
      <p class="rider-desc">So close in 2017!</p>
    </div>
  </div>

  <div class="row">
    <div class="col">
      <img class="rider-image" src="./marquez.jpg" alt="photo of Marc Marquez">
      <h2 class="rider-name">Marc Marquez</h2>
      <p class="rider-desc">Reigning 4-times Moto GP World Champion</p>
    </div>

    <div class="col">
      <img class="rider-image" src="./dovi.jpg" alt="photo of Andrea Dovizioso">
      <h2 class="rider-name">Andrea Dovizioso</h2>
      <p class="rider-desc">So close in 2017!</p>
    </div>
  </div>
  
   <div class="row">
    <div class="col">
      <img class="rider-image" src="./marquez.jpg" alt="photo of Marc Marquez">
      <h2 class="rider-name">Marc Marquez</h2>
      <p class="rider-desc">Reigning 4-times Moto GP World Champion</p>
    </div>

    <div class="col">
      <img class="rider-image" src="./dovi.jpg" alt="photo of Andrea Dovizioso">
      <h2 class="rider-name">Andrea Dovizioso</h2>
      <p class="rider-desc">So close in 2017!</p>
    </div>
  </div>
  
   <div class="row">
    <div class="col">
      <img class="rider-image" src="./marquez.jpg" alt="photo of Marc Marquez">
      <h2 class="rider-name">Marc Marquez</h2>
      <p class="rider-desc">Reigning 4-times Moto GP World Champion</p>
    </div>

    <div class="col">
      <img class="rider-image" src="./dovi.jpg" alt="photo of Andrea Dovizioso">
      <h2 class="rider-name">Andrea Dovizioso</h2>
      <p class="rider-desc">So close in 2017!</p>
    </div>
  </div>

Upvotes: 2

Miguel
Miguel

Reputation: 36

Try to enclose each pair of div element that you would like to be side by side, in side of a new div element. Then you can be able to float the elements inside, and position them in their right place. Therefore in the layout you will have rows with two columns each one.

Upvotes: 1

Related Questions