CODEWITHSUNDEEP
htmlcss
Raghav Motwani
Raghav Motwani

Reputation: 169

Height of the division in CSS3

I am trying out forms in HTML. Fiddle

For the div #status, the CSS rules are-

#status{
  margin:auto; 
  width:50%;  
  border:2px solid red; 
  background:white;
  height:40%;
}

But I cannot understand why the height of divison does not get altered by height rule in the CSS. More over If I try out-

#status{
  margin:auto; 
  width:50%;  
  border:2px solid red; 
  background:white;
  height:40px;
}

JSFiddle

This leaves the text on the bottom while div is placed at some random place. Could some help with placing this division below E-mail ID field so that text appears inside it?

Also, which rule in my CSS is responsible for this positioning of div.

Upvotes: 1

Views: 44

Answers (1)

J. Titus
J. Titus

Reputation: 9690

You're inserting the div under elements that are floating. You need to add clear: both to your #status CSS rules:

#status {
  margin: auto;
  width: 50%;
  border: 2px solid red;
  background: white;
  height: 40%; /* or 40px, which will look slightly different. Your choice. */
  clear: both;
}

Updated Fiddle

Upvotes: 1

Related Questions