ansaurus

Question

IE6: width or height set to 0px does not work when content inside

Answer 1

+1 A:

Use overflow:hidden if you need the contents to be cut off. Without it, the layout will consider the size of the box to be 0, but the content that doesn't fit will extend outside of its container.

Andrew Vit 2010-09-25 21:15:19

Thanks Andrew for your answer, I should have mentioned it that I have an element inside where I set the `left: - 20px` and if I set it to `overflow: hidden` then the element gets hidden. Can you please give me another solution than this. Thanks again :)

Munim Abdul 2010-09-25 21:24:25

Answer 2

+1 A:

If you want width and height to be 0, then display:none is the usual way to totally hide it.

Jim Leonardo 2010-09-25 21:36:26

Well, I can't use `display:none` as part of it is outside the `div` using `left: -20px`

Munim Abdul 2010-09-26 06:21:50

Answer 3

A:

As I pointed out in the other answer, stuff that doesn't fit in the box will overflow the fixed size unless you hide it. If you can't use overflow:hidden then positioning is another way to do it:

<style>
#box {
  position: relative;
  width: 0; }
}
#box span {
  position: absolute;
  left: -20px;
}
</style>

<div id="box"><span>hello</span></div>

Any element that's positioned using position:absolute is taken out of the document flow and will not affect other elements, including the size of the container, which you can then size to the dimensions you need.

Andrew Vit 2010-09-25 22:35:01

Thanks, yet cannot set width to 0

Munim Abdul 2010-09-26 06:22:27

Answer 4

+1 A:

The actual div does have a width of 0 (you can tell if you put a border around it). If you need the text inside the div to be hidden, but not the other element, I would suggest adding the following css:

#box span {
display: none;
}

Nicknameless 2010-09-27 21:13:05

ansaurus

tags:

views:

answers:

IE6: width or height set to 0px does not work when content inside

related questions