CODEWITHSUNDEEP
htmlcss
MyNewName
MyNewName

Reputation: 1055

Html div container pushed down

I want to create a page with 4 columns. Inside these columns should be other divs. Now I added one div inside the first column, but the complete column div got pushed down. How can i fix it? 

.articleRow1,
.articleRow2,
.articleRow3,
.articleRow4 {
  display: inline-block;
  width: 100px;
  max-width: 100px;
  background-color: lightblue;
  height: 200px;
}
.articleRow1 {
  margin-right: 20px;
}
.articleRow2 {
  margin-right: 20px;
}
.articleRow3 {
  margin-right: 20px;
}
/*---
#####
---*/

.article {
  background-color: #2B2B2B;
  max-width: 100px;
}
.article > .articleImageContainer > img {
  max-height: 100px;
  max-width: 100px;
  display: block;
}
.article > .articleTitle {
  padding: 10px;
  color: white;
}
<section>
  <div class="articleRow1">
    <div class="article">
      <div class="articleImageContainer">
        <img src="1.jpg" />
      </div>

      <div class="articleTitle">
        Sizzix 482483
      </div>
    </div>
  </div>

  <div class="articleRow2">
  </div>

  <div class="articleRow3">
  </div>

  <div class="articleRow4">
  </div>
</section>

Here is a JFiddle.

Upvotes: 0

Views: 278

Answers (4)

Sravan
Sravan

Reputation: 18647

Add float: left to your columns(all the articles) . This solves the issue. Please check the below code snippet and fiddle.

.articleRow1,
.articleRow2,
.articleRow3,
.articleRow4 {
  display: inline-block;
  width: 100px;
  max-width: 100px;
  background-color: lightblue;
  height: 200px;
  float:left;
}

.articleRow1 {
  margin-right: 20px;
}

.articleRow2 {
  margin-right: 20px;
}

.articleRow3 {
  margin-right: 20px;
}


/*---
#####
---*/

.article {
  background-color: #2B2B2B;
  max-width: 100px;
}

.article > .articleImageContainer {}

.article > .articleImageContainer > img {
  max-height: 100px;
  max-width: 100px;
  display: block;
}

.article > .articleTitle {
  padding: 10px;
  color: white;
}
<section>
  <div class="articleRow1">
    <div class="article">
      <div class="articleImageContainer">
        <img src="1.jpg" />
      </div>

      <div class="articleTitle">
        Sizzix 482483
      </div>
    </div>
  </div>

  <div class="articleRow2">
  </div>

  <div class="articleRow3">
  </div>

  <div class="articleRow4">
  </div>
</section>

Here is the fiddle

Upvotes: 0

Waxi
Waxi

Reputation: 1651

Add

vertical-align:top;

to

.articleRow1,
.articleRow2,
.articleRow3,
.articleRow4

so you have

.articleRow1,
.articleRow2,
.articleRow3,
.articleRow4 {
    display: inline-block;
    width: 100px;
    max-width: 100px;
    background-color: lightblue;
    height: 200px;
    vertical-align:top}

Upvotes: 1

potashin
potashin

Reputation: 44581

Your img inside first article affects baseline, thus pushing the first div .articleRow1 with inline layout down. You can explicitly set vertical-align css property to top to fix the issue.

.articleRow1,
.articleRow2,
.articleRow3,
.articleRow4 {
  display: inline-block;
  width: 100px;
  max-width: 100px;
  background-color: lightblue;
  height: 200px;
  vertical-align: top;
}
.articleRow1 {
  margin-right: 20px;
}
.articleRow2 {
  margin-right: 20px;
}
.articleRow3 {
  margin-right: 20px;
}
/*---
#####
---*/

.article {
  background-color: #2B2B2B;
  max-width: 100px;
}
.article > .articleImageContainer {} .article > .articleImageContainer > img {
  max-height: 100px;
  max-width: 100px;
  display: block;
}
.article > .articleTitle {
  padding: 10px;
  color: white;
}
<section>
  <div class="articleRow1">
    <div class="article">
      <div class="articleImageContainer">
        <img src="1.jpg" />
      </div>

      <div class="articleTitle">
        Sizzix 482483
      </div>
    </div>
  </div>

  <div class="articleRow2"></div>

  <div class="articleRow3"></div>

  <div class="articleRow4"></div>
</section>

Upvotes: 2

NiZa
NiZa

Reputation: 3926

Try to add float:left. This will fix your problem.

.article {
    background-color: #2B2B2B;
    max-width: 100px; 
    float: left;
}

Upvotes: 1

Related Questions