/    Sign up×
Community /Pin to ProfileBookmark

Why is there a space between my divs ?

Copy linkTweet thisAlerts:
Apr 08.2004

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

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@DaveSWApr 08.2004 — 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;

}
Copy linkTweet thisAlerts:
@PPierreauthorApr 08.2004 — [i]Originally posted by DaveSW [/i]

[B]I think floats always have a small whitespace around them. [/B][/QUOTE]

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.ifrance.com/TestsCss/ for

- simplified sample

- my try with div

- how it should be (with table)

I really don't know how to fix it.
Copy linkTweet thisAlerts:
@DaveSWApr 08.2004 — 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.
Copy linkTweet thisAlerts:
@PPierreauthorApr 08.2004 — 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!
Copy linkTweet thisAlerts:
@DaveSWApr 08.2004 — No problem! you could also have used the background-position command.http://www.w3.org/TR/CSS2/colors.html#propdef-background-position
Copy linkTweet thisAlerts:
@ray326Apr 08.2004 — Looks like YAIEQ. No space appears between the divs with FF.
×

Success!

Help @PPierre spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...