I've looked around for similar issues here and in other places, but I can't seem to find a definitive answer. When I add enough text to a page that it would get to the footer, the footer simply overlaps the text. Same thing if I reduce the size of the browser window to force the footer and the container that holds the content to meet. Occasionally, this also manifests in the "container" aka the lighter gray part, shrinking for some reason, even though it should always be taking up 100% of the height.
This is the sort of stuff that keeps me up all night, so I'm not thinking very clearly. I'm sure it's something stupid and easy to fix, but I'm not a professional designer and am certainly missing what the issue is.
Below is my code, and a JSFiddle that I made with all the relevant parts of a page.
html, body {
margin: 0;
padding: 0;
}
html, body {
background: #252525;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
text-align: center;
}
body {
background: #363636;
border-left: 1px solid #111;
border-right: 1px solid #111;
margin: 0 22.5%;
}
#container {
color: white;
margin-bottom: 2em;
min-height: 100%;
overflow: auto;
padding: 0 2em;
text-align: justify;
}
#footer {
bottom: 0;
color: #707070;
height: 2em;
left: 0;
position: fixed;
font-size: small;
width:100%;
}
<body>
<div id="container">
<h1>A webpage</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium augue quis augue ornare tempor. Donec eu purus vitae nisi eleifend euismod. Nullam sem nunc, bibendum tempor iaculis eu, consequat in sem. Phasellus nec molestie orci. Fusce varius nisi est, non aliquet dolor porttitor non. Aliquam eu ante nec massa pulvinar posuere. Praesent consectetur porttitor ipsum, eget viverra urna ultricies et.
<p>Quisque vehicula neque a enim dignissim, et vestibulum orci viverra. Pellentesque aliquam feugiat interdum. Ut molestie vitae lacus in eleifend. Sed scelerisque urna ut elit venenatis suscipit. Nullam nec urna vel enim mattis interdum ut consequat libero. Proin in imperdiet orci. Vivamus felis lacus, dictum ac eros eu, malesuada pretium nisi. Cras suscipit nunc magna, a egestas neque facilisis sed.</div>
<div id="footer">This is a footer.</div>
</body>
Here is a JSFiddle example.
Change this:
#footer {
bottom: 0;
color: #707070;
height: 2em;
left: 0;
position: relative; //changed to relative from fixed also works if position is not there
font-size: small;
width:100%;
}
Demo
Anyone stumbling upon this in 2017 should know that a great option was invented to alleviate layout headaches such as this, flexbox.
Essentially, all you have to do is set <body> to:
body {
display: flex;
flex-direction: column;
align-items: center;
}
Then apply flex:1 1 auto to the "main" or middle section, in this case #container, which will make it expand vertically to fill available space, assuring the footer will stick to the bottom:
#container {
flex: 1 1 auto; /*grow vertically*/
}
We added align-items:center in the flex parent to handle cross-axis centering (in our case, horizontal).
Here is an example snippet of the above:
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #252525;
border-left: 1px solid #111;
border-right: 1px solid #111;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
#container {
color: white;
background: #363636;
padding: 2em;
background: #363636;
flex: 1 1 auto;
/*grow vertically*/
width: 55%;
text-align: center;
}
#footer {
color: #707070;
height: 2em;
font-size: small;
}
<body>
<div id="container">
<h1>A webpage</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium augue quis augue ornare tempor. Donec eu purus vitae nisi eleifend euismod. Nullam sem nunc, bibendum tempor iaculis eu, consequat in sem. Phasellus nec molestie orci. Fusce varius
nisi est, non aliquet dolor porttitor non. Aliquam eu ante nec massa pulvinar posuere. Praesent consectetur porttitor ipsum, eget viverra urna ultricies et.</p>
<p>Quisque vehicula neque a enim dignissim, et vestibulum orci viverra. Pellentesque aliquam feugiat interdum. Ut molestie vitae lacus in eleifend. Sed scelerisque urna ut elit venenatis suscipit. Nullam nec urna vel enim mattis interdum ut consequat
libero. Proin in imperdiet orci. Vivamus felis lacus, dictum ac eros eu, malesuada pretium nisi. Cras suscipit nunc magna, a egestas neque facilisis sed.</p>
</div>
<div id="footer">This is a footer.</div>
</body>
See DEMO
I have made some CSS changes. Have a look. I hope it will help you.
Updated CSS
#footer {
bottom: 0;
color: #707070;
height: 2em;
left: 0;
position: fixed; /* OldProperty */
position: static;/* Updated Property */
font-size: small;
width:100%;
}
I believe you were looking for a sticky footer that stays while not being fixed to the bottom of the page (so no overlap).
Solution
The solution comes from Chris Bracco and I am going to detail what you need to reproduce the effect:
HTML
Your HTML be like:
<html>
<body class="body-for-sticky">
<...> your content </...>
<div class="footer sticky-footer"> your footer </div>
</body>
</html>
CSS
You will need to add in your css something like:
html {
height: 100%; /* for the page to take full window height */
box-sizing: border-box; /* to have the footer displayed at the bottom of the page without scrolling */
}
*,
*:before,
*:after {
box-sizing: inherit; /* enable the "border-box effect" everywhere */
}
.body-for-sticky {
position: relative; /* for the footer to move with the page size */
min-height: 100%; /* for the footer to be at the bottom */
padding-bottom: 6rem; /* Space available between last element and bottom border of the page */
}
.sticky-footer {
position: absolute; /* for it to disappear under last body element */
bottom: 0; /* so the footer can stick to the bottom*/
}
Example
That's like the basic you need to create the sticky footer. Here is an example (with some more CSS for better rendering).
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.body-for-sticky {
position: relative;
min-height: 100%;
padding-bottom: 6rem;
}
.sticky-footer {
position: absolute;
bottom: 0;
}
/* for the rendering */
body {
margin: 0;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.footer {
right: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
.demo {
margin: 0 auto;
padding-top: 64px;
max-width: 640px;
width: 94%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sticky footer</title>
<style> </style>
</head>
<body class="body-for-sticky">
<div class="demo">
<h1 style="margin-top: 0">CSS “Always on the bottom” Footer</h1>
<p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>
<p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>
<p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>
<p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>
<p> Source <a href="https://chrisbracco.com/css-sticky-footer-effect" />Chris Bracco</a>.</p>
</div>
<div class="footer sticky-footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
</body>
</html>
Expand the snippet and watch the result full size to see how it works.
First write this code
footer {
background-color: #000;
color: #FFFFFF;
font-size:.8em;
margin-top:25px;
padding-top: 15px;
padding-bottom: 10px;
position:fixed;
left:0;
bottom:0;
width:100%;
}
and now set media queries
#media only screen and (max-width: 767px){
footer {
background-color: #000;
color: #FFFFFF;
font-size:.8em;
margin-top:25px;
padding-top: 15px;
padding-bottom: 10px;
position:static;
left:0;
bottom:0;
width:100%;
}
}
hope this will help you :)
#footer {
z-index: 1;
position: absolute;
right: 0;
bottom: 0;
left: -25%;
padding: 1rem;
background-color: black;
text-align: center;
height: 3em;
left: 0;
font-size: small;
width:100%;
}
Related
This question already has answers here:
Why is a flex item limited to parent size?
(1 answer)
Display a div width 100% with margins
(6 answers)
Closed 4 months ago.
I am trying to make a design where there are two columns in a box. One column contains an image and takes up 1/4 of the width under normal circumstances, and 1/2 of the width when hovered over. The other column contains a decent amount of text and takes up whatever space is left.
I am running into an issue where the CSS that tells the first column's width to be either 50% or 25% is not being respected. The first column is less than 1/8 of the width when it is supposed to be 1/4 and less than 1/4 when it is supposed to be 1/2. I have managed to create a minimal example:
html,
body {
height: 100%;
width: 100%;
min-width: 100%;
}
.container {
height: 50%;
width: 100%;
display: flex;
flex-direction: row;
border-radius: 0.25rem;
margin: 1rem;
overflow: hidden;
border-width: 1px;
border-style: solid;
}
.left {
margin: auto;
width: 25%;
height: 100%;
border-width: 1px;
border-style: solid;
transition-property: width;
transition-duration: 300ms;
padding: 1rem;
}
.left:hover {
width: 50%;
}
.right {
width: auto;
margin: auto;
font-size: 1.5rem;
line-height: 2rem;
padding: 1rem 4rem;
border-width: 1px;
border-style: solid;
}
<div class="container">
<div class="left">
Placeholder
</div>
<p class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula purus, lobortis luctus malesuada vitae, egestas quis lorem. Mauris ultrices mauris et enim dictum fermentum. Nam nibh nulla, posuere ut egestas a, fringilla ac augue. Vivamus sed
eros eget purus maximus iaculis. </p>
</div>
JSFiddle link
I have looked up previous questions like this and they all seem to state that somehow the parent div's dimensions are not defined. However, in this case they are defined! html and body have defined dimensions, and so does the container div.
Why isn't the width doing what I think it should do in this case?
Flex items (i.e. the children of a flex container) are allowed to grow and shrink by default. To avoid that, you can add flex-shrink: 0; and flex-grow: 0; to their CSS:
html,
body {
height: 100%;
width: 100%;
min-width: 100%;
}
.container {
height: 50%;
width: 100%;
display: flex;
flex-direction: row;
border-radius: 0.25rem;
margin: 1rem;
overflow: hidden;
border-width: 1px;
border-style: solid;
}
.left {
margin: auto;
width: 25%;
height: 100%;
border-width: 1px;
border-style: solid;
transition-property: width;
transition-duration: 300ms;
padding: 1rem;
flex-shrink: 0;
flex-grow: 0;
}
.left:hover {
width: 50%;
flex-shrink: 0;
flex-grow: 0;
}
.right {
width: auto;
margin: auto;
font-size: 1.5rem;
line-height: 2rem;
padding: 1rem 4rem;
border-width: 1px;
border-style: solid;
}
<div class="container">
<div class="left">
Placeholder
</div>
<p class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula purus, lobortis luctus malesuada vitae, egestas quis lorem. Mauris ultrices mauris et enim dictum fermentum. Nam nibh nulla, posuere ut egestas a, fringilla ac augue. Vivamus sed
eros eget purus maximus iaculis. </p>
</div>
using flex can distort widths
.left {
width: 25%;
display: inline-block;
border: 1px solid red;
}
.right {
float: right;
width: 50%;
}
.left:hover {
width: calc(50% - 2px);
}
<div class="container">
<div class="left">
Placeholder
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula purus, lobortis luctus malesuada vitae, egestas quis lorem. Mauris ultrices mauris et enim dictum fermentum. Nam nibh nulla, posuere ut egestas a, fringilla ac augue. Vivamus sed
eros eget purus maximus iaculis. </div>
</div>
I'm trying to create a website where the first part is a video, on top of it is a navigation bar and description sentence. The second part is a div with a picture and a lorem ipsum paragraph. But the two-part is mushed together. Do you know why?
The first part is the video-container div. It contains a video, a navigation bar and some introductory words
The second part is the intro div which has an image and a paragraph side by side
<style>
html,
body {
border: 1px solid blue;
min-height:100%;
padding:0;
margin:0;}
* {
font-family: 'Playfair Display', serif;
margin: 0;
padding: 0;
border: 0;
outline: 0;
margin-top: -5px;
}
.nav {
border: 1px solid red;
margin-right: 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav li {
list-style-type: none;
}
.nav li a {
text-decoration: none;
font-size: 23px;
font-weight: 600;
color: #C71585;
letter-spacing: 0.03em;
}
.nav img {
width: 150px;
}
video {
width: 100%;
position: absolute;
object-fit: cover;
background-size: cover;
top: 0px;
left: 0px;
min-width: 100%;
min-height: 100%;
z-index: -1;
box-sizing: content-box;
}
.video-container {
position: relative;
height: 100%;
border: 1px solid yellow;
}
.content {
border: 1px solid yellow;
position: absolute;
left: 50px;
top: 150px;
margin: 10px;
padding: 5px 20px;
font-size: 20px;
overflow: none;
}
.content h1 {
font-size: 100px;
color: #C71585;
}
#myBtn {
margin-left: 20px;
margin-top: 40px;
border: 1px solid #C71585;
font-size: 26px;
font-weight: 800;
color: #e827a0;
padding: 15px 60px;
background-color: transparent;
transition: 0.2s ease-in;
}
#myBtn:hover {
background-color: rgba(199, 21, 133);
color: white;
}
.intro {
overflow: none;
margin-top: 30px;
display: flex;
justify-content: space-around;
align-items: center;
}
.intro img {
width: 500px;
}
.intro-text {
width: 30%;
}
</style>
</head>
<body>
<div class="video-container">
<video autoplay muted loop id="video">
<source src="video.mp4" type="video/mp4">
</video>
<div class="nav">
<img src="logo.png" alt="logo">
<li>About me</li>
<li>My Portfolio</li>
<li>My resume</li>
<li>Contact me</li>
</div>
<div class="content">
<h1>Avid learner and</h1>
<h1>Constant striver</h1>
<button id="myBtn">Who am I</button>
</div>
</div>
<div class='intro'>
<img src="01.jpeg" alt="">
<div class="intro-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque ex a felis laoreet, ut bibendum sem eleifend. Quisque egestas sem sed velit molestie tincidunt. Phasellus at pellentesque odio. Phasellus sem leo, hendrerit et massa vehicula, iaculis cursus erat. Vestibulum et viverra nisi, sit amet condimentum sem. Duis gravida faucibus nisl nec pharetra. Curabitur convallis risus enim, nec semper lorem cursus varius. Quisque feugiat vitae dui non ultricies. Integer ipsum quam, dictum et quam nec, imperdiet euismod nulla. Nam bibendum sagittis orci, eget tincidunt risus luctus nec. Quisque lacus urna, tincidunt vel lobortis in, suscipit sit amet nunc. Fusce ultrices erat a nunc dignissim hendrerit. Maecenas sed pharetra quam, vitae suscipit nunc. Aenean molestie dui aliquet augue eleifend, quis congue ligula laoreet. Ut quis est pellentesque, fringilla odio ac, tincidunt nibh.
</div>
</div>
</body>
You can make use of css flex property, in your case please add
.flex-container {
display: flex;
flex-wrap: wrap;
}
under your style tags and assign this class to intro class div as <div class='intro flex-container'>, will this worked for you?
you can easily wrap the .video-container and .intro divs with a div tag and give it style display flex and make sure you add flex wrap also.
Then just give your video and intro containers width 100%
I'm attempting to make a simple HTML/CSS site from scratch for the first time and I'm trying to adjust it for cell phones and tablets.
But the main content is displaying beside the navigation bars when displayed on a phone set to the horizontal position. I don't know how to clear the float in a media query.
Also, when I delete the tablet media query from my CSS... it affects the cell phone media query. Why is that?
body {
background-color: #EBF0DF;
color: #000000;
margin-bottom: 0;
font-family: Verdana, Arial, sans-serif;
}
h1 {
font-family: Papyrus, serif;
font-size: 40px;
background-color: #A8BF78;
color: #000000;
text-align: center;
background-image: url(../site_assets/logo.png);
background-repeat: no-repeat;
background-position: 8%;
background-size: 145px;
margin-left: 110px;
margin-right: 110px;
height: 150px;
line-height: 400%;
margin-bottom: 15px;
border-radius: 30px;
margin-top: 10px;
}
h2 {
font-family: Georgia, serif;
}
header, nav, main, footer {
display: block;
}
nav {
text-align: center;
font-size: 25px;
margin-bottom: 25px;
margin-top: 25px;
}
nav a {
text-decoration: none;
border: 4px outset #CEDAB3;
border-radius: 5px;
color: #84A540;
font-family: Verdana;
padding: 5px;
}
nav a:link {
color: #84A540;
}
nav a:visited {
color: #A8BF78;
}
nav a:hover {
color: #CEDBB3;
}
footer {
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
font-family: Verdana, sans-serif;
font-style: italic;
font-size: 13px;
background-color: #CEDBB3;
}
#portlandimage {
margin-top: 40px;
margin-left: 10px;
}
#wrapper {
width: 90%;
min-width: 1200px;
max-width: 1480px;
margin-right: auto;
margin-left: auto;
}
#media only screen and (max-width: 1024px) {
body {
margin: 0;
padding: 0;
background-image: none;
}
h1 {
margin: 0;
}
nav {
float: none;
width: auto;
padding: 0.5em;
}
nav a {
padding: 1em;
}
main {
padding: 1em;
margin-left: 0;
font-size: 90%;
}
footer {
margin: 0;
}
#wrapper {
width: auto;
min-width: 0;
margin: 0;
box-shadow: none;
}
}
#media only all and (max-width: 768px) {
h1 {
height: 100%;
font-size: 1.5em;
background-image: none;
border-radius: 0;
margin: 0;
text-align: center;
}
nav {
padding: 0;
}
nav a {
float: left;
padding: 0.5em;
width: 75%;
min-width: 6em;
margin-left: 0.8em;
margin-right: 0.5em;
}
main {
padding-top: 0.1em;
padding-right: 0.6em;
padding-bottom: 0.1em;
padding-left: 0.4em;
}
footer {
padding-top: 1em;
padding-bottom: 1em;
font-style: normal;
}
#portlandimage {
display: none;
}
#wrapper {
margin-right: auto;
margin-left: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portland Historical Tours</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="styles/historical_tours_styles.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="wrapper">
<header>
<h1>Portland Historical Tours</h1>
</header>
<nav>
Home
Tours
About Us
Contact
</nav>
<main>
<img alt="Portland, Oregon" height="460" id="portlandimage"
src="site_assets/portland_historical_tours.jpg" style="float: right;" width="620">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit
purus risus, mattis efficitur augue suscipit ut. Etiam lobortis auctor
felis, a dignissim erat iaculis eu. Praesent et elit eu lectus lacinia
posuere id in nisl. Aenean faucibus, massa eget eleifend rutrum, lectus
diam ullamcorper mauris, vitae semper ligula dui et mauris. Nullam
vulputate sem tincidunt elementum molestie. Fusce dignissim tristique
rutrum. Proin gravida mi quam. Nam non eros a mauris aliquam blandit sit
amet sed magna. Fusce auctor leo diam, eu pellentesque orci auctor id.
Mauris tempor nulla ligula, sed rutrum tortor dictum sed. Morbi mollis
cursus ipsum eget mattis.</p>
<h2>Dolor Sit Amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit
purus risus, mattis efficitur augue suscipit ut. Etiam lobortis auctor
felis, a dignissim erat iaculis eu. Praesent et elit eu lectus lacinia
posuere id in nisl. Aenean faucibus, massa eget eleifend rutrum, lectus
diam ullamcorper mauris, vitae semper ligula dui et mauris. Nullam
vulputate sem tincidunt elementum molestie. Fusce dignissim tristique
rutrum. Proin gravida mi quam. Nam non eros a mauris aliquam blandit sit
amet sed magna. Fusce auctor leo diam, eu pellentesque orci auctor id.
Mauris tempor nulla ligula, sed rutrum tortor dictum sed. Morbi mollis
cursus ipsum eget mattis.</p>
</main><br>
<br>
<footer>
Copyright © 2017 Portland Historical Tours<br>
sales#portlandhistoricaltours.com
</footer>
</body>
</html>
The issue is in media query at screen resolution of 1024px, the same way you used media query to hide display for image div in small screen resolution, using same way you can make such many changes in your media query. Use clear:both to align text properly after menu in tag main.
clear - The clear property specifies on which sides of an element
floating elements are not allowed to float.
#media only screen and (max-width: 1024px) {
body {margin: 0; padding: 0; background-image: none;}
h1 {margin: 0;}
nav {float: none; width: auto; padding: 0.5em;}
nav a {padding: 1em;}
main {padding: 1em; margin-left: 0; font-size: 90%; clear:both;}
footer {margin: 0;}
#wrapper {width: auto; min-width: 0; margin: 0; box-shadow: none;}
}
Check this jsFiddle.
I’m working on a template which requires some background images of elements (h2, h3, etc.) to extend beyond the (centered) page width to fill the browser window.
I know a way to do that. I’ve seen this solution explained by Craig Buckler here :
http://www.sitepoint.com/css-extend-full-width-bars/
You can see a fiddle here :
http://jsfiddle.net/Vinyl/V8ps3/
Basically, we add a large amount of padding then move the element back to its original location
I think it’s a good solution but do you know another solution to do that ?
html :
<div id="main">
<div>lorem ipsum</div>
<div id="content">content which extend beyond the (centered) page width to fill the browser window</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nunc erat, at ornare nisl sollicitudin eget. Vestibulum aliquam massa sit amet fringilla ullamcorper. Curabitur libero arcu, suscipit eu convallis eget, sodales id ante. Vestibulum gravida massa vitae risus molestie egestas. Nullam mi elit, tempus nec eleifend non, vestibulum ac magna. Integer tortor diam, dapibus eu faucibus nec, ornare in ipsum.</div>
</div>
css :
body {
margin:0;
overflow-x: hidden;
background-color: #333333;
}
#main {
width:250px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
}
#content {
background-color: #999999;
padding: 20px;
width: 100%;
margin: 0 auto;
margin-right: -3000px;
padding-right: 3000px;
margin-left: -3000px;
padding-left: 3000px;
}
DEMO ..
This is another solution.. maybe simpler, it uses :before for the elements (h2, h3, etc.)
CSS
#content {
padding: 20px;
width: 100%;
margin: 0 auto;
position: relative;
z-index: 1;
}
#content:before {
background: #999999;
content: "";
width: 1000%;
height: 100%;
position: absolute;
top: 0;
left: -500%;
z-index: -1;
}
Hope this will help you ..
I am seeing something strange in both firefox and chrome when I increase
the zoom level inside these browsers, although I see nothing wrong with
my CSS.
Here is the whole story:
I have a right-floated top-level div containing three right-floated right.
The three inner divs have all box-model measurements in pixels which add
up to the width of the enclosing container. Everything looks fine when
the browser size is 100%, but when I start making the browser smaller
with CTRL+scrollwheel or CTRL+minus the rightmost margin shrinks
down too fast and eventually becomes zero, forcing my rightmost
floated inner div to fall down below the other two!
I can't make sense out of this, almost seems like some integer division
is being performed incorrectly in the browser code, but alas firefox and
chrome both display the same result.
Here is the example (just zoom out with CTRL-minus to see what I mean):
Click Here to View What I Mean on Example Site
Just to narrow things down a bit, the tags of interest are the following:
div#mainContent
div#contentLeft
div#contentCenter
div#contentRight
I've searched stackoverflow for an answer and found the following
posts which seem related to my question but was not able to apply
them to the problem I am experiencing:
http://
stackoverflow.com/questions/6955313/div-moves-incorrectly-on-browser-resize
http://
stackoverflow.com/questions/18246882/divs-move-when-resizing-page
http://
stackoverflow.com/questions/17637231/moving-an-image-when-browser-resizes
http://
stackoverflow.com/questions/5316380/how-to-stop-divs-moving-when-the-browser-is-resized
I've duplicated the html and css code below for your convenience:
Here is the HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pinco</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<div class="logo">
<a href="http://pinco.com">
<img class="logo" src="images/PincoLogo5.png" alt="Pinco" />
</a>
</div>
<div class="titolo">
<h1>Benvenuti!</h1>
<h2>Siete arrivati al sito pinco.</h2>
</div>
<nav>
<ul class="menu">
<li>Menù Qui</li>
<li>Menù Quo</li>
<li>Menù Qua</li>
</ul>
</nav>
</header>
<div id="mainContent">
<div id="contentLeft">
<section>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor turpis est, nec varius est pharetra scelerisque. Sed eu pellentesque purus, at cursus nisi. In bibendum tristique nunc eu mattis. Nulla pretium tincidunt ipsum, non imperdiet metus tincidunt ac. In et lobortis elit, nec lobortis purus. Cras ac viverra risus. Proin dapibus tortor justo, a vulputate ipsum lacinia sed. In hac habitasse platea dictumst. Phasellus sit amet malesuada velit. Fusce diam neque, cursus id dui ac, blandit vehicula tortor.
Phasellus interdum ipsum eu leo condimentum, in dignissim erat tincidunt. Ut fermentum consectetur tellus, dignissim volutpat orci suscipit ac. Praesent scelerisque urna metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis pulvinar, sem a sodales eleifend, odio elit blandit risus, a dapibus ligula orci non augue. Nullam vitae cursus tortor, eget malesuada lectus. Nulla facilisi. Cras pharetra nisi sit amet orci dignissim, a eleifend odio hendrerit.
</p>
</article>
</section>
</div>
<div id="contentCenter">
<section>
<article>
<p>
Maecenas vitae purus at orci euismod pretium. Nam gravida gravida bibendum. Donec nec dolor vel magna consequat laoreet in a urna. Phasellus cursus ultrices lorem ut sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus purus felis, ornare quis ante vel, commodo scelerisque tortor. Integer vel facilisis mauris.
</p>
<img src="images/auto1.jpg" width="272" height="272" />
<p>
In urna purus, fringilla a urna a, ultrices convallis orci. Duis mattis sit amet leo sed luctus. Donec nec sem non nunc mattis semper quis vitae enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse dictum porta quam, vel lobortis enim bibendum et. Donec iaculis tortor id metus interdum, hendrerit tincidunt orci tempor. Sed dignissim cursus mattis.
</p>
</article>
</section>
</div>
<div id="contentRight">
<section>
<article>
<img src="images/auto2.jpg" width="272" height="272" />
<img src="images/auto3.jpg" width="272" height="272" />
<p>
Cras eu quam lobortis, sodales felis ultricies, rhoncus neque. Aenean nisi eros, blandit ac lacus sit amet, vulputate sodales mi. Nunc eget purus ultricies, aliquam quam sit amet, porttitor velit. In imperdiet justo in quam tristique, eget semper nisi pellentesque. Cras fringilla eros enim, in euismod nisl imperdiet ac.
Fusce tempor justo vitae faucibus luctus.
</p>
</article>
</section>
</div>
</div>
<footer>
<div class="footerText">
<p>
Copyright © Pinco
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br />Fusce ornare turpis orci, nec egestas leo feugiat ac.
<br />Morbi eget sem facilisis, laoreet erat ut, tristique odio. Proin sollicitudin quis nisi id consequat.
</p>
</div>
<div class="footerLogo">
<img class="footerLogo" src="images/auto4.jpg" width="80" height="80" />
</div>
</footer>
</div>
</body>
</html>
and here is the CSS:
/* CSS Document */
* { margin: 0; border: 0; padding: 0; }
body { background: #8B0000; /* darkred */; }
body { margin: 0; border: 0; padding: 0; }
div#wrapper { margin: 0 auto; width: 960px; height: 100%; background: #FFC0CB /* pink */; }
header { position: relative; background: #005b97; height: 140px; }
header div.logo { float: left; width: 360px; height: 140px; }
header div.logo img.logo { width: 360px; height: 140px; }
header div.titolo { float: left; padding: 12px 0 0 35px; color: black; }
header div.titolo h1 { font-size: 36px; font-weight: bold; }
header div.titolo h2 { font-size: 24px; font-style: italic; font-weight: bold; color: white;}
header nav { position: absolute; right: 0; bottom: 0; }
header ul.menu { background: black; }
header ul.menu li { display: inline-block; padding: 3px 15px; font-weight: bold; }
div#mainContent { float: left; width: 100%; /* width: 960px; *//* height: 860px; */ padding: 30px 0; text-align: justify; }
div#mainContent img { margin: 12px 0; }
div#contentLeft { height: 900px; float: left; margin-left: 12px; border: 1px solid black; padding: 15px; width: 272px; background: #ccc; }
div#contentCenter { height: 900px; float: left; margin-left: 12px; border: 1px solid transparent; padding: 15px; width: 272px; background: #E00; }
div#contentRight { height: 900px; float: left; margin-left: 12px; border: 1px solid black; padding: 15px; width: 272px; background: #ccc; }
footer { clear: both; padding: 12px; background: #306; color: white; height: 80px; font-style: italic; font-weight: bold; }
footer div.footerText { float: left; }
footer div.footerLogo { float: right; }
a { color: white; text-decoration: none; }
EDIT 1:
I've checked all measurements again and carefully plugged in numbers until they
satisfied the following equation for the three uniform columns in the main area
with uniform collapsed margin areas on all sides:
TEXT_AREA * 3 + MARGIN * 4 + BORDER * 6 = 960px (the width of the
wrapper)
TEXT_AREA = WIDTH + 2 * PADDING
BORDER = 1
subject to the margin and padding set to reasonable values of course,
and here are some numbers which seemed OK which solve these constraints:
TEXT_AREA = 290px
MARGIN = 15px
BORDER = 1px
PADDING = 15px
WIDTH = 268px
which translates to the following:
div#mainContent { float: left; width: 960px; padding: 15px 0; text-align: justify; }
div#contentLeft { height: 900px; float: left; margin: 0 0 0 15px; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }
div#contentCenter { height: 900px; float: left; margin: 0 0 0 15px; border: 1px solid transparent; padding: 15px; width: 268px; background: #E00; }
div#contentRight { height: 900px; float: left; margin: 0 15px 0 15px; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }
However even now that everything is uniform, I still get the problem that when I zoom
out the rightmost column falls down below the others. One solution is to do the following:
div#contentRight { height: 900px; float: left; margin: 0 0 /* 15px */ 0 15px; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }
so that now the right column has no right margin, but the visual result is the same.
Now, when I zoom out, the rightmost column does not fall down, but its right margin
is so small compared to the others, so really, there is still a small problem.
Edit 2:
OK, I've done some more searching and found an even better solution. The solution
consists in having the margins in between the div column elements the same and having
the left and right margin adjust automatically. In order to achieve this, I had to
do away with floats, and use "display: inline-block" which IMHO is much more suitable
than floats and was designed for the purpose at hand:
div#mainContent { padding: 15px 0; width: 960px; text-align: center; }
div#contentLeft { display: inline-block; vertical-align: top; height: 900px; margin: 0 0 0 0/*15px*/; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }
div#contentCenter { display: inline-block; vertical-align: top; height: 900px; margin: 0 0 0 15px; border: 1px solid transparent; padding: 15px; width: 268px; background: #E00; }
div#contentRight { display: inline-block; vertical-align: top; height: 900px; margin: 0 0/* 15px */ 0 15px; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; }
div#mainContent section { text-align: justify; }
Now, at a normal zoom level all left margins will be 15px plus the last element's right
margin which will also be 15px. On the other hand, if I zoom out, there is some pixel
rounding going on, but the rounding is applied more or less equally on both sides,
which is somewhat better. This works in Firefox.
Edit 3:
Alas, I've tried reducing the in-between margins a bit, which makes the problem
go away with Chrome, but one of the div elements still drops down in IE10.
div#mainContent { padding: 15px 0; text-align: center; }
div#contentLeft { display: inline-block; vertical-align: top; height: 900px; margin: 0 0 0 0/* 20px increased from 15px */; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; overflow: hidden; }
div#contentCenter { display: inline-block; vertical-align: top; height: 900px; margin: 0 0 0 10px/* reduced from 15px */; border: 1px solid transparent; padding: 15px; width: 268px; background: #E00; overflow: hidden; }
div#contentRight { display: inline-block; vertical-align: top; height: 900px; margin: 0 0/* 20px increased from 15px */ 0 10px/* reduced from 15px */; border: 1px solid black; padding: 15px; width: 268px; background: #ccc; overflow: hidden; }
div#mainContent section { text-align: justify; }
Edit 4:
I've come up with a solution which works in Firefox, Chrome, and IE10.
Basically, I've created three div wrappers around the three columns
and taken measurements again ensuring all measurements are symmetric.
Here is the source code:
HTML File:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pinco</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<div class="logo">
<a href="http://pinco.com">
<img class="logo" src="images/PincoLogo5.png" alt="Pinco" />
</a>
</div>
<div class="titolo">
<h1>Benvenuti!</h1>
<h2>Siete arrivati al sito pinco.</h2>
</div>
<nav>
<ul class="menu">
<li>Menù Qui</li>
<li>Menù Quo</li>
<li>Menù Qua</li>
</ul>
</nav>
</header>
<div id="mainContent">
<div id="wrapperLeft">
<div id="contentLeft">
<section>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor turpis est, nec varius est pharetra scelerisque. Sed eu pellentesque purus, at cursus nisi. In bibendum tristique nunc eu mattis. Nulla pretium tincidunt ipsum, non imperdiet metus tincidunt ac. In et lobortis elit, nec lobortis purus. Cras ac viverra risus. Proin dapibus tortor justo, a vulputate ipsum lacinia sed. In hac habitasse platea dictumst. Phasellus sit amet malesuada velit. Fusce diam neque, cursus id dui ac, blandit vehicula tortor.
Phasellus interdum ipsum eu leo condimentum, in dignissim erat tincidunt. Ut fermentum consectetur tellus, dignissim volutpat orci suscipit ac. Praesent scelerisque urna metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis pulvinar, sem a sodales eleifend, odio elit blandit risus, a dapibus ligula orci non augue. Nullam vitae cursus tortor, eget malesuada lectus. Nulla facilisi. Cras pharetra nisi sit amet orci dignissim, a eleifend odio hendrerit.
</p>
</article>
</section>
</div>
</div>
<div id="wrapperCenter">
<div id="contentCenter">
<section>
<article>
<p>
Maecenas vitae purus at orci euismod pretium. Nam gravida gravida bibendum. Donec nec dolor vel magna consequat laoreet in a urna. Phasellus cursus ultrices lorem ut sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus purus felis, ornare quis ante vel, commodo scelerisque tortor. Integer vel facilisis mauris.
</p>
<img src="images/auto1.jpg" alt="Auto 1" width="268" height="268" />
<p>
In urna purus, fringilla a urna a, ultrices convallis orci. Duis mattis sit amet leo sed luctus. Donec nec sem non nunc mattis semper quis vitae enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
</article>
</section>
</div>
</div>
<div id="wrapperRight">
<div id="contentRight">
<section>
<article>
<img src="images/auto2.jpg" alt="Auto 2" width="268" height="268" style="margin-top: 0" />
<img src="images/auto3.jpg" alt="Auto 3" width="268" height="268" style="margin-top: 0" />
<p>
Cras eu quam lobortis, sodales felis ultricies, rhoncus neque. Aenean nisi eros, blandit ac lacus sit amet, vulputate sodales mi. Nunc eget purus ultricies, aliquam quam sit amet, porttitor velit. In imperdiet justo in quam tristique, eget semper nisi pellentesque. Cras fringilla eros enim, in euismod nisl imperdiet ac.
Fusce tempor justo vitae faucibus luctus.
</p>
</article>
</section>
</div>
</div>
</div>
<footer>
<img class="footerLogo" src="images/auto4.jpg" alt="Auto 4" width="80" height="80" />
<p class="footerText">
Copyright © Pinco Inc.
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br />Fusce ornare turpis orci, nec egestas leo feugiat ac.
<br />Morbi eget sem facilisis, laoreet erat ut, tristique odio. Proin sollicitudin quis nisi id consequat.
</p>
</footer>
</div>
</body>
</html>
CSS File:
/* CSS Document */
*, body, article, secton, p { margin: 0; border: 0; padding: 0; }
body { background: #8B0000; /* darkred */; }
body { margin: 0; border: 0; padding: 0; }
div#wrapper { margin: 0 auto; width: 960px; height: 100%; background: #FFC0CB /* pink */; }
header { position: relative; background: #005b97; height: 140px; }
header div.logo { float: left; width: 360px; height: 140px; }
header div.logo img.logo { width: 360px; height: 140px; }
header div.titolo { float: left; padding: 12px 0 0 35px; color: black; }
header div.titolo h1 { font-size: 36px; font-weight: bold; }
header div.titolo h2 { font-size: 24px; font-style: italic; font-weight: bold; color: white;}
header nav { position: absolute; right: 0; bottom: 0; }
header ul.menu { background: black; }
header ul.menu li { display: inline-block; padding: 3px 15px; font-weight: bold; }
div#mainContent { float: left; padding: 15px 0; height: 900px; }
#wrapperLeft { float: left; margin-left: 15px; width: 305px; }
#wrapperCenter { float: left; margin: 0 15px 0 15px; width: 290px; }
#wrapperRight { float: left; margin-right: 15px; width: 305px; }
div#contentLeft { border: 1px solid black; padding: 15px; width: 273px; height: 868px; background: #ccc; overflow: hidden; }
div#contentCenter { border: 1px solid transparent; padding: 15px; width: 258px; height: 868px; background: #E00; overflow: hidden; }
div#contentRight { border: 1px solid black; padding: 15px; width: 273px; height: 868px; background: #ccc; overflow: hidden; }
div#mainContent section { text-align: justify; }
div#mainContent img { margin: 12px 0; }
footer { clear: both; padding: 12px; background: #306; color: white; height: 80px; font-size: 12px; font-style: italic; font-weight: bold; overflow: hidden; }
footer img.footerLogo { float: right; }
a { color: white; text-decoration: none; }
This is probably caused by sub-pixel rounding.
As you zoom, your browser may calculate pixel values with fractions of pixels. As a result of rounding these values up or down, pixel-perfect layouts can break. (Different browsers handle this in different ways.)
I had decent luck converting your pixel values to percentage values.
Here are the values that worked for me:
div#contentLeft,
div#contentCenter,
div#contentRight {
margin-left: 1.1%;
padding: 1.56%;
width: 28.3%;
}
Edit:
Here's another method, which essentially centers the three boxes in div#mainContent rather than spacing them so tightly with margins. It allows them a little more room to flex when zoomed.
I removed the margin-left from div#contentLeft and added the following CSS to center the three boxes:
div#wrapper {
overflow:hidden; /* ADDED THIS TO AVOID HORIZONTAL SCROLL */
}
div#mainContent {
position: relative; /* ADDED THIS */
left: 50%; /* ADDED THIS */
float: left;
padding: 30px 0px;
text-align: justify;
}
div#contentLeft {
position: relative; /* ADDED THIS */
left: -50%; /* ADDED THIS */
background: none repeat scroll 0% 0% #CCCCCC;
border: 1px solid black;
float: left;
height: 900px;
padding: 15px;
width: 272px;
/* margin-left:12px; REMOVED THIS */
}
div#contentCenter {
position: relative; /* ADDED THIS */
left: -50%; /* ADDED THIS */
background: none repeat scroll 0% 0% #EE0000;
border: 1px solid transparent;
float: left;
height: 900px;
margin-left: 12px;
padding: 15px;
width: 272px;
}
div#contentRight {
position: relative; /* ADDED THIS */
left: -50%; /* ADDED THIS */
background: none repeat scroll 0% 0% #CCCCCC;
border: 1px solid black;
float: left;
height: 900px;
margin-left: 12px;
padding: 15px;
width: 272px;
}
The boxes remain floated on one row even when Firefox is zoomed all the way out.