Log in

View Full Version : Div not collapsing to fit contents


sneamia
07-26-2007, 05:08 PM
I have a slight problem with a div in Opera. Here is the HTML:



<div id="sidebarcol1">
<div id="side1row1">Account value</div>
<div id="side1row2">Account funds</div>
<div id="side1row3">Open P/L</div>
<div id="side1row4">Today's P/L</div>
</div>


Here is the CSS:



*{
float:left;
display:inline;
}

...

div#sidebarcol1{
color:#898989;
position:relative;
margin:12px 0px 0px 10px;
border:1px solid #f00; /* For Testing */
}

div#sidebarcol1 *{
clear:left;
text-align:right;
font-weight:bold;
margin:3px 10px 0px 0px;
border:1px solid #00f; /* For Testing */
}


As you can see, this is a column of data with four rows inside. I put a border around the rows and I can see that the column expands in width to fill its container instead of contracting to fit the rows. Is there any way for me to get around this? What am I doing wrong?
jscheuer1
07-26-2007, 05:42 PM
body * {
float:left;
}

div#sidebarcol1 {
color:#898989;
margin:12px 0px 0px 10px;
border:1px solid #f00; /* For Testing */
}

div#sidebarcol1 * {
float:none;
text-align:right;
font-weight:bold;
margin:3px 10px 0px 0px;
border:1px solid #00f; /* For Testing */
}
sneamia
07-26-2007, 05:55 PM
Hmm... I guess I'll try star html hacking it instead of deleting it entirely.

EDIT: Nope, that doesn't seem to be the problem. I star-html hacked it - no change. I tried commenting it - no change. Is there a way to explicitly tell it to collapse?
jscheuer1
07-26-2007, 06:00 PM
Why hack? The above css, coupled with your HTML code looks identical in IE 7 and 6, Opera and FF when used on a valid page with at least a:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

DOCTYPE.
sneamia
07-26-2007, 06:05 PM
I only use the display:inline; for IE 6 anyway, which is why I star html hacked it to prevent other browsers, namely Opera, to pick up on it.

Getting rid of the position:relative; (it was a relic from when I tried to use absolute positioning on its child elements) didn't affect the bug either.

Btw, I'm working with a XHTML 1.1 doctype.
jscheuer1
07-26-2007, 06:09 PM
XHTML has its own issues that I will leave to others to expound upon (both pro and con), but as long as it puts all of the browsers in standards or 'near standards' mode, it should be fine for this.

There was no * html hack in your original posted css.
sneamia
07-26-2007, 06:11 PM
I'm in standards compliant mode, and Opera is still giving me this bug.

And yea, I said I would try star html hacking it to hide it from Opera, because you said that deleting it would fix it, so instead I star html hacked it.
jscheuer1
07-26-2007, 06:21 PM
You cannot get any more standards compliant than this:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body * {
float:left;
}

div#sidebarcol1 {
color:#898989;
margin:12px 0px 0px 10px;
border:1px solid #f00; /* For Testing */
}

div#sidebarcol1 * {
float:none;
text-align:right;
font-weight:bold;
margin:3px 10px 0px 0px;
border:1px solid #00f; /* For Testing */
}
</style>
</head>
<body>
<div id="sidebarcol1">
<div id="side1row1">Account value</div>
<div id="side1row2">Account funds</div>
<div id="side1row3">Open P/L</div>
<div id="side1row4">Today's P/L</div>
</div>
</body>
</html>

It is identical in all of the browsers I mentioned.
sneamia
07-26-2007, 06:28 PM
My bad, I didn't see that you changed it to float:none;. Why does it do that? I don't see why floating it makes it push the next div off the row.
jscheuer1
07-26-2007, 07:02 PM
I can't really say for sure. The way I approached this and approach most things like this is to just get rid of everything that looks like it either does nothing and/or that might be a problem.

The position:relative; didn't do anything one way or the other. You don't want to display:inline; if you want your lines to wrap after each div, but, you cannot float if you want to wrap after each div. Clearing only takes care of getting past a previous float, it doesn't prevent a subsequent float.

You don't need to float:left; the body * selector, unless that is used by the rest of the page. You could apply that style just to the div#sidebarcol1 selector. Since you are selecting by id, you do not need to (if you have a valid page) specify the div element. Since it is really only the inner div's that the second style block below applies to, it would be good to specify that, in case you decided to nest another element, like a span in there someplace:

The entire css could then be simplified:


#sidebarcol1 {
float:left;
color:#898989;
margin:12px 0px 0px 10px;
border:1px solid #f00; /* For Testing */
}

#sidebarcol1 div {
text-align:right;
font-weight:bold;
margin:3px 10px 0px 0px;
border:1px solid #00f; /* For Testing */
}


Opera is generally thought to be more compliant than either FF or IE, but it could have this one thing wrong. As I say, I cannot be sure. I don't code the browsers. I just code for them. BTW, I checked in Safari 3 Win, and the code I wrote before, and this simplified version looks the same there as in the rest of them.
sneamia
07-26-2007, 07:18 PM
Yea, I see. Thanks, I'll keep that in mind next time. One of the problems is that I'm on a Mac at work, so I don't have any recent versions of IE to test with. And I include the display:inline; in a star html hack because of the doubled margins IE 6 bug.