Can't get rid of space between DIVs

HTML & CSS
1

Help!

I’m laying out my site using CSS Div tags and I can’t get rid of an annoying vertical line between my divs.

I’m using DIV classes to contain 2 DIV tags. and for some reason the divs won’t butt up against each other. There’s this annoying space between them.

I’m not using any margins on my divs so I don’t know what gives.

Here’s a sample of my code:

<!–

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>TEST</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”>
<LINK href=“stylesheet.css” type=text/css rel=stylesheet>
<style type=“text/css”>
<!–
body {
margin-top:5px;
margin-bottom:5px;
}

{margin:0;padding:0;}

.container{
margin: 0 auto;
width:780px;
}

.y{
width:210px;
float:left;
}

.top{
width:780px;
}

#logo{
width:210px;
height:120px;
background:#e0d9cd;
}

#prod_nav{
width:210px;
background:#e0d6cd;
}

#header{
background:#e0d6cd;
height:50px;
width:565px;
}

#main_feature{
background:#cccccc;
width:565px;
height:240px;
}
–>
</style>
</head>
<body>
<div class=“top”>
<div class=“y”>
<div id=“logo”><img src=“”></div>
<div id=“prod_nav”>Product Nav</div>
</div>
<div id=“header”>Header</div>
<div id=“main_feature”>Main Feature</div>
</div>
</body>
</html>

–>

2

Hello

The famous Three pixel jog :smash:

see also FAQ CSS

#header,#main_feature{float:left;}

or a dirty way to get rid of the gap :hush:
without with’s on the containers and a left margin for FF NS Moz OP


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK href="stylesheet.css" type=text/css rel=stylesheet>
<style type="text/css">
<!--
body {
margin-top:5px;
margin-bottom:5px;
}

*{margin:0;padding:0;}

.container{
margin: 0 auto;
width:780px;
}

.y{
width:210px;
float:left;
}

.top{
width:780px;
}

#logo{
width:210px;
height:120px;
background:#e0d9cd;
}

#prod_nav{
width:210px;
background:#e0d6cd;
}

#header{
background:#e0d6cd;
height:50px;
/*width:565px;*/
}
head+body #header,head+body #main_feature{margin-left:210px;}

#main_feature{
background:#cccccc;
/*width:565px;*/
height:240px;
}
* html .x{float:left;}
-->
</style>
</head>
<body>
<div class="top">
<div class="y">
<div id="logo"><img src=""></div>
<div id="prod_nav">Product Nav</div>
</div>

<div class="x">
<div id="header">Header</div>

<div id="main_feature">Main Feature</div>
</div>

</div>

</body>
</html>
3

In your code this:
{margin:0;padding:0;}

Should be this:

  • { margin: 0; padding: 0; }

It should also be your very first rule so it doesn’t override specific rules that come after it.

Different browsers have different default paddings/margins for different HTML elements. Properly using the wildcard rule as I outline above should get all your page elements to be flush and then you can apply individual margins/padding as needed.

On a Windows box the colors are rendered the same regardless of the browser - the issue is with what each browser does allow you to style (or not) with form controls - these implementations are kind of spotty compared to vanilla tags.

This is a great overview of what you can expect to see for form controls that are styled (and unstyled) from different browsers on different OS’es.

4

Hello

:blush: forgot to put it back , testing :weyes:

5

I understand testing - I am going blind from looking at so much code - arggh…squinting…

It also would most commonly come first, as any other rules that come after it will all have to be more specific.

I am sure you will find a great solution.

Cheers!

6

The order doesn’t matter all that much. A rule with a more specific selector will override a less specific one, even if the more specific one comes first. And the universal selector (*) has the lowest specificity of all.

The cascade only comes into play when two rules have the same specificity.

7

I am aware - would you not place it first with the knowledge that every rule you place after it will inherently be more specific? Also, out of habit, the “universal selector” being a great equalizer, it goes first for me, then body, then my first div etc. Ideally I break up my CSS to manage layout, type and color but when it is all in the header and/or external but for a small site I just go in order of occurrence in the page for the most part.

You are absolutely right that it doesn’t matter much if at all really - it matters more on bigger sites with more CSS and multiple contributors and the greater chance for clash - I am just cautious as a result of the experience.

I understand the cascade and the use of the universal selector well, but I appreciate you explaining. In major commercial sites I have worked on with many code contributors (even with CVS - or as some would suggest because of it) I have seen some interesting things happen as a result of the cascade - as I am sure you have :).

8

I was just looking for an answer to this as well and found this forum. This problem only seems to appear with IE. The answer I’ve come up with is to include a “spacer” div between your content divs.

<div id=“content” class=“whatever”>
…
</div>

<div class=“spacer”> </div>

<div id=“more_content” class=“whatever”>
…
</div>

With the CSS for “spacer” as follows:

div.spacer
{
height:2px;
width:10%;
color: #696969;
background-color: #708090;
margin: 0 0;
padding: 0 0;
border: 0;
font: 1px/1px;
}

and, of course, modifying the color, background and height as you see fit.

This doesn’t butt the two divs up against each other completely, but then that is not the effect I was looking for.

9

If a DIV or element only appears once on a page it is generally a good idea to give it and ID not a class - classes are best for buttons and the like where there may be more than one on the page.

Also H1, H2 etc. are headers and don’t need to be a seperate DIV - you can just style it by targeting it like so:
Content h4 { background-color: red; }

Point being, there is no need to recreate the wheel when you already have suitable, semantic HTML tags at your disposal.

Keeping things simple, here is an example that approximates your setup, while getting the nav and content DIVs flush without another, additional “spacer” div which reminds me of spacer.gif’s - the reason to use CSS it so you don’t need code that has no meaning in its context.

10

Argh … clickAgent75 I misread your post. John W has the right idea … the right tool for the job etc. Floating your divs will do the trick; it’s just a matter of finding that right tool within the layout style you are using.

In my case, I WANTED a small horizontal space between my divs and the amount of space allocated by default by IE was just too much. By creating a class with minimal font size/line size and attributing it to an html element (in this case another div) I was able to get a custom amount of space that I could reuse wherever required.