PDA

Click to See Complete Forum and Search --> : Why is there a space between my divs ?

PPierre
04-08-2004, 04:12 AM
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 wrong
DaveSW
04-08-2004, 04:20 AM
I 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;
}
PPierre
04-08-2004, 04:52 AM
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 http://www.*******.com/TestsCss/ for
- simplified sample
- my try with div
- how it should be (with table)

I really don't know how to fix it.
DaveSW
04-08-2004, 05:21 AM
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.
PPierre
04-08-2004, 07:54 AM
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!
DaveSW
04-08-2004, 08:35 AM
No problem! you could also have used the background-position command.http://www.w3.org/TR/CSS2/colors.html#propdef-background-position
ray326
04-08-2004, 02:48 PM
Looks like YAIEQ. No space appears between the divs with FF.