Divs moving downward when I resize the browser

HTML & CSS
37

Hi, Michael.

This is my interpretation of something similar to your request.

Consider this a starting point from which you can better describe what you would like to achieve.

@PaulOB can hardly wait!

Because the page is fundamentally narrow, portrait, I chose to apply the full width background colors/images with outer divs.

I used the same image “TopBanner.jpg” for the image behind the ring and names as I did for the image over the rest of the page which is applied in the body tag. The top image overlays the body image.

The row with the dates has been given an translucent black color rather than using the image with the gradient. I was lazy. I also realize that you may not want the dates over the black row.

I used display:table/table-cell properties because I am more familiar with them than with flexbox and I was able to tweak the tcells to suit.

The large image closely accommodates the height of the viewport using calc and vh minus a correction factor for the top sections. The image currently has a minimum width assigned but that is easily changed if one really wants the whole page to fit on a mobile in portrait mode.

For this demo, I reduced the size of the weddingsite.jpg image (the standing couple) from 2988x5312 (2,144 KB) to 675x1200 (110 KB) and lowered the quality to 80%.

The HTML and CSS:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="description" content="The HTML5 Herald">
    <meta name="author" content="SitePoint">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="michaelmorris1a.css">
    <title>The HTML5 Herald</title>
<!--
https://www.sitepoint.com/community/t/divs-moving-downward-when-i-resize-the-browser/224155
morrism35 (michael morris)
May 16,2016 2:56 AM
-->
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
html,body {min-height:100vh;}
body {
    font-size:100%;
    background-image:url("images/TopBanner.jpg");
    background-repeat:no-repeat;
    background-size:100% 100%;
    padding:0;
    margin:0;
}
.bgwrap.h {
    background-image:url("images/TopBanner.jpg");
    background-repeat:no-repeat;
    background-size:100% 100%;
}
.bgwrap.d {
    background-color:rgba(0,0,0,.3);
}
.container {
    max-width:800px;
    margin:0 auto;
/*    outline:1px solid lime;  /* TEST Outline.  To Be DELETED. */
}
.names {
    display:table;
    width:100%;
    padding:2vh 0;
/*    outline:1px solid yellow;  /* TEST Outline.  To Be DELETED. */
}
.tcell {
    display:table-cell;
    text-align:center;
    vertical-align:bottom;
/*    outline:1px solid blue;  /* TEST Outline.  To Be DELETED. */
}
.m,.c {
    text-align:right;
    color:#eee8aa;
    font-size:1.825em;
    font-style:italic;
    text-transform:uppercase;
    width:35%;
}
.c {
    text-align:left;
    width:40%;
}
.ring {
    display:block;
    max-width:60px;
    height:auto;
    margin:0 auto 20px;
}
.date {
    display:table;
    width:100%;
    max-width:550px;
    border-spacing:6px 8px;
    color:#eee8aa;
    text-transform:uppercase;
    font-size:1.25em;
    font-style:italic;
    margin:0 auto;
}
.date span {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    width:56%;
/*    outline:1px dotted lime;  /* TEST Outline.  To Be DELETED. */
}
.date span + span {
    width:44%;
}
.container.i {
    padding-top:2vh;
}
.wedding {
    min-width:240px;   /* limits the minimum width of the image (therefore the height) */
    max-width:calc(52vh - 70px);  /* reduces width of image (therefore the height) as viewport height is reduced */
    border:4px double #eee8aa;
    margin:0 auto;
}
.wedding img {
    display:block;
    width:100%;
    height:auto;
}
@media screen and (max-width:450px) {
    body {font-size:75%;}
}
    </style>
</head>
<body>
 
<div class="bgwrap h">
    <div class="container">
        <div class="names">
            <div class="tcell m">Michael</div>
            <div class="tcell"><img class="ring" src="images/gold.gif" alt="Wedding Ring" width="120" height="109"></div>
            <div class="tcell c">Christina</div>
        </div>
    </div>
</div>
<div class="bgwrap d">
    <div class="container">
        <div class="date">
            <span>Sept 1, 2016 7:00&nbsp;PM</span><span>Salisbury, NC</span>
        </div>
    </div>
</div>
<div class="container i">
    <div class="wedding"><img src="images/weddingsite2.jpg" alt="Wedding Website" width="675" height="1200"></div>
</div>

</body>
</html>

This page plus the images: (unzip, click and play)

morrism.zip (147.0 KB)

686×850 237 KB

1 Like