0

I have a problem making a child div taking the whole width and height even if I make it 100% in width and height as shown in the code bellow 

<div id="images_rows">
    <div class="img_item"><div><span>Gone Fishing</span></div></div>
    <div class="img_item"><div><span>By the sea</span></div></div>
    <div class="img_item"><div><span>The great valley</span></div></div>
    <div class="img_item"><div><span>A night to remember</span></div></div>
    <div class="img_item"><div><span>On the lake</span></div></div>
    <div class="img_item"><div><span>On the mountains</span></div></div>
    <div class="img_item"><div><span>Take a flight</span></div></div>
    <div class="img_item"><div><span>going to the forest</span></div></div>
</div>

The CSS is as the following :

div#images_rows {
    font-size: 0;
}
div.img_item {
    width: 25%;
    min-width: 250px;
    max-width: 799px;
    margin:0;
    height: 270px;
    display: inline-block;
    position: relative;
}
div.img_item > div {
    width: 100%;
    height: 100%;
    display: table;
    background-color: rgba(85, 85, 85, 0.5);
    color: #fff;
    font-family: lovelo;
    text-align: center;
    transition: 200ms cubic-bezier(0.15,0.75,0.5,1);
    cursor: pointer;
}
div.img_item > div:hover {
    background-color: rgba(85, 85, 85, 0);
    background-size: 110%;
}
div.img_item > div > span {
    display: table-cell;
    vertical-align: middle;
    font-size: 20px !important;
}

and this is the artifact I am having :

enter image description here

and this is the result in the browser as shown in inspect element:

  • That's the Parent div :

enter image description here

  • And this is the child div :

enter image description here

And as we can see there are some floating numbers because of percentage style of the parent div, and the child doesn't take the whole width the floating numbers which leaves a space not covered

Is there any ideas how this problem can be solved ?

Lal
  • 14,726
  • 4
  • 45
  • 70
Bouzaid
  • 66
  • 8
  • Use Flexbox for that – OverCoder Jul 08 '17 at 13:52
  • @OverCoder it's not backward compatible, some old browsers does not support flexbox, – Bouzaid Jul 08 '17 at 13:53
  • try write united between parent `div`tag. ex: `
    Gone Fishing
    `...
     – Hasan Delibaş Jul 08 '17 at 13:55
  • Take a look at [this](https://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) SO question. – PeterMader Jul 08 '17 at 13:57
  • Yes that's right. but [Can I use](http://caniuse.com/#search=flexbox) says 97% of browsers running in the world support Flexbox – OverCoder Jul 08 '17 at 13:58
  • @PeterMader that's alredy has taken care of, the issue is not a space between inline-block elements, read the question carefully – Bouzaid Jul 08 '17 at 14:00
  • @OverCoder Yes I know, but it is a mandatory thing for me to use the classic oldschool way more than that some browsers are still buggy concerning this Flexbox, even Edge is still buggy what concerns the alignment – Bouzaid Jul 08 '17 at 14:03
  • What browser are you using? Moreover can you setup a JSFiddle? – OverCoder Jul 08 '17 at 14:54
  • @OverCoder this is the JSfiddle https://jsfiddle.net/z9hjxb6c/ and for the borwsers, I'm not using only one browser, I test my code in all known browsers – Bouzaid Jul 08 '17 at 15:55

0 Answers0