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 .
Related
how can I make div left3 bottom and left4 bottom align to the bottom (like left2 bottom) and also stretch left2 top div over full width?
I tried vertical-align: bottom; but it does not help.
cheers,
Pete
<!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>
<title>test</title>
<style type="text/css">
.wrapper{
margin: 0px auto;
width: 940px;
background-color: #28cf21;
}
.header{
width: 100%;
background-color: #12bf81;
}
.left1{
float: left;
margin-right: 20px;
width: 220px;
height: 500px;
background-color: #fc0234;
}
.left2{
float: left;
margin-right: 20px;
width: 220px;
height: 500px;
background-color: #f78325;
}
.left2oben{
float: left;
margin-right: 20px;
width: 220px;
height: 250px;
background-color: #f78325;
}
.left2unten{
float: left;
margin-right: 20px;
width: 220px;
height: 250px;
background-color: #f11325;
}
.left3{
float: left;
margin-right: 20px;
width: 220px;
height: 250px;
background-color: #f78325;
}
.left4{
float: left;
width: 220px;
height: 250px;
background-color: #f78325;
}
body {
padding: 0px;
margin: 0px;
font-size: 90%;
background-color: #00ccff;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
header
</div>
<div class="left1">
left1
</div>
<div class="left2">
<div class="left2oben">
left2 top
</div>
<div class="left2unten">
left2 bottom
</div>
</div>
<div class="left3">
left3 bottom
</div>
<div class="left4">
left4 bottom
</div>
</div>
</body>
</html>
Have you tried using "bottom" in css?
.left3{
float: left;
margin-right: 20px;
width: 220px;
height: 250px;
background-color: #f78325;
position: absolute;
bottom:0;
}
.wrapper{
margin: 0px auto;
width: 940px;
background-color: #28cf21
Position:relative;
}
When both .left3 and .left4 are set to float:left there will be an issue of the two overlapping. for that you can use different float settings, or use left or right in css just like we used bottom.
Explanation
In css, we set bottom to 0 for .left3 and .left4, this means the two divs, are 0 pixels from the bottom. The same can be used for top, right left.
Position must be set to absolute, in order for this feature to work.
Also, its a good idea to get into the habit of putting a semi-colon at the end of every statement in css, regardless if its the ending statement in the brackets.
UPDATE
Set the position for the wrap div to relative, then the position for the inner div to absolute. The positioning means the contents can overlap each other, so you must maintain fixed heights for your content
hope it can helped you :)
.left3{
float: left;
margin-right: 20px;
width: 220px;
height: 250px;
background-color: #f78325;
bottom: 0!important;
position: absolute;
}
.left4{
float: left;
width: 220px;
height: 250px;
background-color: #f78325;
position: absolute;
bottom: 0;
left:38%;
}
I'm learning CSS and I tried to create a simple layout.
I set the "header" to have a width of 100%, the "left" to have a width of 20% and the "right" 80%. But the width of the header is greater than the total width of the left and the right. Why is that and how to fix it?
div {
border-radius: 10px;
}
#header {
z-index: 1;
background-color: #80B7ED;
height: 50px;
width: 100%;
position: fixed;
}
.left {
background-color: #5A9DE0;
height: 400px;
width: 20%;
float: left;
position: relative;
}
.right {
background-color: #BFD9F2;
height: 400px;
width: 80%;
float: right;
position: relative;
}
#footer {
background-color: #80B7ED;
clear: both;
height:70px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header">
</div>
<div class="left">
</div>
<div class="right">
</div>
<div id="footer">
</div>
</body>
</html>
Edit
Thanks to your answers and to some reading I get now that the problem is the margin of the body section. When I use body {margin: 0;} the "left" plus the "right" take a bigger place in the page and the "header" takes a smaller place, so their widths are equal.
Another solution with the same result is adding a "container" div around everything with "left: 0; right: 0; position: absolute;".
I understand why these solutions make the "left" plus the "right" bigger (so they take the whole page), what I don't get is why the "header" is suddenly smaller. If the fixed "header" is out of the regular flow, why changing the margin of the body influeces it?
body {
margin: 0;
}
div {
border-radius: 10px;
}
#header {
z-index: 1;
background-color: #80B7ED;
border-top-left-radius: 0;
border-top-right-radius: 0;
top: 0;
height: 50px;
width: 100%;
position: fixed;
}
.left {
background-color: #5A9DE0;
height: 400px;
width: 20%;
float: left;
position: relative;
}
.right {
background-color: #BFD9F2;
height: 400px;
width: 80%;
float: right;
position: relative;
}
#footer {
background-color: #80B7ED;
clear: both;
height:70px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header">
</div>
<div class="left">
</div>
<div class="right">
</div>
<div id="footer">
</div>
</body>
</html>
Thanks
When using percentage widths the margin, padding and border are not included in the calculation. So you want to be sure all of those are set to 0 on the corresponding elements.
margin: 0;
padding: 0;
border: none;
Alternatively, you could use the box-sizing property which will make the calculation include padding and border. Then you would only have to account for the margins elsewhere.
box-sizing: border-box;
Here you go:
body{
margin:0px;
}
div {
border-radius: 10px;
}
#wrapper {
padding: 0%;
}
#wrap {
float: left;
position: relative;
width: 100%;
}
#header {
position:fixed;
width:inherit;
z-index:1;
padding:0px;
height:50px;
border-radius:10px;
background-color: #80B7ED;
}
.left {
background-color: #5A9DE0;
height: 400px;
width: 20%;
float: left;
position: relative;
}
.right {
background-color: #BFD9F2;
height: 400px;
width: 80%;
float: right;
position: relative;
}
#footer {
background-color: #80B7ED;
clear: both;
height:70px;
}
<html>
<body>
<div id="wrapper">
<div id="wrap">
<div id="header"></div>
</div>
</div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
See here jsfiddle
EDIT:
If you wish to add a margin, I'd suggest you add a variable margin, for instance 2% or 3%, and then you substract that quantity from the left column, the right column, or both. And then you set the width of the #wrapp to be 100-2*x %, where x is the amount of margin you added.
Another way is to use overflow: hidden; for parent div and set width:100%; for the child element. This way, more width will be hidden.
First sorry for bad English.
I create the following code:
HTML:
<!DOCTYPE html>
<html>
<head lang="fa" dir="rtl" style="font-family: tahoma">
<meta charset="UTF-8">
<title>test</title>
<link rel="Stylesheet" type="text/css" href="st.css">
</head>
<body>
<div id="container">
<div id="ontop"></div>
<div id="header"></div>
<div id="sideRight"></div>
<div id="center"></div>
<div id="sideLeft"></div>
<div id="footer"></div>
</div>
</body>
</html>
CSS:
#container{
width:1000px;
height: 600px;
background-color: red;
margin: 0 auto;
}
#ontop{
width: 200px;
height: 200px;
background-color: purple;
position:absolute;
top:20px;
right:20px;
opacity:0.5;
}
#header{
width: 94%;
height: 10%;
background-color: blue;
float: right;
margin-top:3%;
margin-right: 3%;
}
#sideRight{
width: 15%;
height: 60%;
background-color: yellow;
float: right;
margin-top:3%;
margin-right: 3%;
}
#center{
width: 58%;
height: 60%;
background-color: green;
float: right;
margin-top:3%;
margin-right: 3%;
}
#sideLeft{
width: 15%;
height: 60%;
background-color: yellow;
float: right;
margin-top:3%;
margin-right: 3%;
}
#footer{
width: 94%;
height: 10%;
background-color: blue;
float: right;
margin-top:3%;
margin-right: 3%;
}
I want to position div with "ontop" id in 20px from right and 20px from top of "container" div and be on top of other div.in my code position of "ontop" div ,related to screen not "container" div.
If you want it to be relative to the parent element, all you would have to do is add position: relative to the parent element. It is otherwise assumed to be absolutely positioned relative to the next relatively positioned parent element. Since there were none, it was relative to the window.
Example Here
#container {
width:1000px;
height: 600px;
background-color: red;
margin: 0 auto;
position: relative; /* Added .. */
}
I Know there are several questions about this topic, however I think they depend a bit on another CSS properties given before.
I have a nested <div id="tituloParametros>" and I need its text/contain to be centred on vertical and horizontal position.
This is my markup:
<div id="outer">
<div id="parametros">
<div id="tituloParametros">Ingresa los puntos conocidos x,f(x)</div>
</div>
<div id="resultados">
<div id="graficos">
<div id="bars"></div>
<div id="fx"></div>
<div id="pinchetabla">Tabla inútil</div>
</div>
<div id="loquerealmenteimporta"></div>
</div>
</div>
And this is the applied CSS:
#outer{
padding-left: 15px;
padding-top: 15px;
width: 1350px;
height: 640px;
}
#parametros {
float:left;
width: 20%;
height: 100%;
}
#tituloParametros {
height: 9%;
width: 100%;
background-color: red;
text-align:center;
vertical-align:middle
}
#resultados {
float:right;
width: 80%;
height: 100%;
}
#graficos {
height: 75%;
width: 100%;
}
#bars {
float: left;
height: 100%;
width: 30%;
}
#fx {
float: left;
height: 100%;
width: 30%;
}
#pinchetabla {
float: left;
height: 100%;
width: 40%;
}
#loquerealmenteimporta {
height: 25%;
width: 100%;
}
I thought that:
text-align:center;
vertical-align:middle
both will make it but it didn't. Adding display: table-cell; doesn't solve it neither, it actually crops the background to the text limits.
This is how it looks like
You're right - the table/table-cell approach doesn't work here.
As an alternative, you could resort to the absolute positioning method. An element will be vertically centered when the top value is 50% subtracted by half the element's height. In this instance, it shouldn't be a problem because the height is already set with the % unit. 100% - 50% - 9%*.5 = 45.5% If this weren't the case, you could use calc() or negative margins to subtract the px unit from the % unit. In this case, it's worth noting that the child element is absolutely positioned relative to the parent element.
Updated CSS -- UPDATED EXAMPLE HERE
#parametros {
float:left;
width: 20%;
height: 100%;
outline : 1px solid black;
position:relative;
}
#tituloParametros {
background-color: red;
width: 100%;
height: 9%;
text-align:center;
position:absolute;
top:45.5%
}
The element #tituloParametros is now centered within the parent element. If you want to center the text within it, you could wrap the text with a span element and then use the table/table-cell vertical centering approach:
UPDATED EXAMPLE HERE
#tituloParametros {
/* other styling.. */
display:table;
}
#tituloParametros > span {
display:table-cell;
vertical-align:middle;
}
Here is my fix for this!::::
HTML:
<div id="parametros">
<div id="tituloParametros"><p>Ingresa los puntos conocidos x,f(x)</p></div>
</div>
CSS:
#tituloParametros {
height: 70px;
width: 100%;
background-color: red;
text-align:center;
vertical-align:middle
}
#tituloParametros p{
line-height: 70px;
}
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders to see it */
</style>
</head>
<body>
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>
Here is the demo
http://www.jakpsatweb.cz/css/priklady/vertical-align-final-solution-en.html
I have a problem with HTML.
The #content div wont get the width.
div test is centered, and #menu should have 15% width and #info to.
I tried clear: both; but it wont work...
Maybe its a issue to width 100%.
<!doctype html>
<html>
<head>
<style>
html, body {
height: 100%;
}
body {
margin: 0px;
overflow: hidden;
}
#wrapper {
background-color: green;
width: 100%;
height: 100%;
position: fixed;
}
#upper {
height: 15%;
background-color: blue;
}
#test {
height: 85%;
width: 100%;
margin: 0px auto;
}
#test #menu {
width: 15%;
height: 100%;
float: left;
/* scroll bar */
overflow-y: scroll;
overflow-x: hidden;
background-color: red;
}
#test #content {
width: 70%;
height: 100%;
float: left;
}
#test #content {
width: 15%;
height: 100%;
float: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="upper">
upper
<!-- logo etc -->
</div>
<div id="test">
<div id="menu">
menu
</div>
<div id="content">
content
</div>
<div id="info">
info
</div>
</div>
</div>
</body>
</html>
Could somebody help me!
The problem is that you are overwriting your declarations:
#test #content {
width: 70%;
height: 100%;
float: left;
}
#test #content {
width: 15%;
height: 100%;
float: left;
}
I would recommend the Use of inline-block on the element instead of floating.
although it has is own faults..
http://jsfiddle.net/avrahamcool/gMMHL/1/
Auto margins don't work with percentages. You'll have to give it a fixed dimension in order for the margin centering to work.