Here is my code,
<!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>[your title]</title>
<style type="text/css">
.a, .b, .c
{
float: left;
}
.b
{
clear: left;
}
</style>
</head>
<body>
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
</body>
</html>
In IE8, firefox, chrome, safari, opera, the output will be:
1
23
However in IE7:
13
2
I have search for solutions two days already... anyone can help?
Cheers,
bGiraffe
<!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>[your title]</title>
<style type="text/css">
.a, .b, .c
{
float: left;
}
.b
{
clear: left;
}
</style>
</head>
<body>
<div class="a">1</div>
<div style="clear: left;"></div>
<div class="b">2</div>
<div class="c">3</div>
</body>
this should fix it
.a, .b, .c { float: left; }
.b { clear: both; }
Or you could use the clearfix technique.
http://www.positioniseverything.net/easyclearing.html
Related
I would like to change the background color in 2n element. I've tested it but the bg-color is still blue:
<!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>nothing here</title>
</head>
<body>
<style type="text/css">
.btn{
height:50px;
width:100%;
background:blue;
margin-bottom:20px;
}
.btn:nth-child(2n){
background:yellow;
}
</style>
<div>
<div class="btn"></div>
</div>
<div>
<div class="btn"></div>
</div>
</body>
</html>
it should be more like :
.btn{
height:50px;
width:100%;
background:blue;
margin-bottom:20px;
}
div:nth-child(2n) .btn{
background:yellow;
}
Because, in each div , there's only one .btn
nth-child works with adjacent element, not nested unfortunately :)
.btn is inside a div.
.btn:nth-child(2n) will work if your HTML structure is as follows:
<div>
<div class="btn"></div>
<div class="btn"></div>
</div>
For your HTML structure, it should be
div:nth-child(2n) .btn {
background:yellow;
}
DEMO here.
here is my test code:
<!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>
*{
margin:0;
paddin:0;
}
.warp{
background:#0F6;
position:relative;
width:100px;
height:100px;
left:50%;
}
.line{
position:fixed;
width:10px;
height:120px;
background:#F00;
}
</style>
<body>
<div class="warp">
<div class="line"></div>
</div>
</body>
</html>
in chrome and ie10 the "line" div is on left side,but in firefox,it stay with div "warp", the "line"
is a "fixed position" div, it should rendered like chrome and ie ,i think.
http://jsfiddle.net/AWdqY/
You can simply define the left property on the element (left: 0).
http://jsfiddle.net/AWdqY/1/
<!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>
<style type="text/css">
body {
margin: 0px; padding:0;
background:url(http://custdemos.com/synverse_portfolio/images/safercab_mobi.png) no-repeat left bottom;
height:100%
}
</style>
</head>
<body>
<div class="do">
X Content
</div>
</body>
</html>
I need to put that background image on body bottom, plz if anybody knows this issue tel me.
You need to give a min height to body. Here is the corrected jsFiddle link. Following is also modified css
body {
margin: 0px;
padding:0;
background:url(http://custdemos.com/synverse_portfolio/images/safercab_mobi.png) no-repeat left bottom;
min-height:500px;
}
What I'm trying to do is have a bootstrap like navbar where the actual navbar is around 960px in the center but have the background color span the entire width of the window.
However, when the window is less than 960px in width, and I scroll, the background doesn't go all the way to the end.
Is it possible to make this happen without having custom rules for max-width(960px)?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<style type="text/css">
#container {
width: 960px;
margin: 0 auto;
}
#nav {
height: 33px;
background-color: #cfcfcf;
}
</style>
</head>
<body>
<div id="nav">
<div id="container">
test
</div>
</div>
</body>
</html>
Thanks in advance!
Edit: Oops. Had an extra in there, though that wasn't the issue.
The height has to be in the inner div (#container).
try
#nav { background-color: #cfcfcf; }
#container {
height:33px;
width:960px;
margin: 0 auto;
}
see http://jsfiddle.net/wYGLj/
You need your nav div to span the entire page.
#nav { width:100%; }
will work in this case.
Your CSS is working as it should. So if you want it to extent the whole length of the screen, create a wrapper to handle that grey element. Like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<style type="text/css">
#wrapper {
width: 100%;
margin: 0;
padding: 0;
background-color: #cfcfcf;
}
#container {
width: 960px;
margin: 0 auto;
}
#nav {
height: 33px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav">
<div id="container">
test
</div>
</div>
</div>
</body>
</html>
I added
body {
min-width:960px;
}
which seemed to fix the problem.
I have problem with width using percentage in Mozilla Firefox.
In Firefox:
In Opera:
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="adminite">
<title>Untitled 2</title>
<style>
#cont {
width:99.8%;
height:125px;
border:1px solid red;
background-color:#1ea1de;
margin: 0px 0px 0px 0px;
}</style>
</head>
<body>
<div id="cont">
</div>
</body>
</html>
A possibility is that you haven't reseted the browser default styles.
Try:
html, body{
margin: 0;
padding: 0;
}
If that's the case, you might benefit from using a reset stylesheet such as this one:
http://meyerweb.com/eric/tools/css/reset/