I have a container with with fixed width and centered. Inside of the container I have two DIVs position relative to the window side by side. Inside of these Divs I've other content which I want to be centered (preferably with container).
here is simplified code: http://jsfiddle.net/jTpGs/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>
#container {
width: 960px;
height: 1000px;
background: red;
margin: 0 auto;
}
#windowdiv {
height: 200px;
background: purple;
padding-top: 20px;
position: absolute;
left: 0;
right: 30%;
top: 25px;
}
#windowdiv2 {
height: 200px;
background: blue;
padding-top: 20px;
position: absolute;
left: 60%;
right: 0;
top: 10px;
}
</style>
</head>
<body>
<div id='container'>
<div id='windowdiv'>
<p>some content</p>
</div>
<div id='windowdiv2'>
<p>some content</p>
</div>
</div>
</body>
</html>
Add to this to your CSS to center your text in the middle of those boxes:
#windowdiv p, #windowdiv2 p {
text-align: center;
height: 100%;
line-height: 180px;
}
This is assuming that your boxes are fixed height, because we set the line-height. (200px - 20px (padding-top) = 180px)
Related
the trashcan moves up when scrolling down and it doesnt span over the full width of the parent div
I want it to be like this:
.ParentDiv {
background: red;
overflow-y: scroll;
border: none;
float: left;
position: relative;
height: 80px;
width: 200px;
}
#DivAroundTrashcan{
position:fixed;
bottom: 0;
width: 100%;
height: 15px;
}
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="ParentDiv" id="ParentDiv" >
<p1><center>efgf </center></p1>
<p2><center>wefwf </center></p2>
<p3><center>wefwef </center></p3>
<p4><center>wefwef </center></p4>
<p5><center>wefwef </center></p5>
<p6><center>wefweff </center></p6>
<p7><center>wefwef</center></p7>
<p8><center>wefwef </center></p8>
<div id="DivAroundTrashcan"><input type="button"id="Trashcan"value="🗑"></div>
</div>
</body>
</html>
position:absolute;
just makes it stay where it is, but when scrolling it doesnt stay in place
You can use flex on your container:
html,
body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
/*following is for demo only - not sure what gives your container height */
height: 100%;
}
.scroll {
flex-grow: 1;
overflow: auto;
}
.bin {
text-align: right;
}
<div class="container">
<div class="scroll">
content<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br>content<br>content<br>
</div>
<div class="bin">bottom bin content</div>
</div>
put position: fixed on the container div of the trashcan, rather than absolute.
#DivAroundTrashcan{
position: fixed;
right: 0;
bottom: 0;
left: 0;
text-align: right;
}
You can see my layout prototype on Design Prototype.
I have two : Header and Container. Header area must be placed above the container.
Header has two child elements: Logo DIV and Logo-Title DIV. Their positions being rated to parent [Header DIV].
So, I set position of header to relative and children (Logo and Logo-Title) to absolute.
But after it, Container didn't place under header area!
When i remove absolute position from Logo DIV and Logo-TITLE DIV, The Container is OK! but i can align logo and logo-title from parent(Header).
Why? Container isn't child of Header!
How can fix it?
Thanks.
Design Prototype
#charset "utf-8";
body{
margin: 0 auto;
width: 980px;
background-color: #f1f1f1;
}
#header{
position: relative;
background-color: yellow;
height: 154px;
}
#logo{
position: absolute;
background-color: green;
width: 123px;
height: 146px;
margin-top: 4px;
margin-left: 4px;
}
#logo-title {
position: absolute;
color: darkblue;
font-size: 16pt;
bottom: 0;
margin-left: 60px;
}
#container {
background-color: white;
height: 600px;
width: 980px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"/>
<div id="logo-title">Logo-Title</div>
</div>
<div id="container"></div>
</div>
</body>
</html>
The single tag closure used on your logo doesn't work on div element so I changed it like this
<div id="logo"></div>
Colored your container to red temporary, so one can see that it renders correct now
#charset "utf-8";
body{
margin: 0 auto;
width: 980px;
background-color: #f1f1f1;
}
#header{
position: relative;
background-color: yellow;
height: 154px;
}
#logo{
position: absolute;
background-color: green;
width: 123px;
height: 146px;
margin-top: 4px;
margin-left: 4px;
}
#logo-title {
position: absolute;
color: darkblue;
font-size: 16pt;
bottom: 0;
margin-left: 60px;
}
#container {
background-color: red;
height: 600px;
width: 980px;
}
<div id="wrapper">
<div id="header">
<div id="logo"></div>
<div id="logo-title">Logo-Title</div>
</div>
<div id="container"></div>
</div>
Your logo div has not correct syntax , closed always div with close div tag like this <div id="logo"></div>
Hello my question is about aligning divs. On a website i am working on for fun i have a div and inside that div is a child div. i need the child to be in the middle of the adult div. The left and right are aligning in the middle but it is stuck to the top. If anyone could help me that would be greatly appreciated!
JSFIDDLE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title></title>
</head>
<body>
<div id="container">
<div id="logo">
</div>
<div id="nav">
</div>
<div id="content-background">
<div id="content">
</div>
</div>
<div id="faqs">
</div>
<div id="footer">
<div id="footer-right">
</div>
<div id="footer-left">
</div>
<div id="footer-bot">
</div>
</div>
</div>
</body>
</html>
* {
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
#logo {
width: 25%;
height: 50px;
float: left;
background-color: red;
}
#nav {
width: 75%;
height: 50px;
float: left;
background-color: green;
}
#content-background {
width: 100%;
height: 600px;
clear: both;
background-image: url('images/background.jpg');
}
#content {
width: 50%;
height: 300px;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}
#faqs {
width: 100%;
height: 500px;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}
#footer {
width: 100%;
height: 200px;
margin-left: auto;
margin-right: auto;
background-color: red;
}
#footer-right {
width: 50%;
height: 150px;
float: left;
background-color: blue;
}
#footer-left {
width: 50%;
height: 150px;
float: left;
background-color: pink;
}
#footer-bot {
width: 100%;
height: 50px;
clear: both;
background-color: green;
}
It seems you want to align the div vertically to the middle as well as horizontally. The child div looks good horizontally, but aligning to the center vertically is a bit trickier.
An easy solution since you know the height of #content-background would be to position #content relative to the parent and then move it down by 150 pixels.
#content {
...
position: relative;
top: 150px;
}
Here's a working fiddle http://jsfiddle.net/ry5xU/3/
Here's a really good breakdown of how you can accomplish true vertical centering:
How to vertically center divs?
You can use margin:auto to show a div at center.
Check out this and this or this might help.
#main_div {position:relative;}
#child_div {position:absolute; right:50%; margin-right:-200px; top:50%; margin-top:-200px;}
you should do this for your css.
when the width and height of your child div is 400px , in "margin-right" or "margin-top" you write -200px on them . It means the half of width with a Minus behind that should be in "margin-right" and the half of height with a Minus behind that should be in "margin-top".
Good luck .
So I'm working on some html/css stuff
I can't seem to get these two floating div's and the footer to be correctly sized inside the parent div.
the content div is positioned absolutely to get header and footer to show respectively.
HTML:
<div id="Content">
<div id="Header">header</div>
<div id="Container">
<div id="leftTable">
<div>left content</div>
</div>
<div id="rightTable">
<div>right content</div>
</div>
</div>
<div id="Footer">
<div>footer</div>
</div>
</div>
CSS:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#Content {
padding: 0 15px;
height: 100%;
background-color: honeydew;
position: relative;
height: 100%;
}
#Header {
height: 60px;
background-color: aliceblue;
}
#Footer {
position: absolute;
bottom: 0;
background-color: purple;
height: 70px;
}
#Container {
background-color: green;
position: absolute;
top: 60px;
bottom: 70px;
margin-right: 15px;
}
#Container:after {
clear:both;
}
#leftTable {
float: left;
width: 50%;
height: 100%;
background-color: grey;
}
#rightTable {
float: left;
width: 50%;
background-color: blue;
}
http://jsfiddle.net/4CabB/12/
I was hoping to no position the Container div or footer div on the left and right sides and just have it take up the remaining space.
I'm a bit unclear as to what needs to be achieved, but perhaps this solves your issue: JSFiddle.
Essentially, I just needed to add
width: 100%;
to your container to allow its children to take up the space. Parent containers, when absolutely positioned, must have their widths specified.
I am a CSS beginner.
I want a half transparent centered div with the main content. Below it should be a fixed div containing the table of contents.
Below is my attempt on this. This works with a certain browser size. But when the size of the browser window changes, the table of content moves.
I want the table of contents to stay at a fixed distance to the main div.
jsFiddle link
With this window size everything looks ok:
Decreasing the window size moves toc under content div:
html
<html>
<head>
<title>Testpage</title>
<link rel='stylesheet' href='css/testpage.css'>
</head>
<body>
<div id="contenttable">
<h1>Contents</h1>
Content 01<br>
</div>
<div id="content">
some text
</div>
</body>
</html>
css:
#content{
height: 1000px;
width: 320px;
position: relative;
top: 50px;
left: 50%;
margin-left: -160px;
background-color: cyan;
}
#contenttable{
padding: 12px;
width:100%;
height:200px;
position: fixed;
background-color: yellow;
top: 125px;
left: 6%;
}
#contenttable a{
position: relative;
top: 0px;
left: 66%;
}
#contenttable h1{
position: relative;
top: 0px;
left: 66%;
}
You can use an inner div absolutely positioned inside the fixed TOC, and set its position.
Use CSS3 Calc to elaborate the right position for your main content.
Use opacity for transparency, and avoid setting the height of the main content div for automatic overflow handing.
Demo: http://jsfiddle.net/vMAQz/1/
CSS
#contenttable {
padding: 12px;
width:100%;
height:200px;
position: fixed;
background-color: yellow;
top: 125px;
}
#innerContent {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 100px;
padding: 30px;
}
#content {
padding: 10px;
opacity: 0.8;
width: 320px;
position: relative;
top: 50px;
left: calc(100% - 480px);
background-color: cyan;
}
HTML
<div id="contenttable">
<div id="innerContent">
<h1>Contents</h1>
Content 01
<br/>
</div>
</div>
<div id="content">
some text
</div>
all you need to do is change the width of the content div
#content{
height: 1000px;
width: 30%;
position: relative;
top: 50px;
left: 50%;
margin-left: -160px;
background-color: cyan;
}