Floating a text area

HTML & CSS
1

I had a long night, and am a bit tired. this could be a simple mistake, but I just cant seem to find it anywhere.

first of all this code works fine in Safari ( on a mac); FF however, seems to drop the TEXTAREA below its label, as if something were clearing it. There doesnt seem to be any clears and the size of the TEXTAREA is small enoughthat it shoudlnt need to drop down as it does in FF.

Any suggestions would be appreciated…

CSS:
body * {margin:0; padding: 0; }
fieldset{border:none}
form { width:30em; background: silver; border-left:12em pink solid; font-size: 15px}
#main, #sidebar, #sb2{padding:1em}
#main p{margin-bottom:.5em}
#main {float: right; width:28em; outline:1px solid #000}
#main p label { display:block; width:6em; float:left ;margin-right: 1em; text-align: right }
#main p textarea, #main p #headline{width:27em}
#sidebar, #sb2{ width:10em;}
#sidebar, #sb2{float: left; margin-left:-12em;clear: left}
.clear{ display: block; clear: both}
#main .sns {padding-left:7em; margin-top:-.25em; margin-bottom: 2em}
#main p.submit{text-align: right; padding-right:1.5em;}

MARKUP:

		<p><label>Headline</label> <input id="headline"></p>
		<p><label>for text area</label> <textarea  name="target" rows="20" id="target" ></textarea></p>
		<p id="styling" class="sns"><span><noscript>Styles are currently unavailable! Please, turn on Javascript.<br></noscript></span>
			<a href="#" onclick="void(applyTag('b', 'target'))">b</a> | <a href="#" onclick="void(applyTag('i', 'target'))">i</a> | <a href="#" onclick="void(applyTag('u', 'target'))">u</a> | <a href="#" onclick="void(applyTag('h', 'target'))">h</a> | <a href="#" onclick="void(applyTag('a', 'target'))">a</a>  |  <a href="#" onclick="void(applyTag('img', 'target'))">img</a>
		</p>
		<p class="sns2 submit"><input type="reset"> <input type="button" value="cancel"> <input type="submit" name="submitButtonName"></p>
	</fieldset>
	<fieldset id="sb2">
		<p>THE SECOND SIDEBARthis is for the second sidebar stuff. it should continue right bellow the main sidebar</p>
	</fieldset>
		<span class="clear"></span>
	</form>
2 

 label {
    display:block;
}

:wink:

3

So, am I man. lol I’ve been up since yesturday working on a project for a client. It sucks! :frowning:

4

thanks… i havent stayed up all night since college. it’s STILL no fun.

i thought i had the labels set as block…already

#main p label { display:block; width:6em; float:left ;margin-right: 1em; text-align: right }

and the mark up copied wrong

it’s been that kind of day

its supposed to be this :

	<form id="FormName" action="" method="get" name="FormName">
	<fieldset id="sidebar">
		<p> this is for the sidebar stuff</p>			
		<p> this is for the sidebar stuff</p>			
		<p> this is for the sidebar stuff</p>			
		<p> this is for the sidebar stuff</p>			
	</fieldset>
	<fieldset id="main">
		<p><label>Headline</label> <input id="headline"></p>
		<p><label>for text area</label> <textarea  name="target" rows="20" id="target" ></textarea></p>
		<p id="styling" class="sns"><span><noscript>Styles are currently unavailable! Please, turn on Javascript.<br></noscript></span>
			<a href="#" onclick="void(applyTag('b', 'target'))">b</a> | <a href="#" onclick="void(applyTag('i', 'target'))">i</a> | <a href="#" onclick="void(applyTag('u', 'target'))">u</a> | <a href="#" onclick="void(applyTag('h', 'target'))">h</a> | <a href="#" onclick="void(applyTag('a', 'target'))">a</a>  |  <a href="#" onclick="void(applyTag('img', 'target'))">img</a>
		</p>
		<p class="sns2 submit"><input type="reset"> <input type="button" value="cancel"> <input type="submit" name="submitButtonName"></p>
	</fieldset>
	<fieldset id="sb2">
		<p>THE SECOND SIDEBARthis is for the second sidebar stuff. it should continue right bellow the main sidebar</p>
	</fieldset>
		<span class="clear"></span>
	</form>
5

Try floating the textarea as well :slight_smile: