Vanishing borders

HTML & CSS
1

Hi all,
I got myself a problem here. I was going along ok, then I floated something right and my borders on each side vanished.
Would anyone happen to know why?

#wrap
{
	margin: 0 auto;
	width: 800px;
	height: 100%;
	padding: 0 2px;
	border-right: 6px solid #000;
	border-left: 6px solid #000;
}

Here’s my right and left border. It was working, not sure what happened.
Thanks
Dan

I added the 100% height seeing if it would fix it, it didn’t.

2

Hi,

You can’t add 100% height to an element that has padding and borders as it will always be too big to fit. In effect you can’t really use 100% height that way at all anyway so have a look at the CSS faq on 100% height for the reason why :slight_smile:

A floated element will float in the direction you specify but the auto margins will not center it if that’s what you were looking for.

I’m guessing that perhaps you have a floated element inside your container and you are wondering why the borders on the parent container disappears. The reason is that floats are removed from the flow and a container that holds only floats will in fact hold nothing and have zero height.

To get the parent to recognise the float you need a clearing mechanism (see faq on floats) and the simplest is to add overflow:hidden to the parent which makes it take account of so called invisible content like floats.


#wrap{overflow:hidden}

If you need visible overflow then use one of the other clearing methods mentioned in the faq.

I’m guessing that this is your problem but you may need to give more detail if you meant something else:)

3

I have tried the HTML below on FF, IE5.5 to IE8 and it works ok, how are you floating it?


<style>
#wrap
{
  margin: 0 auto;
  width: 800px;
  height: 100%;
  padding: 0 2px;
  border-right: 6px solid #000;
  border-left: 6px solid #000;
  float:right;
}
</style>

<div id="wrap">
Testing
</div>