1

I have two divs called map and filters. Each of them has a solid border of 1px width. For the moment the map div is containing eight rows of images at different widths (I can provide a screenshot if necessary) and it has a fixed position. I want to put the filters div right beneath the map div which it has 82.75% height. I've tried different display and position values but with no success, either my first div collapse or the second one remains at the top of the screen. What should I do to have the both divs covering 100% of the screen one beneath the other?

My CSS code:

body {
    margin: 0px;
    width: 100%;
    height: 100%;
    background-color: #F7F7F7 !important;
}
#map {
    display: table;
    border-style: solid;
    border-width: 1px;
    width: 100%;
    height: 82.75%;
    position: fixed;
}
#filters {
    border-style: solid;
    border-width: 1px;
    width: 100%;
    height: 17.25%;
    position: fixed;
}
MariusNV
  • 310
  • 3
  • 6
  • 17
  • *What should I do to have the both divs covering 100% of the screen one beneath the other?* **or** *side by side*? – Mr. Alien Nov 05 '13 at 10:28
  • 1
    Why you don't set 'top:0'/'bottom:0' and 'left:0' values for them? – Agat Nov 05 '13 at 10:30
  • @Agat - just what I was going to say in an answer, you should post that. – Sinister Beard Nov 05 '13 at 10:33
  • Try giving bottom:0 to filter div. – Sujata Chanda Nov 05 '13 at 10:34
  • @Mr.Alien I'm sorry for not explain myself well enough, I want basically that the map div to cover 82.75% of the screen height and the filters div to cover the remaining 17.25%; – MariusNV Nov 05 '13 at 10:35
  • @MariusNV http://stackoverflow.com/a/16414230/1542290 – Mr. Alien Nov 05 '13 at 10:37
  • @SujataChanda I've add bottom:0 to the filters div and it is now located below map like it should :) but there is a difference of 2px between the borders. Why? – MariusNV Nov 05 '13 at 10:43
  • I have tested it and i haven't seen any gap. Please provide a fiddle so that we can inspect it clearly. – Sujata Chanda Nov 05 '13 at 10:48
  • @SujataChanda I will provide a fiddle right away. Here's a prinscreen to show what am I talking about: http://s14.postimg.org/79siratkh/printscreen7.jpg – MariusNV Nov 05 '13 at 10:50
  • Here's the fiddle: http://jsfiddle.net/MariusNV/gTPBw/ It is like it should but in my code I use bootstrap css. This could affect it? – MariusNV Nov 05 '13 at 10:58
  • Yes i have tried the same thing. Yes bootstrap does adds some extra margin/padding. Inspect it carefully, i think you be able to find the solution. – Sujata Chanda Nov 05 '13 at 11:06
  • @SujataChanda I've changed the height percent of filters div and is now filling the gap. Thank you for your help! – MariusNV Nov 05 '13 at 11:07

1 Answers1

3

Applying bottom: 0 to #filters solves the problem.

EDIT: This happens because of borders - its width isn't added to the whole element size by default. You need to add these rules to both #map and #filters:

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-box-sizing: border-box;
luke
  • 3,531
  • 1
  • 26
  • 46
  • Thanks! This solves my original problem but the divs are now separated by 2px and I don't know why? Printscreen: http://s14.postimg.org/79siratkh/printscreen7.jpg – MariusNV Nov 05 '13 at 10:48
  • I've tried the updated version with no success. I have bootstrap css included in my code, this could affect the border? – MariusNV Nov 05 '13 at 11:03
  • 1
    2 pixels are because your borders (each to every box) might don't have a color (or have some other color). – Agat Nov 05 '13 at 11:04
  • @Agat I've changed the height percent of filters div and is now filling the gap. Thank you for your help! – MariusNV Nov 05 '13 at 11:07