CODEWITHSUNDEEP
htmlcss
Alexander Tepe
Alexander Tepe

Reputation: 190

HTML div-aligning

I am writing a website in HTML and CSS. For the footer I would like to have 2 boxes for "contact" and "address" aligned, with the contact-box having 25% width and the addressbox having the rest. Somehow my divs won't line up correctly, the address-box won't vertically align with the top.

My attmept:

.footer {
  margin-top: 5px;
  width: 100%;
  border: 1px solid black;
}

.anschrift {
  width: 25%;
  padding: 5px;
  display: inline-block;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  vertical-align: top;
}

.kontakt {
  width: 70%;
  margin-left: 28%;
  display: inline-block;
  padding: 4px;
  vertical-align: top;
}
<div class="footer">
  <div class="anschrift">
    <h2>
      Anschrift:
    </h2>
    <h3>
      Lorem ipsum...
    </h3>
  </div>
  <div class="kontakt">
    <h2>
      Kontakt:
    </h2>
    <h3>
      Lorem ipsum...
    </h3>
  </div>
</div>

Screenshot

Upvotes: 2

Views: 71

Answers (4)

Md Nurullah
Md Nurullah

Reputation: 532

Actually, If you use the margin in your blocks then you have to reduce same amount width from others blocks/ html div.

So i prefer to use padding instead of margin to make the spacing between the two of multiple column and you have to use box-sizing while using the padding.

box-sizing:border-box

Upvotes: 0

Rene van der Lende
Rene van der Lende

Reputation: 5291

.kontakt:margin-left: 28%; forces a line break as 25%+28%+70% is more than 100%

Upvotes: 0

BernhardWebstudio
BernhardWebstudio

Reputation: 1135

It's the margin-left of the contact block, which makes the block bigger than you want it to be. Just remove the margin (or make it smaller).

.footer {
  margin-top: 5px;
  width: 100%;
  border: 1px solid black;
}

.anschrift {
  width: 25%;
  padding: 5px;
  display: inline-block;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  vertical-align: top;
}

.kontakt {
  width: 70%;
  //margin-left: 28%;
  display: inline-block;
  padding: 4px;
  vertical-align: top;
}
<div class="footer">
  <div class="anschrift">
    <h2>
      Anschrift:
    </h2>
    <h3>
      Lorem ipsum...
    </h3>
  </div>
  <div class="kontakt">
    <h2>
      Kontakt:
    </h2>
    <h3>
      Lorem ipsum...
    </h3>
  </div>
</div>

Upvotes: 0

Bharath M Shetty
Bharath M Shetty

Reputation: 30605

.footer {
  margin-top: 5px;
  width: 100%;
  border: 1px solid black;
}

.anschrift {
  width: 25%;
  padding: 5px;
  display: inline-block;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  vertical-align: top;
}

.kontakt {
  width: 70%;
  display: inline-block;
  padding: 4px;
  vertical-align: top;
  float:right;
}
<div class="footer">
  <div class="anschrift">
    <h2>
      Anschrift:
    </h2>
    <h3>
      Lorem ipsum...
    </h3>
  </div>
  <div class="kontakt">
    <h2>
      Kontakt:
    </h2>
    <h3>
      Lorem ipsum...
    </h3>
  </div>
</div>

Remove the margin left and float the div to right in .kontakt i.e change the code of .kontakt to 

.kontakt {
  width: 70%;
  display: inline-block;
  padding: 4px;
  vertical-align: top;
  float:right;
}

Upvotes: 2

Related Questions