CODEWITHSUNDEEP
htmlcss
charlie
charlie

Reputation: 1384

responsive CSS divs overlap each other

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?

Upvotes: 0

Views: 4014

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191749

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.

Upvotes: 3

Related Questions