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.
Related
I'm facing problem that one of my div content_wrap not taking it's min-height:100%
HTML
<!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>
<link rel="stylesheet" type="text/css" href="css/main_style.css">
</head>
<body>
<div id="header">
</div>
<div id="center_content_common">
<div id="menu_wrap">
</div>
<div id="content_wrap">
<div id="content_block">
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
CSS
html,body
{
padding:0px;
margin:0px;
font-family:"Trebuchet MS", Helvetica, sans-serif;
height:100%;
width:100%;
}
#header
{
width:100%;
height:15%;
background-image:url('../images/header_gradient.png');
background-repeat:repeat-y;
background-size:100% 100%;
border-bottom:3px solid #b8babc;
}
#center_content
{
min-height:79%;
height:auto;
background-image:url('../images/content_area_gradient.png');
background-repeat:repeat-x;
background-size:100% 100%;
overflow:auto;
}
#center_content_common
{
min-height:79%;
width:100%;
height:auto;
overflow:auto;
}
#content_wrap
{
min-height:500px;
width:84.5%;
float:right;
background-image:url('../images/content_area_gradient.png');
background-repeat:repeat-x;
background-size:100% 100%;
}
#content_block
{
min-height:100%;
width:100%;
margin:auto;
}
#menu_wrap
{
width:15%;
min-height:100%;
height:auto;
float:left;
}
#footer
{
height:5%;
width:100%;
background-image:url('../images/footer_gradient.png');
background-repeat:repeat-y;
background-size:100% 100%;
border-top:3px solid #b8babc;
}
What could be the possible problem with my css?
Add height:100%; to your #center_content insteed of height:auto. This will probably work
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;
}
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
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>
<style>
body{
background:#FF9900;
color:#FFFFFF;
}
.wrapper{
width:900px;
height:auto;
padding:0px;
margin:auto;
background:#000000;
}
.header{
width:900px;
height:50px;
float:left;
padding:0px;
margin:0px;
}
.body_content{
width:900px;
height:200px;
float:left;
padding:0px;
margin:0px;
}
.fotter{
width:900px;
height:50px;
float:left;
padding:0px;
margin:0px 0px 25px 0px;
}
</style>
<div class="wrapper">
<div class="header">Header</div>
<div class="body_content">Body Content</div>
<div class="fotter">Footer</div>
</div>
If i give a wrapper div height:"500px" i can see the background color black. But if i change the to height="auto" i cant see the color.
Can some one please help me with this ?
Please see here..link text
Add overflow: hidden or overflow: auto to your #wrapper styles.
You have to do this, because containers with floated elements inside them don't have any height by default, so you have to use the above hack (or some other) to force the browser to give the container some height.
You can also add a <div style="clear: both;"></div> as the last element in your #wrapper and that should work also.
Is it because you have zero content? Add 'lorem ipsum' and see what you get.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
body{
background:#FF9900;
color:#FFFFFF;
}
#wrapper{
width:900px;
height:auto;
padding:0px;
margin:auto;
background-color:#990000;
clear:both;
}
.header{
width:900px;
height:50px;
float:left;
padding:0px;
margin:0px;
}
.body_content{
width:900px;
height:200px;
float:left;
padding:0px;
margin:0px;
}
.footer{
width:900px;
height:50px;
float:left;
padding:0px;
margin:0px 0px 25px 0px;
}
</style>
<body>
<div id="wrapper">
<div class="header">Header</div>
<div class="body_content">
<p>Body Content</p>
</div>
<div class="footer">Footer</div>
<hr/>
</div>
</body>
</html>
hope this will solve the problem