I want red square exactly overlap green one.
Everything works fine in FF, IE and Opera, but in Chrome red square aligning to the left, not center.
Also, I can affect only on #parent div and its children because I making a bookmarklet and I can't change other page elements.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
#center { text-align: center; }
#parent {
position: absolute;
display: inline;
}
#nested {
background-color: #c00;
width: 280px !important;
height: 210px !important;
}
</style>
</head>
<body>
<div id="center">
<div id="parent"><div id="nested"></div></div>
<div style="display: inline-block; width: 280px; height: 210px; background-color: #0c0;"></div>
</div>
</body>
</html>
Please, advice!
When I elaborated on chrome properties, I found that chrome is forcing display to block when you set position to absolute for #parent. How to make it inline?
I think this is visually what you asked for:
I only changed the CSS for #parent and #nested.
It looks the same in IE7/IE8, Firefox, Chrome, Opera, Safari.
Live Demo
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
#center { text-align: center; }
#parent {
position: absolute;
left: 0;
right: 0;
/*top: 0;*/
text-align: center
}
#nested {
background-color: #c00;
width: 280px !important;
height: 210px !important;
display: inline-block
}
</style>
</head>
<body>
<div id="center">
<div id="parent"><div id="nested"></div></div>
<div style="display: inline-block; width: 280px; height: 210px; background-color: #0c0;"></div>
</div>
</body>
</html>
Related
I have a fixed banner at the bottom of my website. Here is the styling for it
#mobile-cookie-policy {
position: fixed;
bottom: 0;
width: 100%;
height: 70px;
text-align: center;
background-color: #f7f7f7;
border-top: 1px solid #ddd;
z-index: 1;
padding-bottom: 10px;
}
#mobile-cookie-policy p {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
display: block;
}
#mobile-cookie-policy span {
cursor: pointer;
padding: 10px 20px;
display: block;
}
And the element itself
<div id="mobile-cookie-policy">
<span onclick="hideDiv('mobile-cookie-policy')" id="mobile-cookie-close">✕</span>
<p>By using our website you are <br>agreeing to our use of cookies</p>
</div>
For some reason, on Firefox Android the fixed banner doesn't work it and jumps all over the place. Its default position is also slightly out of view. I can't work out why.
Here is a demonstration: https://imgur.com/a/FVsjt5k
EDIT: Curiously, I have discovered that it works on Firefox when the toolbar is set to be on the bottom, but not when it's on the top.
EDIT2: I have tried removing every other element on the page one by one, but it didn't help in any case.
EDIT3: I have also discovered that disabling "scroll to hide toolbar" makes it function as intended.
EDIT4: I am having the same issue with this simple website
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta charset="utf-8">
<title></title>
<style>
#main {
height: 3000px;
}
#fixed {
background-color: red;
bottom: 0;
position: fixed;
width: 100%;
height: 70px;
}
</style>
</head>
<body>
<div id="main">
</div>
<div id="fixed">
</div>
</body>
</html>
I use the :after to add the content after the div, but you know it will add to the div's text, but not add next to the div's border.
#div2 {
width: 300px;
height: 100px;
background-color: beige;
}
#div2:after {
content: "a";
top: 5px;
bottom: 5px;
right: 5px;
width: 1px;
background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="styles/index.css" type="text/css">
</head>
<body>
<div id="div2">
div2-text
</div>
</body>
</html>
Can I easily add the border after the div's frame(you can see the div's background-color)?
Would recommend to create another empty div after your div where you have the content, a solution with absolute position is not good/useful, because you will have more things on your website and then they will be on top of your "a" text or whatever text you will add with :after.
So just create another div :-)
Put the text in a span and apply :after to the span
#div2 {
width: 300px;
height: 100px;
background-color: beige;
}
#div2 span:after {
content: "after";
}
<div id="div2">
<span>div2-text</span>
</div>
Is this what you mean?
#div2 {
position: relative;
width: 300px;
height: 100px;
background-color: beige;
}
#div2:after {
position: absolute;
content: "";
top: 5px;
right: -5px;
width: 1px;
height: 90px;
background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="styles/index.css" type="text/css">
</head>
<body>
<div id="div2">
div2-text
</div>
</body>
</html>
I have some very simple HTML/CSS code, and no matter what I do, I always get an "invalid property value" exception by chrome, and the logo won't position properly.
Fixed the first problem, but now the image does not move related to the border.
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>my website</title>
<style type="text/css">
*{ padding: 0; margin: 0; }
.header {
width: 100%;
height: 100px;
border: none;
border-bottom-style: solid;
border-bottom-width: 5px;
position: relative;
border-bottom-color: rgb(220,30,60);
}
.logo {
position: absolute;
padding-bottom:50px;
height: 150%;
width: auto;
}
</style>
</head>
<body>
<div class="header" id="header">
<img id="logo" class="logo" src="image.png"/>
</div>
</body>
</html>
I had a similar issue for me.
I wrote 10 (instead of 10px), this fixed the issue.
If you are using single quotes in your css, Please remove single quotes from your css file.
For Example
// Wrong
.row{
margin-left:'-16px !important';
margin-right:'0px !important';
}
// Right
.row{
margin-left:-16px !important;
margin-right:0px !important;
}
I just don't understand why you used padding-bottom instead of bottom in this case. Anyway:
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>my website</title>
<style type="text/css">
*{ padding: 0; margin: 0; }
.header {
position: relative;
height: 100px;
border-bottom: 5px solid rgb(220,30,60);
}
.logo {
position: absolute;
bottom:50px;
height: 150%;
width: auto;
}
</style>
</head>
<body>
<div class="header" id="header">
<img id="logo" class="logo" src="image.png"/>
</div>
</body>
</html>
CSS bottom property: http://www.w3schools.com/cssref/pr_pos_bottom.asp
CSS padding-bottom property: http://www.w3schools.com/cssref/pr_padding-bottom.asp
There's a space before the px in padding-bottom:50 px;. Fix:
padding-bottom: 50px;
Here is the code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" media="all" href="page.css">
</head>
<body>
<div id="header"></div>
<div id="body"></div>
</body>
</html>
CSS
body{
background-color: cyan;
margin: 0;
padding: 0;
}
#header{
width: 100%;
height: 200px;
background-color: green;
}
#body{
width: 100%;
background-color: blue;
height: 500px;
position: relative;
top: -100px;
}
Rendered page looks like this:
The relatively positioned div#body is taken out of the normal flow, and we can see the cyan body at the bottom. Is it possible to fix it, so the body height ended where div#body ends?
I can't use margin-top: -100px, because on the real page it breaks the horizontal centering in Opera.
Fiddle: http://jsfiddle.net/xfqzqhws/
Can you check if this will work for you
#body{
width: 100%;
background-color: blue;
height: calc(100% - 100px);
position: absolute;
margin-top:-100px;
}
I would like to put a box in the middle of the window with css, but it doesn't work. The html element's height doesn't seems to be 100% for example.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Box</title>
<style type="text/css">
html {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
body {
margin: auto;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
box
</body>
</html>
it's not a good idea to mess with html and body making it display: table-cell or something
instead, try this code:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Box</title>
<style type="text/css">
html {
width: 100%;
height: 100%;
}
div {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin: -150px 0 0 -150px;
border: 1px solid black;
}
</style>
</head>
<body>
<div>box</div>
</body>
</html>
Try enclosing the box inside a div element. Resizing the body won't work. You should use the following code:
<body>
<div id="box">box</div>
</body>
And then your CSS should look like this:
#box {
position: fixed;
width: 300px;
height: 300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
border: 1px solid #000;
}
You can see a jsFiddle demo here.