Issue with adjusting div height.

Hi

I have the following in my site, and for some reason it is not working properly.

CSS

#submitformleft {
    height: auto;
    margin: auto;
    float: left;
	width: 200px;
}

#submitformright {
    height: 100%;
    text-align: left;
    float: right;
	width: 200px;
}

#submitformrow {
    padding-top: 2px;
	padding-bottom: 2px;
    height: auto;
	width: 400px;
}

Code (markup):

HTML

		         <div id="submitformrow">
				    <div id="submitformright">
				    <input type="checkbox" name="anonymous" value="proxies url" />
				    </div>
				 	<div id="submittformleft">
				       <p>I will add a reciprocal link to my proxy site to display higher on proxypot lists:</p>
				    </div>
				 </div>

HTML:

The issue is the checkbox, the div it is in (being submitformright) is set to 100%, however when I rollover in dreamweaver, the height property is showing as 100% (20px). Why it is limiting itself to 20px I don't know, however it is extremely annoying as the text goes underneath the checkbox when over two lines are used. I have this problem in IE7, however it is untested in FF as I am using different style sheets. I tested this code in w3schools live editor, and it works fine, however I can't get it to work in IE7. Any help?

 

Percentage heights only work inside containers that have a fixed metric height, with the exception of body/html. By the specification if you try to use a % height inside a height:auto container, it should be the same as saying height:auto - shrinking to fit it's content.

This is actually why the 'holly hack' to trip haslayout is safe to use 99% of the time, as all browsers will change height:1% to height:auto; so long as the div around it is dynamic height.

Pretty much, because #submitformrow is height:auto - any and all div's inside it trying to use % for height are going to come out as height:auto; If you want #submitformright to return 100% height, you need to set a fixed height (px, em or pt) on #submitformrow.

Which is one of those examples of when DIV's are a total miserable /FAIL/ for columns and why techniques like 'faux columns' exists in the first place.

Also, because you have those two floats there, #submitformrow is NOT even going to have a height in FF/Opera/Safari/standards compliant browsers... and auto is the default behavior for width and height on elements, so you should never have to actually STATE that... and margin:auto on a float makes no sense whatsoever.

... AND if you are wasting time writing COMPLETE different stylesheets for different browsers, /FAIL/ hard in the first place. There's no reason you can't write CSS/markup that works fine in all modern browsers (IE7/FF/Opera/Safari) and then throw a few fixes at IE6/earlier... Which is why one should test against ALL of those AND IE6 WHILE writing the page. Alt-tab, F5, Alt-tab, F5.

Of course, 99% of your problem is right here:

Using the WYSIWYG part of Dreamweaver is a total miserable /FAIL/ - do yourself a HUGE favor, pitch that steaming pile in the trash, and go get a regular text editor like Crimson, NotePad++, EditPlus, etc, etc... you want to verify how it looks, check in the actual browsers and not that crap Dreamweaver browser pane. You want element identification, get the firebug plugin.

 

Thanks for the help. It actually turned out to be a typo, of all things. In my html I wrote the id as "submittformleft" with a double t. As for your comment on dreamweaver, I agree with you that it is horrible at displaying the html, however I find that it works fine for everything else, and I am quite used to it for site management.