A box in the middle of the page? - html

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.

Related

Why doesn't it stick to the top completely when position: fixed?

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>

How can I get two divs to fill up the <body> page width

When opening this up in a browser, the combined width of the two divs does not fully fulfill the width of the body. I have made the background color of the second (right) div black so you can see the white space between the second div and the right side of the page. I tried messing with the border, margin but maybe I did it wrong.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="home2.css">
</head>
<body>
<div id="wrapper">
<main>
<div id="div1">
<img src="font-header.png" alt="Image Logo Header">
</div>
<div id="div2">
</div>
</main>
</div>
</body>
</html>
CSS:
img {
border-bottom: 4px solid black;
position: relative;
left: 30px;
}
body {
margin: 0;
}
#div1 {
height: 756px;
width: 300px;
border: 2px solid black;
float: left;
}
#div2 {
height: 758px;
width: 1216px;
overflow: hidden;
background-color: black;
}

Position the divs absolutely and apply media queries so they will be responsive. Hope this helps.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="home2.css">
<style>
img {
border-bottom: 4px solid black;
position: relative;
left: 30px;
}
body {
margin: 0;
width: 100%;
}
#div1 {
height: 756px;
width: 25%; //change width to fit your need
border: 2px solid black;
float: left;
left:0;
position: absolute;
}
#div1 img{
left: 0;
}
#div2 {
height: 758px;
width: 75%; //change width to fit your need
overflow: hidden;
background-color: blue;
right:0;
position: absolute;
}
</style>
</head>
<body>
<div id="wrapper">
<main>
<div id="div1">
<img src="font-header.png" alt="Image Logo Header">
</div>
<div id="div2">
</div>
</main>
</div>
</body>
</html>

Since you are using fixed width, it will not adjust properly to your screen. And in different resolutions it will not adjust correctly to your screen size. Instead use % width.
#div1 {
height: 756px;
width: 35%;
float: left;
}
#div2 {
height: 758px;
width: 65%;
overflow: hidden;
background-color: black;
}
I've setup this fiddle with your example: https://jsfiddle.net/5yfnLcdt/

Auto-size container with fixed image where text should fill the gap

So without using Flex, how can I make this text container fill the gap of the parent, when another div (fixed image) it's already inside? Thanks in advance.
Here's the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Testing</title>
<style>
#container { width: 50%; height: 100px; margin: 0 auto; border: solid 1px #fb9494;}
.image { height: 100px; width: 100px; background-color: #d9d9d9; float: left;}
.text { width: 100%; background-color: yellow; float: left;}
</style>
</head>
<body>
<div id="container">
<div class="image">image</div>
<div class="text">text</div>
</div>
</body>
</html>

Try adding this to the text class:
.text {
width: calc(100% - 100px);
height: 100px;
}
DEMO: http://jsfiddle.net/abbts5n3/

How to correct the height when using position:relative and negative top

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;
}

Why a fixed element covers a floated element?

the Html is :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="wp-1-main.css">
<title></title>
</head>
<body>
<div class="wrapper">
<div class="textArea"></div>
</div>
<div class="imageLine">
</div>
</body>
</html>
and the CSS is
.wrapper{
width: 100%;
height: 400px;
position: fixed;
top: 50%;
margin-top: -200px;
border-top: solid 1px black;
border-bottom: solid 1px black;
background-color: pink;
}
.imageLine{
width: 500px;
height: 1500px;
float: right;
margin-right: 60px;
background-color: grey;
}
my goal is to make the .imageLine cover some .wrapper , and the wrapper is centered vertically , and always be in the viewport.
but those code turn out that the .wrapper covers the .imageLine . any idea to fix that?

You could use z-index
Higher z-indices will come infront of lower z-indices.