My css code :
#nav{
width:100%;
padding:0px;
}
.div1{
height: 20px;
width: 137px;
color:white;
background-color:black;
float:left;
}
.div2{
height: 20px;
background-color:red;
}
My html code
<div id="nav">
<div class="div1">test 1</div>
<div class="div2">test 2</div>
</div>
i'd like to put an background image in div1 and div2, and i'd like div2 to be fluid 100%...
I don't understand what is wrongI think floats always have a small whitespace around them.
Either try absolute positioning, or send your background right to the edge of the page using:
body {
margin: 0;
padding: 0;
}
#nav{
background-color:red;
width:100%;
}
.div1{
height: 20px;
width: 137px;
color:white;
background-color:black;
float:left;
}
.div2{
height: 50px;
}Originally posted by DaveSW
I think floats always have a small whitespace around them.
It must be something like that.
i tried to use a SPAN instead of div2 including the background image, but it failed too, there is always a space
see <!-- m --><a class="postlink" href="http://www.*******.com/TestsCss/">http://www.*******.com/TestsCss/</a><!-- m --> for
- simplified sample
- my try with div
- how it should be (with table)
I really don't know how to fix it.have you tried the code above? implemented like this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
#nav{
background-color:red;
width:100%;
}
.div1{
height: 20px;
width: 137px;
color:white;
background-color:black;
float:left;
}
.div2{
height: 20px;
}
-->
</style>
</head>
<body>
<div id="nav">
<div class="div1">test 1</div>
<div class="div2">test 2</div>
</div>
</body>
</html>
It seems ok in IE6, and having seen that it's for a single line, it might work ok for you.Your proposal was working fine but I needed an image in the DIV2 background close to the div1 one.
In the end, I let the color background in the "nav" and add a float:left to the div2, and it works !
Many thanks for the help anyway!No problem! you could also have used the background-position command.<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS2/colors.html#propdef-background-positionLooks">http://www.w3.org/TR/CSS2/colors.html#p ... itionLooks</a><!-- m --> like YAIEQ. No space appears between the divs with FF.
#nav{
width:100%;
padding:0px;
}
.div1{
height: 20px;
width: 137px;
color:white;
background-color:black;
float:left;
}
.div2{
height: 20px;
background-color:red;
}
My html code
<div id="nav">
<div class="div1">test 1</div>
<div class="div2">test 2</div>
</div>
i'd like to put an background image in div1 and div2, and i'd like div2 to be fluid 100%...
I don't understand what is wrongI think floats always have a small whitespace around them.
Either try absolute positioning, or send your background right to the edge of the page using:
body {
margin: 0;
padding: 0;
}
#nav{
background-color:red;
width:100%;
}
.div1{
height: 20px;
width: 137px;
color:white;
background-color:black;
float:left;
}
.div2{
height: 50px;
}Originally posted by DaveSW
I think floats always have a small whitespace around them.
It must be something like that.
i tried to use a SPAN instead of div2 including the background image, but it failed too, there is always a space
see <!-- m --><a class="postlink" href="http://www.*******.com/TestsCss/">http://www.*******.com/TestsCss/</a><!-- m --> for
- simplified sample
- my try with div
- how it should be (with table)
I really don't know how to fix it.have you tried the code above? implemented like this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
#nav{
background-color:red;
width:100%;
}
.div1{
height: 20px;
width: 137px;
color:white;
background-color:black;
float:left;
}
.div2{
height: 20px;
}
-->
</style>
</head>
<body>
<div id="nav">
<div class="div1">test 1</div>
<div class="div2">test 2</div>
</div>
</body>
</html>
It seems ok in IE6, and having seen that it's for a single line, it might work ok for you.Your proposal was working fine but I needed an image in the DIV2 background close to the div1 one.
In the end, I let the color background in the "nav" and add a float:left to the div2, and it works !
Many thanks for the help anyway!No problem! you could also have used the background-position command.<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS2/colors.html#propdef-background-positionLooks">http://www.w3.org/TR/CSS2/colors.html#p ... itionLooks</a><!-- m --> like YAIEQ. No space appears between the divs with FF.