Guest newbiecss Posted August 28, 2006 Share Posted August 28, 2006 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 Link to comment Share on other sites More sharing options...
[Coyot3] Posted August 28, 2006 Share Posted August 28, 2006 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 Link to comment Share on other sites More sharing options...
kvnmck18 Posted August 28, 2006 Share Posted August 28, 2006 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now