Centering a child div based on the parent div - css

I have a parent div and a child div.I would like to center to know if i could express the width and the height of the child as a percent of the parent,for instance
<!doctype html>
<head>
<meta charset='utf-8' />
<title>Horizontal center a div</title>
<style type='text/css'>
.one{
width:800px;
height:100px;
background-color:grey;
}
.two{
margin-top:30px;
margin-bottom:30px;
min-height:40px;
margin-left:30px;
width:90px;
background-color:pink;
display:inline-block;
}
</style>
</head>
<body>
<div class="one">
<div class="two">lorem ipsum</p>
</div>
</body>
</html>
To see it in action http://jsfiddle.net/thiswolf/3qRgH/
The outer div(parent) has a height of 100px and my child div has a height of 40px.I would like to center my child inside the parent theme,so,100px - 40px = 60px and i divide the 60px twice and assign the child div margin-top:30px and margin-bottom:30px;.I however would like to express the margins in percentage form.How would i express the margins in %.


You can center the divs this way (edited) :
<!doctype html>
<head>
<meta charset='utf-8' />
<title>Horizontal center a div</title>
<style type='text/css'>
.one{
width: 800px;
background-color: grey;
}
.two{
min-height: 40px;
margin: 30% 355px;
width: 90px;
background-color: pink;
display: inline-block;
}
</style>
</head>
<body>
<div class="one">
<div class="two">lorem ipsum</div>
</div>
</body>
</html>
See http://jsfiddle.net/3qRgH/2/
Is this what you 're asking?


http://jsfiddle.net/thiswolf/5AZJD/
That seems to work but i haven't proved it
<!doctype html>
<head>
<meta charset='utf-8' />
<title>Horizontal center a div</title>
<style type='text/css'>
.one{
position:relative;
width:800px;
height:100px;
background-color:grey;
}
.two{
position:absolute;
top:30%;
bottom:30%;
min-height:40px;
margin-left:30px;
width:90px;
background-color:pink;
display:inline-block;
}
</style>
</head>
<body>
<div class="one">
<div class="two">lorem ipsum</p>
</div>
</body>
</html>

Related

first div float:left second div overflow:hidden and margin-top:3000px invalid

first div float:left second div overflow:hidden and margin-top:3000px invalid.
div2 set margin-top:3000px no margin-top!?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
body{
margin:0;padding:0;
}
.box{
width:300px;
height:300px;
margin-top:20px;
background:blue;
}
.sub{
width:100px;
height:100px;
margin-top:30px;
margin-bottom:20px;
background-color: yellow;
}
.fl {
float:left;
margin-right: 100%;
}
.clear{
clear:both;
}
.absolute{
position:absolute;
}
.inline-block{
display: inline-block;
}
</style>
</head>
<body>
test
<div class="box" style="margin-left:20px;">
<div class=" box sub fl" style="">ccc</div>
<div
class="box sub"
style="
overflow:hidden;
background:red;
margin-top:3000px;">
div2
</div>
<div class="box sub" style="overflow:hidden;">
</div>
</div>
</body>
</html>

div2 margin-top eaten by float:left div ?

height does not work in IE6

I tried to create a cross at the center of the body with a red background, screenshot:
This is the html fragments:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{
padding:0;
margin:0;
width:100%;
height:100%;
}
.mask{
width:100%;
height:100%;
}
.mask .row{
position:absolute;
left:50%;
width:40px;
margin-left:-20px;
top:50%;
}
.mask .col{
position:absolute;
top:50%;
height:40px;
margin-top:-20px;
left:50%;
}
</style>
</head>
<body>
<div class="mask">
<div class="row" style="height: 2px; margin-top: -1px; background: red;"></div>
<div class="col" style="width: 2px; margin-left: -1px; background: red;"></div>
</div>
</body>
</html>
And it worked as expected in IE7+,FF, chrome. Demo:http://jsfiddle.net/3f2RE/
However the div have an unexpected height in IE6, screenshot:
I do not know what's going on? Any way to fix it?

so overflow: hidden solver your problem, so its commenter's task to paste comment as answer. Or askers should do this, so other visiters will know that this question has a right answer.

Column push down css issue

I have searched the web, but I cannot find the answer. Hope someone help me
out.
In my page, the right column is push down under the left column because the
width problem. Is that any way I don't need to change the width for all
element? I means let the right column is overlap the div which class is
wrapper?
There is my html page:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
color: purple;
}
div.wrapper {
width: 80%;
border-style:solid;
border-color:black;
}
div.one {
width: 300px;
float: left;
height: 300px;
border-style:solid;
border-color: #0000ff;
}
div.two {
width: 1024px;
border-style:solid;
border-color:yellow ;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="one">The left column</div>
<div class="two">The right column</div>
</div>
?
</body>
there is the screen shot of my page:

Solution:
<!DOCTYPE HTML>
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
color:purple;
}
div.wrapper {
width:80%;
float:left;
border-style:solid;
border-color:black;
}
div.one {
width:45%;
float:left;
height:300px;
border:1px solid blue;
}
div.two {
width:45%;
float:right;
border:1px solid yellow;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="one">The left column</div>
<div class="two">The right column</div>
</div>
</body>
</html>
Result:

Try changing second div style to
div.two {
border-style:solid;
border-color:yellow ;
margin-left: 310px;
}

HTML & CSS: #wrapper background-image does not appear

so I did searches on here beforehand, trying to find an answer to my question, but all the solutions I found gave me no results. Basically, I have an image in my div#wrapper that I'd like to display, but it won't unless I fill the area -after- the respective div with text.
I have overflow:auto; in my #wrapper since I have floats in the succeeding divs.
CSS file:
#media only screen and (min-width: 25em) {
html {
background: url(images/gridbg.jpg) repeat fixed center top;
}
}
#media only screen and (max-width:25em) {
html {
background-color:#0c0c1f;
}
}
img {
border:0px;
}
textarea:focus, input:focus{
outline: none;
}
#wrapper {
margin:0 auto;
width:60em;
overflow:auto;
background-image:url(images/cont-bg.png);
}
#content {
text-align:justify;
position:fixed;
width:59em;
height:100%;
overflow:auto;
padding-top: 0.4em;
padding-bottom: 0.4em;
padding-left: 0.4em;
padding-right: 0.4em;
outline:none;
z-index:2;
margin-top:12em;
}
#homeNav {
position:fixed;
float:left;
margin-left:0.65em;
margin-top:0.65em;
z-index:3;
}
#primaryNav {
z-index:2;
float:right;
margin-left:28em;
margin-top:1em;
position:fixed;
}
#navGFX {
background-image:url(images/navGFX.png);
background-repeat:no-repeat;
width:60em;
height:8em;
float:left;
position:fixed;
z-index:1;
margin-top:3em;
}
HTML file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ag Design</title>
<link href="main.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="scrollstyles.css"/>
<script type='text/javascript' src="js/flexcroll.js"></script>
</head>
<body>
<div id="wrapper">
<div id="navGFX">
<div id="homeNav"><img src="images/buttons/btn_logo.png"></div>
<div id="primaryNav">
<img src="images/buttons/btn_home.png">
<img src="images/buttons/btn_link1.png">
<img src="images/buttons/btn_link2.png">
<img src="images/buttons/btn_link3.png">
<img src="images/buttons/btn_link4.png">
</div>
</div>
<div id="content" class="flexcroll">
This area is full of filler text
</div>
</div>
</body>
</html>
I haven't the foggiest clue what I'm doing wrong. Anyone have any ideas? :/

Just remove the CSS:
position: fixed;
from the #wrapper id and the background-image will appear

Divs don't appears on main div, and div width don't work

Can anybody help, I`m starter in web? Here is code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
.window {
margin:0;
padding:0;
border: solid 1px #666666;
}
.image {
height:50px;
widows:50px;
float:left;
}
.text {
font-size:12px;
color:#666666;
float:left;
}
-->
</style>
</head>
<body>
<div class="window">
<div class="image">image</div>
<div class="text"></div>
</div>
</body>

First, for width, u use window, use width:50px; for appear div image and div text on div window, use clear div, see code below...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
.window {
margin:0;
padding:0;
border: solid 1px #666666;
}
.image {
height:50px;
width:50px;
float:left;
}
.text {
font-size:12px;
color:#666666;
float:left;
}
.clear {
clear:both;
}
-->
</style>
</head>
<body>
<div class="window">
<div class="image">image</div>
<div class="text"></div>
<div class="clear"></div>
</div>
</body>
Is ok?

Misspelt width?
widows:50px;

because you have float:left for the two child elements you have to clear them. Add overflow:auto for the .window.
Demo: http://jsfiddle.net/CVcjf/1

you should assign a width and height to the divs in order to make its visible.

Resources