CODEWITHSUNDEEP
javascripthtmlcss
Rolls_Reus_0wner
Rolls_Reus_0wner

Reputation: 21

How to put a css div box directly under another css div box

I need the 'usernamevalidation' div directly under the 'usernamealert' div. 

.usernamealert {
  background-color: #262626;
  text-align: center;
  margin: auto;
  height: 60px;
  width: 20%;
}

.usernamevalidation {
  background-color: #262626;
  text-align: left;
  margin: auto;
  height: 150px;
  width: 30%;
}
<div class="usernamealert">
  <p style="font-family:Impact; color:Red; font-size:28px;">ALERT</p>
</div>
<div class="usernamevalidation">
  <p style="font-family:Impact; color:White; font-size:28px;">Username should contain:
  </p>
  <p style="font-family:Impact; color:White; font-size:24px;">- At least 5 characters
  </p>
  <p style="font-family:Impact; color:White; font-size:24px;">- Letters and integers only</p>
</div>

It is meant to look something on the lines of this: enter image description here

Upvotes: 0

Views: 2263

Answers (5)

Banzay
Banzay

Reputation: 9470

You can style p as you wish and set styles for different paragraphs. Yet inline css is not good coding style - it makes you to repeat similar code many times and your html-file becomes too big and messed.

p {
  font-family:Impact;
  color: white;
  font-size:28px;
  margin: 10px 0;
  text-align: left;
}
p.alert {
  color: red;
  text-align: center;
}
p.list {
  text-indent: 30pt;
  margin: 0;
}
p.list:before {
  content: "- ";
}
.usernamealert {
  background-color: #262626;
  text-align: center;
  margin: auto;
  padding: 10px;
  height: auto;
  width: 30%;
}
<div class="usernamealert">
  <p class="alert">ALERT</p>
  <p>Username should contain:</p>
  <p class="list">At least 5 characters</p>
  <p class="list">Letters and integers only</p>
</div>

Upvotes: 0

Zain Aftab
Zain Aftab

Reputation: 701

You can just set the display:flow-root; in the .usernamevalidation and it will do the trick as you could see below.

.usernamealert {
  background-color: #262626;
  text-align: center;
  margin: auto;
  height: 60px;
  width: 80%;
}

.usernamevalidation {
  background-color: #262626;
  text-align: left;
  margin: auto;
  display:flow-root;
  height: 150px;
  width: 80%;
}
<div class="usernamealert">
  <p style="font-family:Impact; color:Red; font-size:28px;">ALERT</p>
</div>
<div class="usernamevalidation">
  <p style="font-family:Impact; color:White; font-size:28px;">Username should contain:
  </p>
  <p style="font-family:Impact; color:White; font-size:24px;">- At least 5 characters
  </p>
  <p style="font-family:Impact; color:White; font-size:24px;">- Letters and integers only</p>
</div>

Upvotes: 0

Ryan
Ryan

Reputation: 579

Remove the top margin from the first paragraph tag on the .usernamevalidation div:

.usernamealert {
  background-color: #262626;
  text-align: center;
  margin: auto;
  height: 60px;
  width: 20%;
}

.usernamevalidation {
  background-color: #262626;
  text-align: left;
  margin: auto;
  height: 150px;
  width: 30%;
}
.usernamevalidation p:first-child {
  margin-top: 0;
}
<div class="usernamealert">
  <p style="font-family:Impact; color:Red; font-size:28px;">ALERT</p>
</div>
<div class="usernamevalidation">
  <p style="font-family:Impact; color:White; font-size:28px;">Username should contain:
  </p>
  <p style="font-family:Impact; color:White; font-size:24px;">- At least 5 characters
  </p>
  <p style="font-family:Impact; color:White; font-size:24px;">- Letters and integers only</p>
</div>

Upvotes: 0

EmmanuelB
EmmanuelB

Reputation: 1427

Each <p> element has by default some margin on the top. The first <p> of your second div is the one creating that gap.

.usernamealert {
  background-color: #262626;
  text-align: center;
  margin: auto;
  height: 60px;
  width: 20%;
}

.usernamevalidation {
  background-color: #262626;
  text-align: left;
  margin: auto;
  height: 150px;
  width: 30%;
}

<div class="usernamealert">
  <p style="font-family:Impact; color:Red; font-size:28px;">ALERT</p>
</div>
<div class="usernamevalidation">
  <p style="font-family:Impact; color:White; font-size:28px; margin-top:0">Username should contain:
  </p>
  <p style="font-family:Impact; color:White; font-size:24px;">- At least 5 characters
  </p>
  <p style="font-family:Impact; color:White; font-size:24px;">- Letters and integers only</p>
</div>

Upvotes: 1

FonzTech
FonzTech

Reputation: 408

There are a lot of solutions you can use to solve your problem. Here's my:

https://jsfiddle.net/y0mxq4gn/

I just wrapped your divs in another div, which acts as a container. This container is a "flexbox". Have a look here:

https://www.w3schools.com/css/css3_flexbox.asp

These are really powerful, expecially when creating "sort of layouts". I have just put this "flexbox" and make its children follow vertical flow. By default, no spacing appear between elements, unless you set them via CSS in most cases.

Upvotes: 0

Related Questions