# Solved: Div Tag Auto Space



## marques_uk (Jun 22, 2009)

Hello everyone,

I was wondering if anyone can help me find a solution to my problems?

I have a div class called 'information'. I would like this div tag to have height auto, so in my stylesheet I have set the information accordingly for this to occur. This makes an information box appear when content is inserted.

*.information { width: 190px; height: auto; float: left; background: url(images/test-divide.png) top right no-repeat; 
}*

This works as its supposed to but whats annoying me is that I have a background image which is an image of a verticle line placed on the right side of the information box. But when there is no content I'm left with a small line in the top right still, which I dont want. This is only a problem in Internet Explorer.

How can I get rid of this line when there isn't any content in the box? I tried using a border but it does the same. The only way I've found is setting height to 0px, but then no content shows up when its added. I've noticed that when adding auto as the height in css it leaves a default height of 15px? This show up when I hover over the div in dreamweaver:- Height: auto (15px)?

I've also tried making the height -15px, and changing it to 100%, but no joy

Any help would be great.

Many thanks


----------



## colinsp (Sep 5, 2007)

You don't really need the height tag at all.

As to your problem why not delete the background from your css and add it as an inline style when you have some content to display in the .information div?

The height of 15px that you are seeing is probably the browser default.


----------



## marques_uk (Jun 22, 2009)

Thats perfect, inline style works a treat.

Thank you...


----------



## marques_uk (Jun 22, 2009)

I have another issue, because I'm using padding the inline style still shows up in Internet Explorer when there is no content. 

Below is the complete CSS of exactly how I want the .information div to look.

.information { width: 125px; padding: 0px 32px 0px 33px; float: left; background: url(images/test-divide.png) top right no-repeat; 
}

If I add the inline style outside the .information tag I still get it due to the padding inside, I can add it inside the .information tag which works but I dont get the right positioning because of the padding.

Is there someway of tricking Internet Explorer to behave different and not treat empty div tags as 15px high?

Thanks again


----------



## thingamajig (Mar 5, 2005)

How much control do you have over the html? I assume the content is generated or you could remove the empty div...

I haven't resolved this problem directly but there are ways to fix it depending on situation.

Put everything in a container div and don't set the width of the empty div. e.g.


```
html>
<body>
<style>
.continer {
	width: 300px; 
}
.information { 
	padding: 0px 32px 0px 33px;
	background-color: #666;
	border-right: 2px solid #000;
	float: left;
}

</style>

<body>
<div class="container">
	<div class="information"> Some text goes in here </div>
	<div class="information"><!-- Leave this empty --></div>
	<div class="information"> Some text goes in here </div>
</div>
</body>
</html>
```
Put a comment inside the empty div


```
<body>
<style>
.information { 
	width: 300px;
	background-color: #666;
	border-right: 2px solid #000;
	padding: 0px 32px 0px 33px; 
	float: left;
}

</style>

<body>
	<div class="information"> Some text goes in here </div>
	<div class="information"><!-- Leave this empty --></div>
</body>
```


----------



## marques_uk (Jun 22, 2009)

Thanks thingamajig that works brilliantly. Although how does having two .information divs and leaving one empty work, I can't get my head around it?

Is there a simple explanation, I'm just curious? 

Thanks again


----------



## thingamajig (Mar 5, 2005)

marques_uk said:


> Thanks thingamajig that works brilliantly. Although how does having two .information divs and leaving one empty work, I can't get my head around it?
> 
> Is there a simple explanation, I'm just curious?
> 
> Thanks again


An IE element has a property called "hasLayout" which is read only and either true or false. I've read that it was a patch for problems with their earlier browsers but not sure of it's origin. When you set a width or some layout type of property, hasLayout is set to true and it defaults to one line spacing of height. (Note that you can have line-spacing: 0px but that will get your div's with text as well.)

So, to resolve your problem, you have to find a way to cause hasLayout set to false. You can do that by avoiding any dimension being set for the div that might be empty. Apparently, you can also accomplish this by filling the element with a comment. IE only sees the comment and sets it false. That's not documented but rather a trick discovered accidentally.

Most of the problems with hasLayout that I have read about are for situations where it is set to false. Yours resulted from the fact that your width specification set it true.

I haven't tested this but you might try overriding it with something like this


```
<!--[if IE]>
.information {
   width: 0 !important;
}
<![endif]-->
```
If have control over the code (not completey controlled be a CMS), you could have a class .notEmpty or you could remove an empty element with javascript. It's just useful to know about hasLayout when making adjustments for IE.


----------



## marques_uk (Jun 22, 2009)

Thanks for your explanation, that's solved my headache, least I know for future projects now as well.

Many thanks
Marques_uk


----------

