0

I have this CSS for 2 divs:

#homepage-twitter {
    width:28%;
    height:500px;
    overflow:hidden;
    display:inline;
    float:right;
}
#homepage-blog-posts {
    width:70%;
    height:500px;
    display:inline;
    float:left;
    margin-right:10px;
    border-right:1px solid black;
}

@media screen and (max-width: 1250px) {
    #homepage-blog-posts {
        width:100%;
        border-right:0;
    }
    #homepage-twitter {
        display:block;
        width:100%;
        border:1px solid #F36F25;
    }
}

here is a fiddle with the full html and css code: http://jsfiddle.net/Gb8Fr/

if you make the screen as wide a possible, the divs are inline with each other but as the screen gets smaller (using media queries) the divs go one above the other but i can't keep the space in between them and they start to overlap each other

how can i stop them from doing this?

charlie
  • 1,356
  • 7
  • 38
  • 76

1 Answers1

3

Remove the height: 500px from homepage-blog-posts or add overflow: hidden to it. You can remove it as part of the media query property if you need.

Explosion Pills
  • 188,624
  • 52
  • 326
  • 405