<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
Related
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.
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 all my divs centered with the left and right edges vertically aligned, but when I added the ul and li then my .nav started to have a background color that extends past the right hand edge. Any idea how to lock this down? max width doesn't prevent it from flowing outwards.
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<title></title>
</head>
<body>
<div class="container">
<div class="header">
<img src="image/logo.png" width="155" height="110" alt="Big Box Property Preservation" />
</div>
<div class="navContainer">
<div class="miniNav">
<img src="image/link_banner.nav.png" width="189" height="44"/>
</div>
<div class="nav">
<ul class="nav">
<li>HOME</li>
<li>ABOUT US</li>
<li>OUR SERVICES</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
<div class="content">
<div class="contentBody">
</div>
<div class="sidebar1">
</div>
</div>
<div class="footer" >
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
body{
top:0;
left:0;
margin:0;
padding:0;
background-color:#666;
}
.container{
position:relative;
margin-top: 0%;
position:relative;
width:1000px;
margin:0px auto;
}
.header{
position:relative;
float:left;
width:900px;
height:120px;
background-color:#CFCA4C;
margin:0px 50px 0px 50px;
}
.navContainer{
position:relative;
float:left;
width:100%;
height:80px;
margin:0px 0px 0px 0px;
}
.miniNav{
height:100%;
position:absolute;
right:0px;
}
.nav{
float:left;
max-width:900px;
width:900px;
height:100%;
background-color:#FFFFFF;
overfow:hidden;
margin: 0 20px 0 50px;
}
ul.nav{
list-style:none;
padding: 0px;
}
ul.nav li{
display:inline;
padding:0px;
float:left;
}
.content{
float:left;
width:900px;
min-height:400px;
background-color:#FFFFFF;
margin:0px 50px 0px 50px;
}
.footer{
float:left;
width:900px;
height:80px;
background-color:#CFCA4C;
margin:0px 50px 0px 50px;
}
Both div and ul has class 'nav'. Ul with class nav should not have margins (they have already been added in div). So add:
ul.nav {margin: 0}
.nav {
width: 850px;
}
jsFiddle: http://jsfiddle.net/kongr45gpen/a5Auj/
What you really need to do is simply remove a lot of properties.
You should also set .container to 900px instead of 1000px, because that's how wide all the things inside it are.
You can remove almost all of the instances of float: left and margin.
Block-level elements (such as divs) will by default expand to fill the available width, so you don't need to specify width: 900px so many times. This isn't the behaviour if you float: left an element, but I've removed your instances of it.
So, bearing all that in mind, see: http://jsbin.com/ozemoy. Just one width is being set :)
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.
I need to center a piece of text "main" with another piece of text "sub" sticking out to the right. I don't want both to be centered. Center "main", with "sub" on the right. It doesn't need to work in IE6. I've got it working, but the bottoms of the text don't line up right. I applied the style bottom:.2em and that got it working. But I want to know if there is a more logical way of aligning the bottoms of the text. You can fiddle with it here link text
Update: How can I get rid of the padding around "main" and "sub"? that might help.
<!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>
<style type="text/css">
*{padding:0;margin:0}
.container{
border:thin solid yellow;
text-align:center;
}
.main{
border:thin solid blue;
display:inline;
position:relative;
font-size:4em;
}
.sub{
border:thin solid red;
position:absolute;
left:100%;
font-size:.5em;
bottom:.2em;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
Main
<div class="sub"> (Sub)</div>
</div>
</div>
</body>
</html>
put 3 divs
*{padding:0;margin:0}
.container{
border:thin solid yellow;
text-align:center;
}
.left{
float:left;
}
.main{
border:thin solid blue;
display:inline;
position:relative;
font-size:4em;
float:left;
}
.sub{
border:thin solid red;
position:absolute;
left:100%;
font-size:.5em;
bottom:.2em;
float:left;
}
<div class="container">
<div style="float:left">
</div>
<div class="main">
Main
</div>
<div class="sub"> (Sub)</div>
</div>
add float:left in each divs.