Floating div when resizing - html

Question

I've tried finding a solution to my problem but to no avail.
I have a website created using media queries. In this project I can't use anything else besides pure HTML and CSS, that's why in order to keep the design clean, I hide some divs on certain widths (I'm referring to the 'play' button in the upper right corner, for instance).
Reproducing the problem:
Resize the window, so that the 'play' button disappears.
Go back to the initial width.
Unfortunately the problem occurs randomly, sometimes everything is perfect, sometimes it happens every single time. I've been able to reproduce it using both Safari 9.0.1 and Google Chrome 46.0.2490.86 running on OS X Yosemite 10.11.1.
Please find images explaining the issue below:
How it's supposed to look
How it looks upon resizing back
Thank you in advance for any help!
Code:
body
{
font-family: 'Open Sans', sans-serif;
font-size: 13px;
color: #7d7d7d;
background-color: #f0f3f6;
margin: 0 auto;
max-width: 1200px;
}
a:link, a:visited
{
color: #e88d8a;
text-decoration: none;
}
a:hover, a:active
{
color: #dd5555;
}
.container
{
margin: 0px 15px 30px 15px;
}
aside
{
width: 25%;
float: left;
}
section
{
width: 75%;
float: left;
}
header
{
color: #ffffff;
background-color: #dd5555;
font-size: 1.15em;
font-weight: bold;
text-transform: uppercase;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 15px 15px 15px 20px;
}
h3
{
color: #dd5555;
}
.profile
{
text-align: center;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
padding: 30px 30px 20px 30px;
margin: 30px 15px 0px 15px;
}
.img-circle
{
border-radius: 50%;
width: 100%;
max-width: 200px;
}
.img-rounded
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.profile-info
{
margin-bottom: 10px;
}
.name
{
color: #dd5555;
font-size: 1.2em;
font-weight: bold;
margin: 20px 0px 5px 0px;
}
.social-icons i
{
display: inline-block;
padding: 10px;
}
.social-icons a:link, .social-icons a:visited
{
color: #e88d8a;
text-decoration: none;
}
.social-icons a:hover, .social-icons a:active
{
color: #dd5555;
}
nav
{
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
margin: 30px 15px 0px 15px;
}
.nav-content ul
{
list-style-type: none;
padding: 10px 0px 10px 0px;
margin: 0;
}
.nav-content i
{
width: 15px;
margin-right: 15px;
}
.nav-content a:link, .nav-content a:visited
{
display: block;
color: #e88d8a;
font-size: 1.14em;
font-weight: 600;
text-decoration: none;
padding: 10px 20px 10px 20px;
}
.nav-content a:hover, .nav-content a:active
{
color: #dd5555;
}
.quote
{
display: flex;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
margin: 30px 15px 30px 15px;
}
blockquote
{
background: url(img/open_quote.svg) no-repeat left -5px, url(img/close_quote.svg) no-repeat right bottom -8px;
background-size: 30px 30px;
min-height:30px;
padding: 5px 30px 0 30px;
margin: 0px;
}
.quote-left
{
text-align: center;
float: left;
width: 450px;
padding: 20px 50px 20px 35px;
}
.quote-right
{
float: left;
padding: 20px 25px 10px 0px;
}
.quote-right-768
{
display: none;
}
.track-title
{
color: #dd5555;
font-size: 1.2em;
font-weight: bold;
}
.track-title-link
{
display: none;
color: #dd5555;
font-size: 1.2em;
font-weight: bold;
}
.track-title-link a:link, .track-title-link a:visited
{
color: #e88d8a;
text-decoration: none;
}
.track-title-link a:hover, .track-title-link a:active
{
color: #dd5555;
}
.play
{
float: left;
margin: 10px 10px 10px 0;
}
.play a:link, .play a:visited
{
color: #7d7d7d;
text-decoration: none;
}
.play a:hover, .play a:active
{
color: #dd5555;
}
.artist-album
{
float: left;
padding: 10px 10px 0px 0px;
}
.artist-album span
{
font-weight: bold;
}
.content
{
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
clear: both;
margin: 0px 15px;
}
article
{
padding: 2px 20px 4px 20px;
}
.gallery
{
text-align: center;
margin: 15px;
}
.links
{
font-weight: 600;
margin: 15px 15px 15px 20px;
}
.links ul
{
list-style-type: none;
padding: 0;
margin: 0;
}
.links li
{
margin-bottom: 5px;
}
.floating-box
{
display: inline-block;
width: 200px;
height: 200px;
margin: 10px;
}
.responsive-container
{
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.responsive-container iframe
{
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
.clear
{
clear: both;
}
footer
{
color: #7d7d7d;
text-align: center;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
margin: 30px 15px 0px 15px;
padding: 15px 0px 15px 0px;
}
footer > br
{
display: none;
}
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px)
{
aside
{
width: 25%;
}
section
{
width: 75%;
}
.quote-right
{
padding: 20px 25px 20px 0px;
}
.track-title
{
display: none;
}
.track-title-link
{
display: inline-block;
}
.play
{
display: none;
}
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 1080px)
{
aside
{
width: 30%;
}
section
{
width: 70%;
}
.quote-left
{
padding: 20px 20px 20px 15px;
}
.quote-right
{
display: none;
}
.quote-right-768
{
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px)
{
aside
{
width: 35%;
}
section
{
width: 65%;
}
.quote-left
{
padding: 20px 20px 20px 15px;
}
.quote-right
{
display: none;
}
.quote-right-768
{
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
/* Custom, BlackBerry Playbook */
#media only screen and (max-width : 600px)
{
aside
{
width: 100%;
}
section
{
width: 100%;
}
.quote
{
flex-direction: column;
padding-right: 20px;
}
blockquote
{
margin-right: 20px;
}
.quote-left
{
width: 100%;
padding: 20px;
}
.quote-right
{
display: inline-block;
padding: 5px 0px 10px 20px;
}
.quote-right-768
{
display: none;
}
.track-title
{
display: block;
}
.track-title-link
{
display: none;
}
.play
{
display: inline-block;
}
footer > br
{
display: inline-block;
}
}
/* Custom, iPhone 6 */
#media only screen and (max-width : 375px)
{
aside
{
width: 100%;
}
section
{
width: 100%;
}
.quote
{
flex-direction: column;
padding-right: 20px;
}
blockquote
{
margin-right: 20px;
}
.quote-left
{
width: 100%;
padding: 20px;
}
.quote-right
{
display: inline-block;
padding: 5px 0px 10px 20px;
}
.quote-right-768
{
display: none;
}
.track-title
{
display: block;
}
.play
{
display: inline-block;
}
footer > br
{
display: inline-block;
}
}
/* Custom, Blackberry Z30 */
#media only screen and (max-width : 360px)
{
aside
{
width: 100%;
}
section
{
width: 100%;
}
.quote
{
flex-direction: column;
padding-right: 20px;
}
blockquote
{
margin-right: 20px;
}
.quote-left
{
width: 100%;
padding: 20px;
}
.quote-right
{
display: inline-block;
padding: 5px 0px 20px 20px;
}
.quote-right-768
{
display: none;
}
.track-title
{
display: none;
}
.track-title-link
{
display: inline-block;
}
.play
{
display: none;
}
footer > br
{
display: inline-block;
}
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px)
{
aside
{
width: 100%;
}
section
{
width: 100%;
}
.quote
{
flex-direction: column;
padding-right: 20px;
}
blockquote
{
margin-right: 20px;
}
.quote-left
{
width: 100%;
padding: 20px;
}
.quote-right
{
display: inline-block;
padding: 5px 0px 15px 20px;
}
.quote-right-768
{
display: none;
}
.gallery
{
margin: 15px 0px 15px 0px;
}
footer > br
{
display: inline-block;
}
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<!-- RWD -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Custom stylesheet-->
<link href="style.css" rel="stylesheet">
<!-- Include Open Sans Font -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic&subset=latin,greek-ext,greek,vietnamese,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<!-- Include Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<aside>
<div class="profile">
<img class="img-circle" src="img/p_pic.png">
<div class="profile-info">
<div class="name">Jakub Jas</div>
Kraków, Polska
</div>
<div class="social-icons">
<i class="fa fa-facebook-official fa-2x"></i>
<i class="fa fa-lastfm fa-2x"></i>
<i class="fa fa-soundcloud fa-2x"></i>
</div>
</div>
<nav>
<header>Menu</header>
<div class="nav-content">
<ul>
<li><i class="fa fa-home"></i>Strona główna</li>
<li><i class="fa fa-music"></i>Muzyka</li>
<li><i class="fa fa-camera-retro"></i>Fotografia</li>
<li><i class="fa fa-desktop"></i>Grafika</li>
<li><i class="fa fa-envelope"></i>Kontakt</li>
</ul>
</div>
</nav>
</aside>
<section>
<div class="quote">
<div class="quote-left">
<blockquote>
L'air pur me Manque, le bruit des gens autour m'angoisse<br />
La ville s'immisce peu à peu dans ce corps maigre qu'est le mien<br />
Obstruant ainsi mes rêveries joyeuses d'un idéal qui s'éteint.
</blockquote>
</div>
<div class="quote-right">
<div class="author-details">
<div class="track-title">L'échappée</div>
<div class="track-title-link">L'échappée</div>
<div class="play"><i class="fa fa-play-circle-o fa-3x"></i></div>
<div class="artist-album">
<span>Les Discrets</span><br />
Septembre et ses dernières Pensées
</div>
</div>
</div>
<div class="quote-right-768">
<div class="author-details">
<div class="track-title-link">L'échappée</div>
<div class="artist-album">
<span>Les Discrets</span><br />
Septembre et ses dernières Pensées
</div>
</div>
</div>
</div>
<div class="content">
<header>Kontakt</header>
<article>
<p>W przyszłości pojawi się tutaj formularz kontaktowy. Póki co zachęcam do bezpośredniego kontaktu poprzez mój adres e-mail.
</p>
</article>
</div>
</section>
<div class="clear"></div>
<footer>
Copyright © 2015 Jakub Jas. <br />Wszystkie prawa zastrzeżone.
</footer>
</div>
</body>
</html>

Answer 1

just move your "play" div inside "artist-album"
body
{
font-family: 'Open Sans', sans-serif;
font-size: 13px;
color: #7d7d7d;
background-color: #f0f3f6;
margin: 0 auto;
max-width: 1200px;
}
a:link, a:visited
{
color: #e88d8a;
text-decoration: none;
}
a:hover, a:active
{
color: #dd5555;
}
.container
{
margin: 0px 15px 30px 15px;
}
aside
{
width: 25%;
float: left;
}
section
{
width: 75%;
float: left;
}
header
{
color: #ffffff;
background-color: #dd5555;
font-size: 1.15em;
font-weight: bold;
text-transform: uppercase;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 15px 15px 15px 20px;
}
h3
{
color: #dd5555;
}
.profile
{
text-align: center;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
padding: 30px 30px 20px 30px;
margin: 30px 15px 0px 15px;
}
.img-circle
{
border-radius: 50%;
width: 100%;
max-width: 200px;
}
.img-rounded
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.profile-info
{
margin-bottom: 10px;
}
.name
{
color: #dd5555;
font-size: 1.2em;
font-weight: bold;
margin: 20px 0px 5px 0px;
}
.social-icons i
{
display: inline-block;
padding: 10px;
}
.social-icons a:link, .social-icons a:visited
{
color: #e88d8a;
text-decoration: none;
}
.social-icons a:hover, .social-icons a:active
{
color: #dd5555;
}
nav
{
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
margin: 30px 15px 0px 15px;
}
.nav-content ul
{
list-style-type: none;
padding: 10px 0px 10px 0px;
margin: 0;
}
.nav-content i
{
width: 15px;
margin-right: 15px;
}
.nav-content a:link, .nav-content a:visited
{
display: block;
color: #e88d8a;
font-size: 1.14em;
font-weight: 600;
text-decoration: none;
padding: 10px 20px 10px 20px;
}
.nav-content a:hover, .nav-content a:active
{
color: #dd5555;
}
.quote
{
display: flex;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
margin: 30px 15px 30px 15px;
}
blockquote
{
background: url(img/open_quote.svg) no-repeat left -5px, url(img/close_quote.svg) no-repeat right bottom -8px;
background-size: 30px 30px;
min-height:30px;
padding: 5px 30px 0 30px;
margin: 0px;
}
.quote-left
{
text-align: center;
float: left;
width: 450px;
padding: 20px 50px 20px 35px;
}
.quote-right
{
float: left;
padding: 20px 25px 10px 0px;
}
.quote-right-768
{
display: none;
}
.track-title
{
color: #dd5555;
font-size: 1.2em;
font-weight: bold;
}
.track-title-link
{
display: none;
color: #dd5555;
font-size: 1.2em;
font-weight: bold;
}
.track-title-link a:link, .track-title-link a:visited
{
color: #e88d8a;
text-decoration: none;
}
.track-title-link a:hover, .track-title-link a:active
{
color: #dd5555;
}
.play
{
float: left;
margin: 10px 10px 10px 0;
}
.play a:link, .play a:visited
{
color: #7d7d7d;
text-decoration: none;
}
.play a:hover, .play a:active
{
color: #dd5555;
}
.artist-album
{
float: left;
padding: 10px 10px 0px 0px;
}
.artist-album span
{
font-weight: bold;
}
.content
{
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
clear: both;
margin: 0px 15px;
}
article
{
padding: 2px 20px 4px 20px;
}
.gallery
{
text-align: center;
margin: 15px;
}
.links
{
font-weight: 600;
margin: 15px 15px 15px 20px;
}
.links ul
{
list-style-type: none;
padding: 0;
margin: 0;
}
.links li
{
margin-bottom: 5px;
}
.floating-box
{
display: inline-block;
width: 200px;
height: 200px;
margin: 10px;
}
.responsive-container
{
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.responsive-container iframe
{
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
.clear
{
clear: both;
}
footer
{
color: #7d7d7d;
text-align: center;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
margin: 30px 15px 0px 15px;
padding: 15px 0px 15px 0px;
}
footer > br
{
display: none;
}
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px)
{
aside
{
width: 25%;
}
section
{
width: 75%;
}
.quote-right
{
padding: 20px 25px 20px 0px;
}
.track-title
{
display: none;
}
.track-title-link
{
display: inline-block;
}
.play
{
display: none;
}
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 1080px)
{
aside
{
width: 30%;
}
section
{
width: 70%;
}
.quote-left
{
padding: 20px 20px 20px 15px;
}
.quote-right
{
display: none;
}
.quote-right-768
{
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px)
{
aside
{
width: 35%;
}
section
{
width: 65%;
}
.quote-left
{
padding: 20px 20px 20px 15px;
}
.quote-right
{
display: none;
}
.quote-right-768
{
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
/* Custom, BlackBerry Playbook */
#media only screen and (max-width : 600px)
{
aside
{
width: 100%;
}
section
{
width: 100%;
}
.quote
{
flex-direction: column;
padding-right: 20px;
}
blockquote
{
margin-right: 20px;
}
.quote-left
{
width: 100%;
padding: 20px;
}
.quote-right
{
display: inline-block;
padding: 5px 0px 10px 20px;
}
.quote-right-768
{
display: none;
}
.track-title
{
display: block;
}
.track-title-link
{
display: none;
}
.play
{
display: inline-block;
}
footer > br
{
display: inline-block;
}
}
/* Custom, iPhone 6 */
#media only screen and (max-width : 375px)
{
aside
{
width: 100%;
}
section
{
width: 100%;
}
.quote
{
flex-direction: column;
padding-right: 20px;
}
blockquote
{
margin-right: 20px;
}
.quote-left
{
width: 100%;
padding: 20px;
}
.quote-right
{
display: inline-block;
padding: 5px 0px 10px 20px;
}
.quote-right-768
{
display: none;
}
.track-title
{
display: block;
}
.play
{
display: inline-block;
}
footer > br
{
display: inline-block;
}
}
/* Custom, Blackberry Z30 */
#media only screen and (max-width : 360px)
{
aside
{
width: 100%;
}
section
{
width: 100%;
}
.quote
{
flex-direction: column;
padding-right: 20px;
}
blockquote
{
margin-right: 20px;
}
.quote-left
{
width: 100%;
padding: 20px;
}
.quote-right
{
display: inline-block;
padding: 5px 0px 20px 20px;
}
.quote-right-768
{
display: none;
}
.track-title
{
display: none;
}
.track-title-link
{
display: inline-block;
}
.play
{
display: none;
}
footer > br
{
display: inline-block;
}
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px)
{
aside
{
width: 100%;
}
section
{
width: 100%;
}
.quote
{
flex-direction: column;
padding-right: 20px;
}
blockquote
{
margin-right: 20px;
}
.quote-left
{
width: 100%;
padding: 20px;
}
.quote-right
{
display: inline-block;
padding: 5px 0px 15px 20px;
}
.quote-right-768
{
display: none;
}
.gallery
{
margin: 15px 0px 15px 0px;
}
footer > br
{
display: inline-block;
}
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<!-- RWD -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Custom stylesheet-->
<link href="style.css" rel="stylesheet">
<!-- Include Open Sans Font -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic&subset=latin,greek-ext,greek,vietnamese,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<!-- Include Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<aside>
<div class="profile">
<img class="img-circle" src="img/p_pic.png">
<div class="profile-info">
<div class="name">Jakub Jas</div>
Kraków, Polska
</div>
<div class="social-icons">
<i class="fa fa-facebook-official fa-2x"></i>
<i class="fa fa-lastfm fa-2x"></i>
<i class="fa fa-soundcloud fa-2x"></i>
</div>
</div>
<nav>
<header>Menu</header>
<div class="nav-content">
<ul>
<li><i class="fa fa-home"></i>Strona główna</li>
<li><i class="fa fa-music"></i>Muzyka</li>
<li><i class="fa fa-camera-retro"></i>Fotografia</li>
<li><i class="fa fa-desktop"></i>Grafika</li>
<li><i class="fa fa-envelope"></i>Kontakt</li>
</ul>
</div>
</nav>
</aside>
<section>
<div class="quote">
<div class="quote-left">
<blockquote>
L'air pur me Manque, le bruit des gens autour m'angoisse<br />
La ville s'immisce peu à peu dans ce corps maigre qu'est le mien<br />
Obstruant ainsi mes rêveries joyeuses d'un idéal qui s'éteint.
</blockquote>
</div>
<div class="quote-right">
<div class="author-details">
<div class="track-title">L'échappée</div>
<div class="track-title-link">L'échappée</div>
<div class="artist-album">
<div class="play"><i class="fa fa-play-circle-o fa-3x"></i></div>
<span>Les Discrets</span><br />
Septembre et ses dernières Pensées
</div>
</div>
</div>
<div class="quote-right-768">
<div class="author-details">
<div class="track-title-link">L'échappée</div>
<div class="artist-album">
<span>Les Discrets</span><br />
Septembre et ses dernières Pensées
</div>
</div>
</div>
</div>
<div class="content">
<header>Kontakt</header>
<article>
<p>W przyszłości pojawi się tutaj formularz kontaktowy. Póki co zachęcam do bezpośredniego kontaktu poprzez mój adres e-mail.
</p>
</article>
</div>
</section>
<div class="clear"></div>
<footer>
Copyright © 2015 Jakub Jas. <br />Wszystkie prawa zastrzeżone.
</footer>
</div>
</body>
</html>