Search code examples
cssresponsive-designresizeoverlapping

Prevent Divs From Overlapping In Responsive Layout

I am trying to prevent two side by side divs I have from overlapping in responsive layout.

Here is my html:

    <div class="image"><img src="images/misc/libertyXSmall.jpg"/></div>
    <div class="storyWrapper">
    <div class="headline">THIS IS A TEST HEADLINE TO SEE HOW EVERYTHING 
    WORKS ON THIS NEWS LIST PAGE!</div>
    </div>

Here is the CSS:

 body{margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;}
.mainContainer{float:left; height:auto; width:100%; max-width:800px; }
.image{float:left; margin-top:0px; width:14.25%; height:auto;}
.storyWrapper{float:left;  width:85.75%; height:auto; min-height:64px; background-color:#f6f6f6; color:#000000;transition:0.2s; }
.storyWrapper:hover{background-color:#c0c0c0; color:#ffffff;}
.headline{text-align:left; padding:6px 6px 6px 6px; font-size:11pt; font-weight:bold; font-family:Arial; text-decoration:none;}

The link to this page is: http://www.rebelplanetnews.com/newsMenu3.html

As you can see, my issue is.. the text div to the right overlaps the image div to the left on page resize (smaller). I need to prevent that.

Solution

  • The answer is not to use a percentage for your headline. The simplest solution is to use the calc value, which can be used in all modern browsers.

    The following will work:

    div.storyWrapper {
    width: calc(100% - 114px);
    float: right;
}

    Here, I have noted that the width of the image is 114px, and set the width of the container to 100% minus that.

    I have also floated the container to the right.

    Note that calc is a little bit fussy. In particular, you need spaces around the - operator: calc(100%-114px) will not work, at least not in all browsers.