There are two div tags absolutely positioned.
The point is to prevent the first one to go over the one on the right on window resize to less than total width.
p.s. : This only occurs in firefox.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<style>
body{
direction: rtl;
}
#sidebar{
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 300px;
min-height: 1000px;
background-color: #66ccff;
}
#content{
position: absolute;
top: 0;
right: 300px;
bottom: 0;
left: 0;
min-width: 1100px;
background-color: #008844;
}
</style>
</head>
<body>
<div id="sidebar"></div>
<div id="content">
</div>
</body>
</html>
Remove left: 0; from #content
#content {
position: absolute;
top: 0;
right: 300px;
bottom: 0;
/*left: 0;*/
min-width: 1100px;
background-color: #008844;
}
JSFiddle
Related
body {
margin: 0;
}
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="content"></div>
</body>
</html>
```
positon: fixed does not cling to the top when applied.
I don't think there are any elements, so I think I should stick up completely, why not?
https://jsfiddle.net/9gqcxLn0/
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
top: 0;
}
you should use top:0
I don't see an issue other than you never told it where it was supposed to fix to. You likely wanted a top: 0 in the style, but it should remain fixed from where it was located without it, I believe.
html, body {
margin: 0;
padding: 0;
}
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
top: 0;
}
main {
height: 200vh;
}
<main>
abcdefghijk
<div class="content"></div>
12345678901234567890
</main>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>title</title>
<style>
#div1 {
position: absolute;
top: 0px;
left: 0px;
min-width: 100%;
width: auto;
height: 100%;
background: blue;
}
#div2 {
position: absolute;
top: 30%;
left: 0px;
width: 6000px;
height: 300px;
background: black;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
For example in the html page above
Starting view
When scrolling to the right
I thought setting the div1 width to auto would match the div2 width but it does not work. Am I missing something? Do I need to auto update the width with javascript or can it be done with CSS only?
I want it cover the entire page even if the page gets resized.
Set position: relative on #div2, #div1 will then expand with it:
#div1 {
position: absolute;
top: 0px;
left: 0px;
min-width: 100%;
width: auto;
height: 100%;
background: blue;
}
#div2 {
position: relative;
top: 30%;
left: 0px;
width: 6000px;
height: 300px;
background: black;
}
<div id="div1">
<div id="div2"></div>
</div>
I am trying to design a webpage where the top division is an image with a transparent button on it.The problem is that each time I minimize the window, the button changes position. Can anyone tell me what the problem is?
<html lang=="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<meta charset="utf-8">
<title>Deut65</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<ul id="nav">
<img id="logo" src="logo.png"></img>
<li>Home</li>
<li>Editor</li>
<li>About</li>
</ul>
<div id="image-div">
<img id="top-image"src="fotoDeut65.jpeg">
<button id="image-button">Button</button>
</div>
<style>
#image-div{
top: -50%;
left: -50%;
width: 100%;
height: 100%;
}
#top-image{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 100%;
min-height: 100%;
width: 400px;
height: auto;
}
#image-button{
position: relative;
z-index: 1;
margin-left: auto;
margin-right: auto;
top: 191px;
left: 420px;
right: -420px;
bottom: -191px;
}
</style>
<!--until here-->
</body>
</html>
Set position:absolute; if you want button float on img
The style above has misstakes, try the below to comprehensive:
<style>
#image-div{ background:lightblue;
}
#top-image{
width:100px;height:100px;
}
#image-button{background:red;
position: absolute;
left:0;
width:100px;height:100px;
}
</style>
This code runs as intended on Chrome:
Please hover over the blue ball for animation:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 100%;
height: 200px;
border: thin solid #6D6;
overflow: hidden;
}
h2 {
position: absolute;
border-radius: 100%;
background-color: blue;
height:100px;
width: 100px;
transition:all 1s ease-out;
margin: auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
h2:hover {
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div class='container'>
<h2></h2>
</div>
</body>
</html>
But the ball in the middle expands to the bottom in Firefox, and I have to set top or bottom in order to bring it back to its correct position. Is there is anyway to make it stay in the middle without assigning top and bottom value just like in Chrome?
A nice trick to center block elements in the middle of a relative positioned container, is using top: 50% and transform: translateY(-50%).
It requires IE9+
.container {
position: relative;
width: 100%;
height: 200px;
border: thin solid #6D6;
overflow: hidden;
}
h2 {
position: relative;
border-radius: 100%;
background-color: blue;
height: 300px;
width: 200px;
margin: auto;
top: 50%;
transform: translateY(-50%);
}
<div class='container'>
<h2></h2>
</div>
JSFiddle demo: https://jsfiddle.net/oujab44t/1/
<head>
<style>
.container {
to;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class='container'>
<h2></h2>
</div>
</body>
</html>
When IE8 is "normal" standards compliant mode the html and css below does what it should and properly centers the red div. However in compatibility mode it does not get centered. Anyone here able to explain why and suggest an alternative?
<html>
<head><title>test</title></head>
<body>
<div
style="position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: 0;
width: 900px;
background-color: red"
>
test
</div>
</body>
</html>
to make it working without the doctype just do this way:
style="position: absolute;
margin-left: -450px;
left: 50%;
top: 0;
width: 900px;
background-color: red"
<!doctype html>
<html>
<head>
<title></title>
<style>
div {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
margin: -150px 0 0 -150px;
background: navy;
}
</style>
</head>
<body>
<div></div>
</body>
</html>