Reputation: 31
I've looked everywhere for a solution to this and can't believe the answer has eluded me so far. My appearance here is a last resort. Hope you don't mind me picking your brains.
In a website I am building I am trying to position a graphic at the top right of the screen. Then when the window is narrowed to 760px or less, I want it to move to the bottom. No matter what I do the thing just will not move to the bottom. It stays at the top. Here is some very simple code, and it doesn't work here either:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css.css" id="theme_color">
</head>
<body>
<div class="mydiv">HELLO!</div>
</body>
</html>
and the CSS:
@charset "utf-8";
/* CSS Document */
.mydiv {
position:fixed;
top:0;
right:0;
}
@media only screen and (max-width: 760px) {
.mydiv {
bottom:0;
}
}
That's all the code there is. You cab see that the word 'hello' appears top right. But when you make the browser window narrow, instead of moving to the bottom as I want, it stays at the top.
BUT... if alter the CSS, so that the div starts at the bottom (wide screen) and moves to the top on narrowing, it works as it should:
.mydiv {
position:fixed;
bottom:0;
right:0;
}
@media only screen and (max-width: 760px) {
.mydiv {
top:0;
}
}
Totally stumped. Ideas? Tried Chrome, FF and IE, all latest versions. Windows 7.
Thanks.
Mark
Upvotes: 3
Views: 4888
Reputation: 46825
@Danko posted the fix, you need to set top: auto
(the default value) to cancel out the effect of top: 0
.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/top
If you want to get into the guts of how the top
and bottom
values are computer,
see the CSS specification:
http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height
What your original code was doing is more clearly seen if you add a border to the div
.
By setting bottom: 0
, you have extended the height on the block.
.mydiv {
position:fixed;
border: 1px dotted blue;
top:0;
right:0;
}
@media only screen and (max-width: 760px) {
.mydiv {
bottom: 0;
}
}
<div class="mydiv">HELLO!</div>
Upvotes: 1
Reputation: 2874
Try this:
@media only screen and (max-width: 760px) {
.mydiv {
top:0;
bottom:auto;
}
}
Upvotes: 1
Reputation: 38262
That's because top
has more precedence that bottom
so the value of bottom is being ignored:
When both top and bottom are specified, as long as height is unspecified, auto or 100%, both top and bottom distances will be respected. Otherwise, if height is constrained in any way, the top property takes precedence and the bottom property is ignored.
So you need to set the top
to auto
, try this:
@media only screen and (max-width: 760px) {
.mydiv {
bottom:0;
top:auto;
}
}
Check this Demo http://jsfiddle.net/brsrmq4v/
Upvotes: 4