Display block isn't working

Question

I have a layout whitch is something like:

 <div id="content">
        <div class="container">
           <div id="container-overlay"></div>
           <img>
        </div>

        <div class="container">
            <div id="container-overlay"></div>
            <img>
        </div>
    </div>

I want all my images to be the same width and in a single column, so I used display block:

#content{
   position: relative;
}

.container{
   display: block;
}

.container-overlay{
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   position: absolute;
  }

img{
   width: 600px;
}

However images are displayed side by side and not in a single column, and I'm not sure why!!

You can check the real problem here: http://layouttotest.tumblr.com/

You need to go read up on what `position:absolute` actually does. — CBroe, Aug 28 '14 at 10:29
possible duplicate of [How does the CSS Block Formatting Context work?](http://stackoverflow.com/questions/6196725/how-does-the-css-block-formatting-context-work) — AlvaroAV, Aug 28 '14 at 10:31
images are not even in you're positioned blocks, thats why they are next to each other — Mark, Aug 28 '14 at 10:34

score 0 · Accepted Answer · answered Aug 28 '14 at 10:38

0

You just need to remove the position absolute on the .container, like to be seen in this fiddle http://jsfiddle.net/w89qytrs/. position: absolute aligns the element from the top left corner of the next parent element which is position: relative.

answered Aug 28 '14 at 10:38

Daniel Schmidt

11,605
5
38
70

I'm sorry, I just noticed the .container position: absolute isn't in my CSS! The browser does it by himself... – user3982778 Aug 28 '14 at 10:53
I don't think browsers are that evil to do stuff like that. But in case this is set use a ```!important``` after the relative. – Daniel Schmidt Aug 28 '14 at 11:02

Display block isn't working

1 Answers1