Solved: CSS border problem

[colinsp]

I have a container div and inside it I have two column divs. The left hand column is always likely to be shorter than the right hand column (the right hand column content is dynamic). I have a border round the right column that displays correctly but if I put a border round the lh column it is too short and looks odd. I have tried putting a border on the container div and it is not visible.

Is it a z-index problem or something else? (IE7 displays the border properly but no other browser does )

Also the layout is totally screwed up in IE6 but fine in FF, Opera, Safari, IE7 and Chrome. Any thoughts on this too would be great.

The page that I am trying this on is here

 

[tomdkat]

I have a container div and inside it I have two column divs. The left hand column is always likely to be shorter than the right hand column (the right hand column content is dynamic). I have a border round the right column that displays correctly but if I put a border round the lh column it is too short and looks odd. I have tried putting a border on the container div and it is not visible.

Is it a z-index problem or something else? (IE7 displays the border properly but no other browser does )

Here is the definition of the "container" class:

.container {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color:#B6D0B0;
	background-position: center top;
	/*min-height:850px;*/
	height: auto;
	width: 985px;
[b][color=red]	border: thin solid #9EB874; [/color][/b]
	position: relative;
	visibility: visible;
	position:relative;
	margin:0 auto;
	padding:0 0 0 0;
	text-align:left;
[b][color=red]	border-left:1px solid #9EB874;
	border-right:1px solid #9EB874;
	border-top:1px solid #9EB874;[/color][/b]
}

Try removing the border-left, border-right, and border-top style rules and see what happens.

Also, I notice the "page" DIV doesn't have the same width as the DIVs above it. The border on the right side of "page" DIV misaligns with the DIVs above it.

Also the layout is totally screwed up in IE6 but fine in FF, Opera, Safari, IE7 and Chrome. Any thoughts on this too would be great.

I'm sure you're familiar with my "IE sucks" comments and I might have posted here that IE7 sucks less than IE6 since IE7 supports web standards better than IE6. You will either need IE6 specific CSS styling to get IE6 to behave or redo the layout from scratch, making sure your changes work in IE6 as well as the other browsers you mention.

Peace...

 

[colinsp]

Thanks for the ideas, I have removed the border left, right and top and still no different.

The page div is 965px the same as the rest (or it is now, maybe I spotted that and changed it yesterday after you had looked).

IE6 now seems to be behaving itself but it isn't quite as I want it so I will have to put some specific IE6 code in

 

[colinsp]

I have done some more work on this and got it working acceptably in IE 6&7.

I think I have found the problem but I don't know how to fix it for the other browsers.

The container div is not growing in height to contain the other div's. If I set a min-height then that is being taken as a max-height by FF etc. Is it something to do with the nesting of the divs? Probably not as the container div is the first div called and the last one closed.

Any thoughts most welcome.

 

[tomdkat]

The container div is not growing in height to contain the other div's. If I set a min-height then that is being taken as a max-height by FF etc. Is it something to do with the nesting of the divs? Probably not as the container div is the first div called and the last one closed.

Nope, it's not the DIV nesting and Firefox isn't treating min-height as max-height. It's the floating of the col1 and col2 DIVs, I believe. Your structure is basically like this:

<div class="container">
<div class="page">
<div class="col1">
....
</div>
<div class="col2">
....
</div>
</div> <!-- page -->
</div> <!-- container -->

Now, since col1 and col2 are both floated to the left, they are dropped from the normal "flow" of the page DIV. As a result, the page DIV won't have the desired height you want and col2 appears to "spill over". At least this is what I think is happenining.

Try adding a DIV to the end of the page DIV or the container DIV, like this:

<div class="container">
<div class="page">
<div class="col1">
....
</div>
<div class="col2">
....
</div>
<div style="clear:both"></div>
</div> <!-- page -->
</div> <!-- container -->

That should force the page DIV to have the desired height and everything else should fall into place. Let me know what that does.

Peace...

 

[colinsp]

Brilliant.

That worked fine and in fact I now don't need the page div either it displays properly.

Talk about not seeing the wood for the trees.

 

[tomdkat]

Great! Glad that worked out. I can't take credit for the "clear: both" DIV since that's been posted on this forum by others in the past and I learned about that here.

Peace...

 

[colinsp]

Thanks once again. I will remember that "clear: both" for future reference.