CODEWITHSUNDEEP
css
manuthalasseril
manuthalasseril

Reputation: 1064

Css issue with top margin

I had created the following divs and its definition.

<div class="serach-container">
  <div class="search-keys-container">
    <div class="search-type"> </div>
    <div class="basic-search-keys-container"> </div>
    <div class="advance-search-keys-container"></div>
  </div>
  <div class="search-result-container"></div>
</div>

.search-type{
    height:20px;
    width:auto;
    margin:5px 10px;
    background-color:#4000A0;
}

jsfiddle

But unfortunately the top-margin of class search type goes upwards. I tried by adjusting the margins so and so. But no result is found. Without margins it is ok. But I want the margins.

edit:

I dont know why top-margin is not working. Anyway an alternative solution is put another div say error-correct before the search-type div ie

<div class="serach-container">
  <div class="search-keys-container">
     <div class="error-correct"></div>
     <div class="search-type">/div>
     <div class="basic-search-keys-container"></div>
     <div class="advance-search-keys-container"></div>
  </div>
  <div class="search-result-container">
  </div>
</div>

.search-type{
  height:20px;
  width:auto;
  margin:0px 10px 5px 10px;
  background-color:#4000A0;
}
.error-correct{
  width:100%;
  height:5px;
}

jsfiddle Thanks all my friends for your great help.

Upvotes: 1

Views: 90

Answers (4)

Juan Guerrero
Juan Guerrero

Reputation: 613

As I said in my comment, you are being a little bit too strict in your size definitions... But to solve your problem, you should do this:

.search-result-container{
    height:100%;
    width:100%;
    background-color: #0000FF;
    padding-top: 5px;
}

.search-type{
    height:20px;
    width:auto;
    margin: 0 10px 5px 10px;
    background-color:#4000A0;
}

To me, this looks like a bug or something, as margin isn't being applied against the parent, but the body tag.

Also, you have a minor typo in the first container serach

Upvotes: 1

lloan
lloan

Reputation: 1403

Try this and let me know if this is what you wanted.

.search-type{
    height:20px;
    width:auto;
    margin:5px 10px 0 10px;
    background-color:#4000A0;
}

That makes it come down and still keeps your margins.

Upvotes: 1

rpasianotto
rpasianotto

Reputation: 1413

DEMO

Try change that class like here:

.search-type{
height:50px;
width:90%;
margin:0px auto;
background-color:yellow;
}

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

Try adding padding:0.01px to .search-keys-container. It won't have any visual effect, but it will cause margins to not collapse like this.

Upvotes: 0

Related Questions