Reputation: 13

HTML / CSS Div trouble - sitting next to but below each other

I'm real sorry if this has been answered multiple times before, I did try to search, but I couldn't quite find what I'm looking for.

I'm messing around toying with different generic portfolio pages just for practice / learning (I'm pretty new). What I'm trying to do atm is have a wall of images laid out that scroll with a nav area stays fixed.

I've been trying for ages to fix this, but for some reason my columns of images sit to the side of each other (as desired) but also below each other, like a stair case. I'll post the HMTL / CSS below, I'd really appreciate some help!

/*NAVIGATION*/

#navi {
  position: fixed;
  float: left;
}
#navi a {
  text-decoration: none;
  color: #969696;
}
#navi ul {
  list-style-type: none;
  margin-left: -40px;
  margin-top: 10px;
}
#navi h1 {
  color: #4A968F;
}
/*IMAGE WALL*/

img {
  max-width: 250px;
  margin-bottom: 10px;
}
#one {
  margin-left: 250px;
}
#two {
  margin-left: 510px;
}
#three {
  margin-left: 770px;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <div class="main">


    <!-- NAVIGATION -->
    <div class="container">
      <div class="row">
        <div class="col-md-3" id="navi">
          <h1>SR|BEST</h1>
          <ul>
            <li><a href="#">HOME</a>
            </li>
            <li><a href="#">PROJECTS</a>
            </li>
            <li><a href="#">TEXTS</a>
            </li>
            <li><a href="#">CONACT / ABOUT</a>
            </li>
          </ul>
        </div>



        <!-- IMAGE WALL -->
        <div class="rowone">
          <div class="col-md-3" id="one">
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-07-49.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/05/fi010513.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/04/sd.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/07/in.jpg" />
            <img src="https://srbest.files.wordpress.com/2012/06/7.jpg" />
          </div>
        </div>

        <div class="rowtwo">
          <div class="col-md-3" id="two">
            <img src="https://srbest.files.wordpress.com/2013/04/17.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/04/1.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-04-31.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/06/1.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/06/ramsgate-sf2.jpg" />
          </div>
        </div>

        <div class="rowthree">
          <div class="col-md-3" id="three">
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-01-12.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-04-08-03-57.jpg" />
            <img src="https://srbest.files.wordpress.com/2012/10/pr17.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/10/briavels.jpg" />
            <img src="https://srbest.files.wordpress.com/2012/12/n-24.jpg" />
          </div>
        </div>
      </div>
    </div>


  </div>


</body>

</html>

Upvotes: 1

Answers (4)

Steven Best

Reputation: 13

So, I took on board some of the things said here. I think I've got it, at least on a basis that works fullscreen on my pc... Thanks much for the help!

/*NAVIGATION*/

#navi {
  position: fixed;
  float: left;
}
#navi a {
  text-decoration: none;
  color: #969696;
}
#navi ul {
  list-style-type: none;
  margin-left: -40px;
  margin-top: 10px;
}
#navi h1 {
  color: #4A968F;
}
/*IMAGE WALL*/

img {
  max-width: 250px;
  margin-bottom: 10px;
}

.imgwall {
  margin-left: 250px;
  margin-top: 30px;
}

#two {
  margin-left: 30px;
}

#three {
  margin-left: 30px;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <div class="main">


    <!-- NAVIGATION -->
    <div class="container">
      <div class="row">
        <div class="col-md-3" id="navi">
          <h1>SR|BEST</h1>
          <ul>
            <li><a href="#">HOME</a>
            </li>
            <li><a href="#">PROJECTS</a>
            </li>
            <li><a href="#">TEXTS</a>
            </li>
            <li><a href="#">CONACT / ABOUT</a>
            </li>
          </ul>
        </div>



        <!-- IMAGE WALL -->


        <div class="imgwall">
          <div class="col-md-3">
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-07-49.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/05/fi010513.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/04/sd.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/07/in.jpg" />
            <img src="https://srbest.files.wordpress.com/2012/06/7.jpg" />
          </div>



          <div class="col-md-3" id="two">
            <img src="https://srbest.files.wordpress.com/2013/04/17.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/04/1.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-04-31.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/06/1.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/06/ramsgate-sf2.jpg" />
          </div>



          <div class="col-md-3" id="three">
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-01-12.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-04-08-03-57.jpg" />
            <img src="https://srbest.files.wordpress.com/2012/10/pr17.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/10/briavels.jpg" />
            <img src="https://srbest.files.wordpress.com/2012/12/n-24.jpg" />
          </div>
        </div>
      </div>
    </div>


  </div>


</body>

</html>

Upvotes: 0

Dave Cripps

Reputation: 929

Simplifying your HTML (and by extension, CSS) and using flexbox might be easier to create the image wall layout I think you are looking for. See below for my updated version of your code:

/*NAVIGATION*/
#navi {
  position: fixed;
  float: left;
}
#navi a {
  text-decoration: none;
  color: #969696;
}
#navi ul {
  list-style-type: none;
  margin-left: -40px;
  margin-top: 10px;
}
#navi h1 {
  color: #4A968F;
}

/*IMAGE WALL*/
#imgWall {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 250px;
}
#imgWall img {
  max-width: 250px;
  margin-bottom: 10px;
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <div class="main">
    <!-- NAVIGATION -->
    <div class="container">
      <div class="row">
        <div class="col-md-3" id="navi">
          <h1>SR|BEST</h1>
          <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">PROJECTS</a></li>
            <li><a href="#">TEXTS</a></li>
            <li><a href="#">CONACT / ABOUT</a></li>
          </ul>
        </div>

        <!-- IMAGE WALL -->
        <div id="imgWall">
          <div class="col-md-3" id="one">
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-07-49.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/05/fi010513.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/04/sd.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/07/in.jpg" />
            <img src="https://srbest.files.wordpress.com/2012/06/7.jpg" />
          </div>
          <div class="col-md-3" id="two">
            <img src="https://srbest.files.wordpress.com/2013/04/17.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/04/1.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-04-31.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/06/1.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/06/ramsgate-sf2.jpg" />
          </div>
          <div class="col-md-3" id="three">
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-01-12.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-04-08-03-57.jpg" />
            <img src="https://srbest.files.wordpress.com/2012/10/pr17.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/10/briavels.jpg" />
            <img src="https://srbest.files.wordpress.com/2012/12/n-24.jpg" />
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

For more information on CSS FlexBox, check out: Visual Guide to CSS3 Flexbox Properties

Upvotes: 0

yayheartbeat

Reputation: 445

Something like this would be a good start. Bootstrap can take care of the columns for you so you don't need to set any margins for those. The sticky navigation isn't really ideally done here but should work.

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <div class="main">

    <!-- NAVIGATION -->
    <div class="container">
      <div class="row">
        <div class="col-md-3" id="navi">
          <h1>SR|BEST</h1>
          <ul>
            <li><a href="#">HOME</a>
            </li>
            <li><a href="#">PROJECTS</a>
            </li>
            <li><a href="#">TEXTS</a>
            </li>
            <li><a href="#">CONACT / ABOUT</a>
            </li>
          </ul>
        </div>



        <!-- IMAGE WALL -->
        <div class="col-md-9" id="wall">
          <div class="col-md-4">
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-07-49.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/05/fi010513.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/04/sd.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/07/in.jpg" />
            <img src="https://srbest.files.wordpress.com/2012/06/7.jpg" />
          </div>

          <div class="col-md-4">
            <img src="https://srbest.files.wordpress.com/2013/04/17.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/04/1.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-04-31.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/06/1.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/06/ramsgate-sf2.jpg" />
          </div>

          <div class="col-md-4">
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-01-12.jpg" />
            <img src="https://srbest.files.wordpress.com/2013/08/2012-09-04-08-03-57.jpg" />
            <img src="https://srbest.files.wordpress.com/2012/10/pr17.jpg" />
            <img src="https://srbest.files.wordpress.com/2011/10/briavels.jpg" />
            <img src="https://srbest.files.wordpress.com/2012/12/n-24.jpg" />
          </div>
        </div>
      </div>
    </div>


  </div>


</body>

</html>

And the CSS:

/*NAVIGATION*/

#navi {
  position: fixed;
  top: 0;
  left: 20px;
}

#navi a {
  text-decoration: none;
  color: #969696;
}

#navi ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#navi h1 {
  color: #4A968F;
}

/*IMAGE WALL*/

#wall {
  margin: 20px 0 0 250px;
}

img {
  max-width: 100%;
  margin-bottom: 20px;
}

Upvotes: 1

Pierre-Loup Pagniez

Reputation: 3761

Are you looking for something like this? https://jsfiddle.net/c8my23ap/

<!-- NAVIGATION -->
<div class="container">
  <div class="row">
    <div class="col-md-3" id="navi">
      <h1>SR|BEST</h1>
      <ul>
        <li><a href="#">HOME</a>
        </li>
        <li><a href="#">PROJECTS</a>
        </li>
        <li><a href="#">TEXTS</a>
        </li>
        <li><a href="#">CONACT / ABOUT</a>
        </li>
      </ul>
    </div>



    <!-- IMAGE WALL -->

      <div class="col-md-offset-3 col-md-3" id="one">
        <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-07-49.jpg" />
      </div>
      <div class="col-md-3">  
        <img src="https://srbest.files.wordpress.com/2013/04/17.jpg" />
        </div>
      <div class="col-md-3">
        <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-01-12.jpg" />
      </div>
    </div>
      <div class="row">
      <div class="col-md-offset-3 col-md-3">
        <img src="https://srbest.files.wordpress.com/2013/05/fi010513.jpg" />
        </div>
      <div class="col-md-3">
        <img src="https://srbest.files.wordpress.com/2013/04/1.jpg" />
        </div>
      <div class="col-md-3">
        <img src="https://srbest.files.wordpress.com/2013/08/2012-09-04-08-03-57.jpg" />
      </div>          
      </div>

      <div class="row">
      <div class="col-md-offset-3 col-md-3">
        <img src="https://srbest.files.wordpress.com/2013/04/sd.jpg" />
        </div>
      <div class="col-md-3">
        <img src="https://srbest.files.wordpress.com/2013/08/2012-09-09-07-04-31.jpg" />
        </div>
      <div class="col-md-3">
        <img src="https://srbest.files.wordpress.com/2012/10/pr17.jpg" />
      </div>  
    </div>
    <div class="row">
      <div class="col-md-offset-3 col-md-3">
        <img src="https://srbest.files.wordpress.com/2011/07/in.jpg" />
        </div>
      <div class="col-md-3">
        <img src="https://srbest.files.wordpress.com/2011/06/1.jpg" />
        </div>
      <div class="col-md-3">
        <img src="https://srbest.files.wordpress.com/2011/10/briavels.jpg" />
      </div>
      </div>
      <div class="row">
      <div class="col-md-offset-3 col-md-3">
        <img src="https://srbest.files.wordpress.com/2012/06/7.jpg" />
        </div>
      <div class="col-md-3">
        <img src="https://srbest.files.wordpress.com/2011/06/ramsgate-sf2.jpg" />
        </div>
      <div class="col-md-3">
        <img src="https://srbest.files.wordpress.com/2012/12/n-24.jpg" />
      </div>
    </div>
  </div>

/*NAVIGATION*/

#navi {
  position: fixed;
  float: left;
}
#navi a {
  text-decoration: none;
  color: #969696;
}
#navi ul {
  list-style-type: none;
  margin-left: -40px;
  margin-top: 10px;
}
#navi h1 {
  color: #4A968F;
}
/*IMAGE WALL*/

img {
  max-width: 250px;
  margin-bottom: 10px;
  text-align:center;
}

Upvotes: 0

HTML / CSS Div trouble - sitting next to but below each other

Answers (4)

Related Questions