resize/expanding slideshow (inside a div) overtakes content that follows below


Tags: html,css,clear,overlap

Problem :

I built a page with a simple crossfade slideshow in a div just below the horizontal menu-bar. I want the slideshow to take up about 80% of the width of the page. So far, so good. That part works.

PROBLEM, I am having a problem understanding how to make any content that should appear BELOW the slideshow move downward in order to stay visible if the user pulls the page wider. (or, cling to the bottom of the slideshow div if the page is narrowed.

A slight complication is that I want the slideshow to partially overlap the background of the upper/menu_bar div (this works if I give the slideshow div a margin-top: value of -70px). Not sure if this is an issue.

Here is stripped-down html of the page layout as it currently stands, and below that, the css file I have for this (some of the ids and classes are used for other pages)

The problem starts to appear somewhere above the line that reads "Section for current/upcoming info like recent news, etc. SHOULD ALWAYS APPEAR BELOW SLIDESHOW"

<!doctype html>
<html lang="en">
<head>
    <link rel="icon" type="image/png" href="logos/cc_ico.png">
    <link rel="stylesheet" type="text/css" href="new.css" />
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>New Idea</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    
    <script src="jquery/jquery.cycle2.min.js"></script>
    <script type="text/javascript" src="new.js"></script>
    <script type="text/javascript">//show live dimensions of page in dimensions div
    window.onresize = displayWindowSize;
    window.onload = displayWindowSize;
    function displayWindowSize() {
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
        document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight;
    };
  </script>

</head>
<body>
    <div id="blackbar" style="text-align: right;">
        <div style="float: left;"><!---temp space for debug messages--->
    </div>  
    <div>This page is under development.</div>

    <a href="http://facebook.com/ourcompany" target="_blank" /><img src="logos/_face.png" style="margin:0;" /></a>
    <a href="http://twitter.com/ourcompany" target="_blank" /><img src="logos/_twit.png" style="margin:0;" /></a>
    <a href="http://pinterest.com/ourcompany" target="_blank" /><img src="logos/_pin.png" style="margin:0;" /></a>
    <a href="http://www.linkedin.com/company/ourcompany" target="_blank" /><img src="logos/_link.png" style="margin:0;" /></a>&nbsp;&nbsp;
    </div><!----end of blackbar--->

 <div class="whitecontent"><!--start the wrapper-->

 <div class="brickbar">
    <div class="content_box_centerwide">
        <img src="logos/CCLogoWeb5.png" style="width:40%; margin:0px; max-width:440px; min-width:360px; margin-bottom:-40px" /><!---absorbs top whitespace of number.png--->
        <img src="logos/number.png" style="width:40%; margin:0px; max-width:440px; min-width:360px; float: right; ;" />
        <div style="clear: both;"></div>
    </div>

    <div id="menu_row">
        <div class="buttonspace">
            <form method="post" action="" target="_self" title="[title]">
            <input type="submit" value="Home" class="visitorButton">
            <input type="hidden" name="do_this" value="new_Home.php"></form>
        </div>

         <div class="buttonspace">
            <form method="post" action="" target="_self" title="[title]">
            <input type="submit" value="Listings" class="visitorButton">
            <input type="hidden" name="do_this" value="new_Listings.php"></form>
        </div>

         <div class="buttonspace">
            <form method="post" action="" target="_self" title="[title]">
            <input type="submit" value="Search MLS" class="visitorButton">
            <input type="hidden" name="do_this" value="new_Search_MLS.php"></form>
        </div>         
        <div class="buttonspace">
            <form method="post" action="" target="_self" title="[title]">
            <input type="submit" value="About Us" class="visitorButton">
            <input type="hidden" name="do_this" value="new_About_Us.php"></form>
        </div>

         <div class="buttonspace">
            <form method="post" action="" target="_self" title="[title]">
            <input type="submit" value="Feedback" class="visitorButton">
            <input type="hidden" name="do_this" value="new_Feedback.php"></form>
        </div>
    </div><div id="menu_lastrow_bottompad"></div></div>

    <style>
    @media all and (max-width: 359px) {
      .midbar_toppad2 { display: none; }
      .midbar_toppad { display: none; }
      .wideslides { display: none; }
    }
    </style>

    <div class="midbar_toppad2">
    <style>
    /* the slide container with a fixed size */
    .wideslides {
        box-shadow: 0px 0px 6px black;
        margin-left: auto;
        margin-right: auto;
       margin-top:-70px;   /*hopefully floats up into brickbar */
        /*margin-bottom:-70px;  hopefully floats up into brickbar */
        width: 80%;
        min-width:360px;
        position: relative;
        background-color: transparent;
    }
    /* the images are positioned absolutely to stack. opacity transitions are animated. */
    .wideslides img { 
      display: block;
      position: absolute; 
      transition: opacity 1s;
      opacity: 0;
      width: 100%;
      border: solid thick #004000;
    }
    /* the first image is the current slide. it's faded in. */
    .wideslides img:first-child { 
      z-index: 2; /* frontmost */
      opacity: 1;
    }
    /* the last image is the previous slide. it's behind the current slide and it's faded over. */
    .wideslides img:last-child {
      z-index: 1; /* behind current slide */
      opacity: 1;
    }
    </style>

<script type="text/javascript">
function nextSlide() {/* very simple crossfade */
    var q = function(sel) { return document.querySelector(sel); }   
    q(".wideslides").appendChild(q(".wideslides img:first-child"));
}
setInterval(nextSlide, 5000)
</script>

    <div class="wideslides">
        <img src="images/crops_h/h_crop_03.JPG" r=1 />
        <img src="images/crops_h/h_crop_18.jpg" r=2 />
        <img src="images/crops_h/h_crop_07.JPG" r=3 />
        <img src="images/crops_h/h_crop_14.jpg" r=4 />
        <img src="images/crops_h/h_crop_06.JPG" r=5 /></div> 
    </div>

    <div class="midbar_toppad">

        <div class="content_box_centerwide">
        <center>
            (Section for current/upcoming info like recent news, etc. SHOULD ALWAYS APPEAR BELOW SLIDESHOW)
        </center>
        </div>
    </div>

    <!--//  FOOTER CONTENT  -->
    <div id="dimensions"><noscript>JavaScript must be enabled to utilize all functions on this page.</noscript></div>

    <div id="blackbar"><small>Copyright &copy;2014 Our Co. (Except where otherwise noted.)</small></div>
     </div><!--end the wrapper-->
     <div id="bottombar">&nbsp;</div>
</body>
</html>

Here is the .css (the divs used in the code above are as follows:

class="brickbar"
class="buttonspace"
class="clearbar"
class="content_box_centerwide"
class="midbar_toppad"
class="midbar_toppad2"
class="visitorButton"
class="whitecontent"
class="wideslides"
id="blackbar" 
id="bottombar"
id="dimensions" 
id="menu_lastrow_bottompad"
id="menu_row"

    body {
    font-family: "Century Gothic",arial,helvetica,sans-serif;
    font-size:12pt;
    text-align:center;
    margin:0px;
    overflow-x: hidden;
}

#whitecontent {/* a wrapper that contains everything */
    background-color:#FFFFFF;
}

#topbar{
width:100%;
margin:0px;
padding-bottom: 5px;
}

.clearbar{/*transparent*/
width:100%;
height: 100%;
margin:0px;
padding-bottom: 5px;
background-color: transparent; /**/
display: inline-block;
}

.brickbar{
background-image:url('../images/ccbrick3_pale.jpg');
width:100%;
margin:0px;
border-bottom: solid thick #004000;
}

.whitebar{/*white*/
width:100%;
margin:0px;
padding-bottom: 5px;
background-color: #FFFFFF; 
}

.midbar{ /* turned this into a class instead of an id*/
width:100%;
margin:0px;
background-color: #FFFFFF; 
color: #000000;
}

#blackbar{
width:100%;
vertical-align: middle;
background-color:#000000; /*black*/
color:#F5ECCB; /*font tan*/
margin: 0px;
padding-top: 2px;
}

/*idea from http://css-tricks.com/equidistant-objects-with-css/ */
#menu_row {
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    padding-left: 4%;
    padding-top: 5px;
    text-align: justify;
    border:none;
    white-space: nowrap;
    /*font-size: 0.1px;  IE 9/10 don't like font-size: 0; */
    max-width: 1000px;
    min-width: 360px;
}

 #menu_row div.buttonspace { /* a button space */
    width: 18%; /* for 5 buttons, etc. */
    margin: 0px;
    padding: 0px;
    line-height: 25px;
    display: inline-block;
}

 #menu_row div.visitor { /* a button space */
    font-family: "Century Gothic Bold",arial,helvetica,sans-serif;
    font-weight: bold;
    font-size:10pt;
    /*width: 15%;  for 6 buttons*/
    width: 18%; /* for 5 buttons, etc. */
    margin: 0px;
    line-height: 25px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    border: solid thin black;
    background-color:#244F21; /*a deep green*/
    color:#F5ECCB; /*font tan*/    
}

.visitorButton { /* a button */
    white-space: nowrap; 
    font-family: "Century Gothic Bold",arial,helvetica,sans-serif;
    font-weight: bold;
    font-size:10pt;
    /*width: 15%;  for 6 buttons*/
    width: 100%; /* of buttonspace */
    margin: 0px;
    line-height: 25px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    border: solid thin black;
    background-color:#244F21; /*a deep green*/
    border-color:#425A39;
    color:#F5ECCB; /*font tan*/
}

#menu_row:after {/* Ensures there are at least 2 lines of text, so justification works */
  content: '';
  width: 100%; 
  display: inline-block;
}

#menu_lastrow {
  content: '';
  width: 100%; 
  display: inline-block;
  /*border-bottom: solid thick #004000;*/
  margin-bottom: -4px; /* room for border */
}

/* START special selectors to float slide show box between menu and lower divs */
#menu_lastrow_bottompad {
  content: '';
  width: 100%; 
  display: inline-block;
  padding-bottom: 80px; /*so slideshow box can float upwards into brick*/
  margin-bottom: -6px; /* room for border */
}

.midbar_toppad2{ /* turned this into a class instead of an id*/
width:100%;
margin:0px;
padding-top: -70px; /*special case for  slidebox overlap*/
background-color: transparent;
color: #000000;
}

.midbar_toppad{ /* turned this into a class instead of an id*/
width:100%;
margin:0px;
padding-top: 210px; /*special case for  slidebox overlap*/
background-color: transparent;
color: #000000;
}

.images_box_centerwide {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    padding-top: 5px;
    text-align: left;
    width: 90%;
    min-width: 324px; /* 90% of 360 */
}

.content_box_centerwide {
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    padding-top: 5px;
    text-align: left;
    border:none;
    max-width: 850px;
    min-width: 360px;
}

.content_box_half {
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    text-align: left;
        font-size:10pt;
    border:none;
    max-width: 400px;
    float: left;
}

#bottombar{
    display: block;
width:100%;
height: 100%;
vertical-align: top;
background-color:#000000; /*black*/
color:#F5ECCB; /*font tan*/
margin: 0px;
padding-top: 2px;
}


Solution :

I found a solution for you... but your html structure you are using is not optimal.

.midbar_toppad{
width:100%;
margin:0px;
padding-top: 30%; /*This is what i changed*/
background-color: transparent;
color: #000000;
}

:) hope u can use it anyway. Here is the fiddle: http://jsfiddle.net/PR4DE/a97m5549/1/


    CSS Howto..

    How to make div covers divs on hover?

    How to use Ant to concatenate CSS files from external CSS @import file

    How to build sliding horizontal menu. CSS

    How to avoid the overlapping of the button?

    How to make css layout to fit html content?

    Only Javascript code to show a class without onclick

    on hover and on click how to fade out image and fade in content text

    In Jsoup, how do I parse the CSS query by the attribute, instead of the data?

    How to place a scroll down button in the middle of split screen window?

    How to update the attribute while overriding a style defined in css?

    How to compile sass / scss without creating map files

    How to set numerous links in a single line with CSS?

    How can i setup multiple sites within a single ASP.Net project?

    how to include css style to modify existing placeholder

    How do I spilt the footer into different widths?

    How to hide DIV when scroll reach at Bottom through CSS?

    How to create a box having border top width more than content at different browser display size?

    How to wrap a div vertically and then horizontally

    How to have an image zoom in and out automatically in the background

    How do I offset where my fixed nav bar takes me?

    How to create multiline ListBox in GWT?

    how to select one element in jQuery

    How can I use Modernizr to get border-radius working in IE8?

    How to Drop 2 nested shadows On 2 Divisions in CSS? [closed]

    How to theme Options of select box

    How can I center an unknown number of block elements of unknown widths in a block container of an unknown width?

    How to remove width with center DIV

    how to give no-more-use of css in jquery for css params

    resize/expanding slideshow (inside a div) overtakes content that follows below

    How does reveal.js resize elements?