CODEWITHSUNDEEP
csshtmlresizecss-float
coolpup
coolpup

Reputation: 159

Floating Divs Overlap Behind Main Content

I've looked at other questions asking similar things, but the answers for them don't seem to work for my problem. I have a website that contains two divs on either side of a news slider, which is also in a div. The side divs are both floating to their respective sides. The problem is, when I make the window smaller, they (adLeft and adRight) overlap the center sliderDiv and go behind it. I've tried various things like making a min-width, overflow be hidden, or changing padding and margins, but I never see any difference. Any help would be greatly appreciated!

Here's the website: http://thehummingbirdplace.com/

Here's the relevant html:

<div id="adLeft">
    <a href="http://www.amazon.com/Kathleen-Ball/e/B007QNUTC8/ref=ntt_athr_dp_pel_1/" target="_blank">
        <img src="_images/advertisements/autumn.png" width="200" height="300" alt="Autumn's Hope" />
    </a>
<br><br>
    <a href="http://www.romancestorytime.com/" target="_blank">
        <img src="_images/advertisements/loveCowboy.png" width="200" height="300" alt="For the Love of a Cowboy" />
    </a>
</div>

<div class="clear">
</div>

<div id="adRight">
    <a href="http://www.jeanjoachimbooks.com/" target="_blank">
        <img src="_images/advertisements/lovesLastChance.png" width="200" height="300" alt="Love's Last Chance" />
    </a>
<br><br>
    <a href="http://www.jeanjoachimbooks.com/" target="_blank">
        <img src="_images/advertisements/loversLiars.png" width="200" height="300" alt="Lovers and Liars" />
    </a>
</div>

<div class="clear">
</div>

<div class="sliderDiv" id="slider">
    <a href="episode/12/30.html"><img src="_images/podcast/123013_slider.png" width="851" height="323" alt="Later in Life Romances" /></a>

    <a href="episode/12/23.html"><img src="_images/podcast/122313_slider.png" width="851" height="323" alt="Christmas Contemporary Romances" /></a>

    <a href="episode/12/16.html"><img src="_images/podcast/121613_slider.png" width="851" height="323" alt="Christmas Historicals" /></a>

    <a href="episode/12/9.html"><img src="_images/podcast/120913_slider.png" width="851" height="323" alt="Christmas Novellas" /></a>

    <a href="archive.html"><img src="_images/podcast/archive_slider.png" width="851" height="323" alt="Archive" /></a>

</div>

And here is the css that applies to it:

#adLeft {
width: 200px;
margin-right: 50px;
float: left;
margin-left: 20px;
}

#adRight {
width: 200px;
margin-left: 50px;
float: right;
margin-right: 20px;
}

.clear {
float: clear;
}

.sliderDiv {
margin-right: auto;
margin-left: auto;
width: 851px;
position: relative;
z-index: 1;
margin-top: -48px;
}

Upvotes: 0

Views: 119

Answers (1)

Blake Mann
Blake Mann

Reputation: 5490

I believe you were on the right track with using min-width, as you can use it on the body of the page to prevent it from scaling down to the point of overlap.

Adding:

body {
    min-width: 1400px;
}

to your styles should do the trick. The min-width needs to be applied to body because that's the overall container which everything else is inheriting width from, and positioning against.

Alternatively, if you do not want your page to get cut off once the screen gets smaller than that minimum width, you can use media queries to hide or move the left and right side images so that they are no longer in a position to cause overlap.

A media query is used like so:

@media only screen
and (max-width: 1400px){

    #adLeft, #adRight {
        /* Some sort of styles here */
    }

}

I hope that helps, let me know if you have any questions, Cheers!

Upvotes: 1

Related Questions