CODEWITHSUNDEEP
htmlcss
BadPoussin
BadPoussin

Reputation: 74

Gap between two <div> vertically aligned

I have a display problem with every browser except Firefox. I actually have this type of code

<div id="conteneur">
  <div id="milieu">
    <div class="textPara">
      <div id="conteneur">
        <div id="cadre_selection_ecole">
          <form id="form_search">
            <input type="text" value="" />
            <script type="text/javascript">
              disableAutocomplete('search');
            </script>
            <div id="listerecherche" style="margin-top:-15px; text-align:left"></div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="footer">
  SOME TEXT
</div>

The fact is that there is a gap created between "div id="milieu"" and "div id="footer"". I already tried solutions that involve to add to css some browser webkits, font size and so on. When I use the code inspector, it shows me that this gap is nothing but a no-code zone.

You will find here the gap between the two divs.

Any suggestion ?

Upvotes: 0

Views: 86

Answers (2)

BadPoussin
BadPoussin

Reputation: 74

As suggested by RompePC (thanks), i tried the top rated solution here. I adapted it to my problem like that

@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* webkit specific CSS */
    div#milieu { height:0px; }
    div#footer { height:0px; }
}

My problem is now solved.

Upvotes: 1

RompePC
RompePC

Reputation: 835

Your problem is that <form> has a height stablished by default (at least in Chrome, which is 39px). Eliminating this property should do the work (maybe you have to do extra work, as setting a <p>SOME TEXT</p> instead of pure text).

Upvotes: 1

Related Questions