Jump to content
Sign in to follow this  
Guest newbiecss

float left

Recommended Posts

Guest newbiecss

Hi I am trying to design the layout for a form using an external css. The float property does not seem to be working in h1.floatleft class. Please see details below:[sTYLE]/***********************************************//* HTML tag styles *//************************************/body{ font-family: Arial, helvetica, sans-serif; color: #333333; line-height: ; margin: 0px; padding: 0px; background-color: #669EB5 ; /*background-image: url(""); background-repeat: no repeat; background-position: right; */ }/************************************//* Header tag styles *//************************************/ h1{ font-family: Arial,sans-serif; font-size: 120%; color: #000000; margin: 0px; padding: ;}h1.floatleft{ float: left; padding: 5px 0px 5px 5px; width: 99%; }h1.bluefloatleft{ float: left ; padding: 5px 0px 5px 5px; background-color:#0000FF; display:block; }h2{ font-family: Arial,sans-serif; font-size: 114%; color: #000000; margin: 10px; padding: 0px;}h3{font-family: Georgia, Minion Web, Palatino, Book Antiqua, Utopia, Times New Roman, serifArial,sans-serif; font-size: 112%; color: #000000; margin: 0px; padding: 0px;}h4{ font-family: Arial,sans-serif; font-size: 100%; font-weight: normal; color: #333333; margin: 0px; padding: 0px;}/************************************//* Header tag styles in blocks <h1 class = "block" > *//************************************/h1.blocka{ font-family: Arial,sans-serif; font-size: 120%; background: ; float: left; color: #000000; margin: 0px; padding: 5px;}/************************************//*masthead container *//************************************//************************************//*BOX container tag styles *//************************************/#text-align : center{text-align: left;margin: 1em auto;width: 50%;}/*this is an IE css hack to centre containers - as they are treated like inline content in IE*//*outer container*/#container { width: 955px; border: 1px solid gray; margin: 10px; background-color: #3399FF; margin-left: auto; margin-right: auto; padding: 10px; }/*top*/#banner { padding: 5px; margin-bottom: ; background-color: #FF0000; }/*left hand column*/#sidebar-a {position: relative; float: left; margin: ; margin-right: ; padding: ; width:50%; background-color: #FFFF00; }/*right hand column*/#sidebar-b { position: relative; padding: ; margin-left: ; float: right; width:50%; background-color:#66FF33; }/*bottom section*/#footer { clear: both; padding: 5px; margin-top: ; background-color: #FF00FF; } /************************************//*Content container tag styles *//************************************/.lhsubbox {position: relative; float: left; margin: ; margin-right: ; padding: 0 0 0 5px; width: 99%; background-color: #FFFF00; border-bottom: 2px #fff solid; }.sidebar {width: auto;}and the html[/sTYLE]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><link rel="stylesheet" href="formlayout.css" type="text/css"></head><body><div style="text-align : center"><!--J.A.L. This is an IE hack to centre a block level element i.e. a DIV. IE treats these as inline content so you are affected by the text align property. This means putting your block/div inside another container and treating like inline content as above -->	  <div id="container"> 	<div id="banner"> 	  <p> 	  <h1>BEACH 2006 </h1>	  <h2>Tuesday 18th November - Saturday 18th November</h2>	  <h3>REGISTRATION FORM</h3>	   </p> </div>	<!--j.a.l. start of left hand container-->	<div id="sidebar-a"> 	 		 <div class="lhsubbox">		  <p><h1 class ="floatleft">Unwaged/Students</h1>		  </p>		 <p>Full BEACH Pass (does not include BEACH Party or Features)</p>		 		 <!--lhsubbox end--></div>		 <!--sidebara div end--></div>	<!--j.a.l. start of right hand container-->	<div id="sidebar-b"> 		 <h1 class = "bluefloatleft"> Waged </h1>		</div>	<div id="footer"> </div>  </div>	</div></body></html>

When I publish in both I.E. and Firefox the line wrapped with this class seems to be more in the middle of the column.Please help!Thanksnewbiecss

Share this post


Link to post
Share on other sites

maybe your problem is here:

 h1.floatleft{float: left;padding: 5px 0px 5px 5px; width: 99%;}

if your h1.floatleft has 99% of page with the object that will appear on the right of h1.floatleft only can have 1% of page width (or other object with).Reduce h1.floatleft width and i supose you will get your problem solved.enjoyPaulo A. Silva

Share this post


Link to post
Share on other sites

Another problem I saw when I looked over that...not sure if it's related...but it's still a problem: under "h1" you don't have a value for the padding.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...