Fix CSS and HTML Display Layout

Question

Please take a look at my code I need help with making the first box, the pink box for adding images be on the same line with every other boxes on the first line. I have added the full code snippet below. I have tried using CSS's, display, position, padding, and margin but none of these worked for me. Please take a look and let me know if there's anything I'm missing thanks.

body {
  background-image: url('../images/background.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  font-family: 'Roboto Condensed', sans-serif;
}


.circle-count {
  position: absolute;
  right: -5px;
  top: -5px;
  color: #fff;
  border-radius: 50%;
  padding: 5px 7px;
  font-family: Tahoma;
  font-weight: 500;
  font-size: 14px;
  background-color: #9b59b6;
}

.main {
  background-color: #feeeea;
}




/*Gallery*/
.photo-modal {
  cursor: pointer;
}
.photos-container {
  margin-bottom: 80px;
}
.photo-element {
  width: 200px;
  height: 200px;
  margin: 30px 30px 0 0;
  border-radius: 15px;
  padding: 15px;
  display: inline-block;
}

.image-fix {
  border-radius: 15px;
  width: 200px;
  height: 200px;
  vertical-align: inherit;
}

.add-photo {
  background: #f5e0db;
  display: inline-flex;
  justify-content: center;
  align-items: center;

  text-align: center;
  text-transform: uppercase;
}

.likes-count {
  position: relative;
    right: -180px;
    top: 18px;
    color: #fff;
    border-radius: 50%;
    padding: 5px 7px;
    font-family: Tahoma;
    font-weight: 500;
    font-size: 17px;
    background-color:  #e87193;
}



.add-photo input[type="file"] {
  display: none;
}
.add-photo .fa {
  color: #e8bcb5;
  font-size: 24px;
  padding: 15px 0;
}
.add-photo label {
  font-weight: bold;
  font-size: 14px;
  color: #e86d8f;
  text-decoration: none;
  cursor: pointer;
}

.photo-info-author {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.photo-author-name {
  padding-right: 3px;
  padding-top: 5px;
}

.all-photo-likes {
  padding-left: 15px;
  padding-top: 8px;
  color: #e87193;
}
.all-photo-no-likes{ 
  padding-left: 15px;
  padding-top: 8px;
  color: #bbbbbb;
}

.second-line-photos{ 
  margin-top: 39px;
}

.third-line-photos{  
  margin-top: 79px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

  <title>Site</title>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <!-- Main style -->
  <link href="assets/css/vikids-css.css" rel="stylesheet">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700,900" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Favicons -->
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
  <link rel="icon" href="favicon.ico">
</head>

<body>

<!-- START Main container -->
<main>
  <div class="container-fluid main">
    <section class="row photos-container">
        <div class="col-md-12">
          <div class="photo-element add-photo">
            <label>
              <input type="file">
              <i class="fa fa-plus" aria-hidden="true"></i>
              <p>Добавить <br/>фотографию</p>
            </label>
            </div>


            <div class="photo-element">
              <span class="likes-count"> 37 </span>
              <img class="image-fix" src="./assets/images/gallery/gallery6.png">
              <div class="row">
                <div class="col-xs-3"> 
                  <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
                </div>
                <div class="col-xs-7 photo-author-name"> Имя Фамилия 
                </div>
                <div class="col-xs-1"> 
                  <i class="all-photo-likes fa fa-heart" aria-hidden="true"></i> 
                </div>
              </div>
            </div>

            <div class="photo-element">
              <span class="likes-count"> 37 </span>
             <img class="image-fix" src="./assets/images/gallery/gallery6.png">
             <div class="row">
                <div class="col-xs-3"> 
                  <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
                </div>
                <div class="col-xs-7 photo-author-name"> Имя Фамилия 
                </div>
                <div class="col-xs-1"> 
                  <i class="all-photo-likes fa fa-heart" aria-hidden="true"></i> 
                </div>
              </div>
            </div>
            <div class="photo-element">
             <img class="image-fix" src="./assets/images/gallery/gallery6.png">
             <div class="row">
                <div class="col-xs-3"> 
                  <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
                </div>
                <div class="col-xs-7 photo-author-name"> Имя Фамилия 
                </div>
                <div class="col-xs-1"> 
                  <i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>  
                </div>
              </div>
            </div>
            <div class="photo-element">
              <span class="likes-count"> 37 </span>
               <img class="image-fix" src="./assets/images/gallery/gallery6.png">
                <div class="row">
                <div class="col-xs-3"> 
                  <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
                </div>
                <div class="col-xs-7 photo-author-name"> Имя Фамилия 
                </div>
                <div class="col-xs-1"> 
                  <i class="all-photo-likes fa fa-heart" aria-hidden="true"></i> 
                </div>
              </div>
            </div>
            <div class="photo-element">
               <img class="image-fix" src="./assets/images/gallery/gallery6.png">
                <div class="row">
                <div class="col-xs-3"> 
                  <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
                </div>
                <div class="col-xs-7 photo-author-name"> Имя Фамилия 
                </div>
                <div class="col-xs-1"> 
                  <i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i> 
                </div>
              </div>
            </div>
            <div class="photo-element">
               <img class="image-fix" src="./assets/images/gallery/gallery6.png">
                <div class="row">
                <div class="col-xs-3"> 
                  <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
                </div>
                <div class="col-xs-7 photo-author-name"> Имя Фамилия 
                </div>
                <div class="col-xs-1"> 
                  <i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i> 
                </div>
              </div>
            </div>
            <div class="photo-element">
               <img class="image-fix" src="./assets/images/gallery/gallery6.png">
                <div class="row">
                <div class="col-xs-3"> 
                  <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
                </div>
                <div class="col-xs-7 photo-author-name"> Имя Фамилия 
                </div>
                <div class="col-xs-1"> 
                  <i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i> 
                </div>
              </div>
            </div>
            <div class="photo-element">
              <span class="likes-count"> 37 </span>
               <img class="image-fix" src="./assets/images/gallery/gallery6.png">
                <div class="row">
                <div class="col-xs-3"> 
                  <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
                </div>
                <div class="col-xs-7 photo-author-name"> Имя Фамилия 
                </div>
                <div class="col-xs-1"> 
                  <i class="all-photo-likes fa fa-heart" aria-hidden="true"></i> 
                </div>
              </div>
            </div>
            <div class="photo-element">
              <span class="likes-count"> 37 </span>
               <img class="image-fix" src="./assets/images/gallery/gallery6.png">
                <div class="row">
                <div class="col-xs-3"> 
                  <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
                </div>
                <div class="col-xs-7 photo-author-name"> Имя Фамилия 
                </div>
                <div class="col-xs-1"> 
                  <i class="all-photo-likes fa fa-heart" aria-hidden="true"></i> 
                </div>
              </div>
            </div>
            <div class="photo-element">
              <span class="likes-count"> 37 </span>
               <img class="image-fix" src="./assets/images/gallery/gallery6.png">
                <div class="row">
                <div class="col-xs-3"> 
                  <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
                </div>
                <div class="col-xs-7 photo-author-name"> Имя Фамилия 
                </div>
                <div class="col-xs-1"> 
                  <i class="all-photo-likes fa fa-heart" aria-hidden="true"></i> 
                </div>
              </div>
            </div>
            <div class="photo-element">
              <span class="likes-count"> 37 </span>
               <img class="image-fix" src="./assets/images/gallery/photo-malish.png">
                <div class="row">
                <div class="col-xs-3"> 
                  <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
                </div>
                <div class="col-xs-7 photo-author-name"> Имя Фамилия 
                </div>
                <div class="col-xs-1"> 
                  <i class="all-photo-likes fa fa-heart" aria-hidden="true"></i> 
                </div>
              </div>
            </div>
            <div class="photo-element">
               <img class="image-fix" src="./assets/images/gallery/photo1.png">
                <div class="row">
                <div class="col-xs-3"> 
                  <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
                </div>
                <div class="col-xs-7 photo-author-name"> Имя Фамилия 
                </div>
                <div class="col-xs-1"> 
                  <i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i> 
                </div>
              </div>
            </div>
            <div class="photo-element">
               <img class="image-fix" src="./assets/images/gallery/gallery1.png">
                <div class="row">
                <div class="col-xs-3"> 
                  <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
                </div>
                <div class="col-xs-7 photo-author-name"> Имя Фамилия 
                </div>
                <div class="col-xs-1"> 
                  <i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i> 
                </div>
              </div>
            </div>

            <div class="photo-element">
               <img class="image-fix" src="./assets/images/gallery/gallery2.png">
                <div class="row">
                <div class="col-xs-3"> 
                  <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
                </div>
                <div class="col-xs-7 photo-author-name"> Имя Фамилия 
                </div>
                <div class="col-xs-1"> 
                  <i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i> 
                </div>
              </div>
            </div>
        </div>
    </section>
  </div>
</main>
<!-- END Main container -->

</body>
</html>

Within a row, your column "count" cannot exceed 12, or you'll have weird results. For example, you have <div class="col-md-12"> in your row. After that, you'll experience weird results until you start a new row (with class="row"). If you want each section to take up half a row each, you could have two divs each with <div class="col-md-6">. — Sam Creamer
– Sam Creamer, Commented Jan 30, 2018 at 21:35

Obsidian Age · Accepted Answer · 2018-01-30 21:37:17Z

What you're looking for is to add vertical-align: bottom to .add-photo, so that all the boxes are in line.

You've used relative links in your example, so only the (large) placeholder icons are shown. I've replaced the first image with an absolute path to show this working in the following.

Click on Run Code Snippet and then Full Page to see this in effect:

body {
  background-image: url('../images/background.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  font-family: 'Roboto Condensed', sans-serif;
}

.circle-count {
  position: absolute;
  right: -5px;
  top: -5px;
  color: #fff;
  border-radius: 50%;
  padding: 5px 7px;
  font-family: Tahoma;
  font-weight: 500;
  font-size: 14px;
  background-color: #9b59b6;
}

.main {
  background-color: #feeeea;
}


/*Gallery*/

.photo-modal {
  cursor: pointer;
}

.photos-container {
  margin-bottom: 80px;
}

.photo-element {
  width: 200px;
  height: 200px;
  margin: 30px 30px 0 0;
  border-radius: 15px;
  padding: 15px;
  display: inline-block;
}

.image-fix {
  border-radius: 15px;
  width: 200px;
  height: 200px;
  vertical-align: inherit;
}

.add-photo {
  background: #f5e0db;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-transform: uppercase;
  vertical-align: bottom;
}

.likes-count {
  position: relative;
  right: -180px;
  top: 18px;
  color: #fff;
  border-radius: 50%;
  padding: 5px 7px;
  font-family: Tahoma;
  font-weight: 500;
  font-size: 17px;
  background-color: #e87193;
}

.add-photo input[type="file"] {
  display: none;
}

.add-photo .fa {
  color: #e8bcb5;
  font-size: 24px;
  padding: 15px 0;
}

.add-photo label {
  font-weight: bold;
  font-size: 14px;
  color: #e86d8f;
  text-decoration: none;
  cursor: pointer;
}

.photo-info-author {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.photo-author-name {
  padding-right: 3px;
  padding-top: 5px;
}

.all-photo-likes {
  padding-left: 15px;
  padding-top: 8px;
  color: #e87193;
}

.all-photo-no-likes {
  padding-left: 15px;
  padding-top: 8px;
  color: #bbbbbb;
}

.second-line-photos {
  margin-top: 39px;
}

.third-line-photos {
  margin-top: 79px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

  <title>Site</title>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <!-- Main style -->
  <link href="assets/css/vikids-css.css" rel="stylesheet">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700,900" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Favicons -->
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
  <link rel="icon" href="favicon.ico">
</head>

<body>

  <!-- START Main container -->
  <main>
    <div class="container-fluid main">
      <section class="row photos-container">
        <div class="col-md-12">
          <div class="photo-element add-photo">
            <label>
              <input type="file">
              <i class="fa fa-plus" aria-hidden="true"></i>
              <p>Добавить <br/>фотографию</p>
            </label>
          </div>


          <div class="photo-element">
            <span class="likes-count"> 37 </span>
            <!--
            <img class="image-fix" src="./assets/images/gallery/gallery6.png">
            -->
            <img class="image-fix" src="http://placehold.it/100">
            <div class="row">
              <div class="col-xs-3">
                <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
              </div>
              <div class="col-xs-7 photo-author-name"> Имя Фамилия
              </div>
              <div class="col-xs-1">
                <i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
              </div>
            </div>
          </div>

          <div class="photo-element">
            <span class="likes-count"> 37 </span>
            <img class="image-fix" src="./assets/images/gallery/gallery6.png">
            <div class="row">
              <div class="col-xs-3">
                <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
              </div>
              <div class="col-xs-7 photo-author-name"> Имя Фамилия
              </div>
              <div class="col-xs-1">
                <i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
              </div>
            </div>
          </div>
          <div class="photo-element">
            <img class="image-fix" src="./assets/images/gallery/gallery6.png">
            <div class="row">
              <div class="col-xs-3">
                <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
              </div>
              <div class="col-xs-7 photo-author-name"> Имя Фамилия
              </div>
              <div class="col-xs-1">
                <i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
              </div>
            </div>
          </div>
          <div class="photo-element">
            <span class="likes-count"> 37 </span>
            <img class="image-fix" src="./assets/images/gallery/gallery6.png">
            <div class="row">
              <div class="col-xs-3">
                <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
              </div>
              <div class="col-xs-7 photo-author-name"> Имя Фамилия
              </div>
              <div class="col-xs-1">
                <i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
              </div>
            </div>
          </div>
          <div class="photo-element">
            <img class="image-fix" src="./assets/images/gallery/gallery6.png">
            <div class="row">
              <div class="col-xs-3">
                <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
              </div>
              <div class="col-xs-7 photo-author-name"> Имя Фамилия
              </div>
              <div class="col-xs-1">
                <i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
              </div>
            </div>
          </div>
          <div class="photo-element">
            <img class="image-fix" src="./assets/images/gallery/gallery6.png">
            <div class="row">
              <div class="col-xs-3">
                <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
              </div>
              <div class="col-xs-7 photo-author-name"> Имя Фамилия
              </div>
              <div class="col-xs-1">
                <i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
              </div>
            </div>
          </div>
          <div class="photo-element">
            <img class="image-fix" src="./assets/images/gallery/gallery6.png">
            <div class="row">
              <div class="col-xs-3">
                <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
              </div>
              <div class="col-xs-7 photo-author-name"> Имя Фамилия
              </div>
              <div class="col-xs-1">
                <i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
              </div>
            </div>
          </div>
          <div class="photo-element">
            <span class="likes-count"> 37 </span>
            <img class="image-fix" src="./assets/images/gallery/gallery6.png">
            <div class="row">
              <div class="col-xs-3">
                <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
              </div>
              <div class="col-xs-7 photo-author-name"> Имя Фамилия
              </div>
              <div class="col-xs-1">
                <i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
              </div>
            </div>
          </div>
          <div class="photo-element">
            <span class="likes-count"> 37 </span>
            <img class="image-fix" src="./assets/images/gallery/gallery6.png">
            <div class="row">
              <div class="col-xs-3">
                <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
              </div>
              <div class="col-xs-7 photo-author-name"> Имя Фамилия
              </div>
              <div class="col-xs-1">
                <i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
              </div>
            </div>
          </div>
          <div class="photo-element">
            <span class="likes-count"> 37 </span>
            <img class="image-fix" src="./assets/images/gallery/gallery6.png">
            <div class="row">
              <div class="col-xs-3">
                <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
              </div>
              <div class="col-xs-7 photo-author-name"> Имя Фамилия
              </div>
              <div class="col-xs-1">
                <i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
              </div>
            </div>
          </div>
          <div class="photo-element">
            <span class="likes-count"> 37 </span>
            <img class="image-fix" src="./assets/images/gallery/photo-malish.png">
            <div class="row">
              <div class="col-xs-3">
                <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
              </div>
              <div class="col-xs-7 photo-author-name"> Имя Фамилия
              </div>
              <div class="col-xs-1">
                <i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
              </div>
            </div>
          </div>
          <div class="photo-element">
            <img class="image-fix" src="./assets/images/gallery/photo1.png">
            <div class="row">
              <div class="col-xs-3">
                <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
              </div>
              <div class="col-xs-7 photo-author-name"> Имя Фамилия
              </div>
              <div class="col-xs-1">
                <i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
              </div>
            </div>
          </div>
          <div class="photo-element">
            <img class="image-fix" src="./assets/images/gallery/gallery1.png">
            <div class="row">
              <div class="col-xs-3">
                <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
              </div>
              <div class="col-xs-7 photo-author-name"> Имя Фамилия
              </div>
              <div class="col-xs-1">
                <i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
              </div>
            </div>
          </div>

          <div class="photo-element">
            <img class="image-fix" src="./assets/images/gallery/gallery2.png">
            <div class="row">
              <div class="col-xs-3">
                <img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
              </div>
              <div class="col-xs-7 photo-author-name"> Имя Фамилия
              </div>
              <div class="col-xs-1">
                <i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </main>
  <!-- END Main container -->

</body>

</html>

Hope this helps! :)

Collectives™ on Stack Overflow

Fix CSS and HTML Display Layout

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related