Column float problem

@gfauselJun 01.2010

This may not be possible, but worth asking. I have 4 items to float,
left sidebar, center (frameset) and 2 right framesets.

They are laid out in HTML as 1,3,2,4

They have to look like
1|2|3|
1|2|4|

3 and 2 are one form, while 4 is another form.. I tried sneaking 4 on top (1,4,3,2) but did not quite work and kinda silly to have the checkout button on top.

Any ideas??

thanks!

to post a comment

CSS

12 Comments(s) _↴

@aj_nscJun 01.2010 — #As it says in somebody's signature on here - Keep it simple stupid! (I'm not implying that you're stupid, that's just the sig...?)

Instead of thinking that you have 4 items to float, think about it this way, you need a 3 column layout.

Now, all of a sudden, instead of trying to complicated-ly float 4 items to get them in the layout that you want. You just need to float three elements to make three columns - and simply put two items in the last column - one on top of the other.

Does that help you look at your problem from another angle?

@gfauselauthorJun 01.2010 — #Perhaps, but the question is how do you do that?? negative margins??

as of now, the fourth item is correctly in the 3rd column, but displace down by it's size,leaving that lovely blank space there.

thanks for the reply, I have been working too long on this!

@optimus203Jun 02.2010 — #Posting some code would help troubleshoot.

@gfauselauthorJun 06.2010 — #Okay, here is the code, and here are the questions/problems.

In IE 6/7, the right two columns have a space above them. The navbar and columns 2 are set to the same height, and the space above column 2 look slike the amount sticking out at the bottom.

In Firefox, there is no space above, but the same amount of column2 is sticking out. I figured that two columns, same height, should have the same bottom!

If you need any more info, let me know, and thanks for the help.

Glenn

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>45 RPM Search</title>
 <script type="text/javascript">
 <!--
 function MM_displayStatusMsg(msgStr) { //v1.0
 status=msgStr;
 document.MM_returnValue = true;
 }
 //-->
 </script>
 <script type="text/javascript">
 <!--
 function setall(fld,nofld)
 {
 var MyEl = document.getElementById(fld);
 var MyElNot = document.getElementById(nofld);
 MyEl.value = "*";
 MyElNot.value = "";
 document.forms["searchform"].submit();
 return true;
 }
 //-->
 </script>
 <style type="text/css">
 
 <!--
 body {
 padding:0;
 margin:0; 
 height:100%;
 background-image:url(/images/lightpit.jpg); 
 }
 
 #wrapper {
 position:relative;
 border:4px blue dashed;
 width:80%;
 height: 100%;
 margin-right:auto;
 margin-left:auto;
 background-color:#00FF99;
 }
 
 
 
 #header{
 
 position:relative;
 zoom: 1;
 border:1px solid black;
 height:105px;
 
 }
 
 #header img{
 /*position:absolute;*/
 left:20px; 
 
 }
 
 #header h1{
 /*	 position:absolute;
 left:400px;*/
 #top:35px;
 } 
 
 #header .headlist {
 display:block;
 /*	position:absolute;*/
 #top:30px;
 }
 td {
 text-align:center;
 }
 
 #tabletalk{
 text-align:left;
 margin-left:25px; 
 }
 #sidebar{
 border:1px solid black;
 background-color:#000000;
 height:450px;
 float:left;
 width:92px;
 }
 
 #mainNav {
 margin:0;
 list-style:none;
 width:85px;
 padding-left:3px;
 padding-top:10px;
 }
 
 #mainNav a {
 background:#b1b1b1;
 color:#000;
 font-size: 17px;
 text-decoration:none;
 text-align:center;
 padding: 7px 5px;
 border-width:4px;
 border-style:solid;
 border-top-color:#dfdfdf;
 border-right-color: #666;
 border-bottom-color: #333;
 border-left-color: #858585;
 display:block;
 zoom: 1;
 }
 
 #mainNav a:hover {
 font-weight:bold;
 background:#FFFF00;
 border-right-color:#999900;
 border-top-color:#FFFF99;
 border-left-color:#CCCC66;
 border-bottom-color:#666600;
 
 }
 
 #mainNav li{
 margin: 5px 0;
 }
 
 
 
 #FF #FFLink,
 #TT #TTLink,
 #SE #SELink,
 #EP #EPLink,
 #CD #CDLink,
 #SH #SHLink,
 #EM #EMLink,
 #HE #HELink {
 background:#FF0000;
 border-right-color:#990000;
 border-top-color:#FF99CC;
 border-left-color:#FF6666;
 border-bottom-color:#660000;
 background-position: 0 100%;
 font-weight:bold;
 }
 fieldset {
 border:1px solid #CCFFCC;
 background-color:#CCFFCC;
 }
 
 #btn{
 float:right;
 height:350px;
 width:350px;
 }
 
 #ck{
 float:right;
 height:100px;
 width:350px;
 margin-top:-125px;
 }
 
 #srch {
 /*position:relative;
 float:left;*/
 
 /*	padding:0px 95px 0px 360px;*/
 height:450px;
 
 } 
 
 * html body{
 overflow:hidden;
 } 
 
 p .label{
 float:left;
 width: 150px;
 text-align:right;
 clear:left;
 margin-right:15px;
 font-size:80%;
 font-weight:bold;
 }
 
 
 
 #btn .label {
 float:left;
 width: 200px;
 text-align:right;
 margin-right:15px;
 padding-left:20px;
 margin-bottom: 35px;
 }
 
 #ck .label {
 float:left;
 width: 200px;
 text-align:right;
 margin-right:15px;
 padding-left:20px;
 margin-bottom: 35px;
 } 
 
 .butt{
 margin-bottom: 35px;
 }
 
 
 #copyright {
 clear: both;
 text-align:center;
 padding: 0.5em;
 font-size: 0.8em;
 color: #9F9F00;
 font-style: italic;
 }
 
 #artid, #labid, #numid,
 #titid, #pgid, #plid, #psid, #mtype {
 background-color: #FBEF99;
 font-family:"Lucida Console", Monaco, monospace;
 }
 
 #artid:focus, #labid:focus, #numid:focus,
 #titid:focus, #pgid:focus, #plid:focus,
 #psid:focus, #mtype:focus
 {
 background-color: #FDD041;
 }
 
 
 -->
 </style>
 
 </head>
 
 
 
 <body id = "FF">
 <div id = "wrapper"> 

 <div id = "header"> 
 <table width="100%">
 <tr>
 <td width="25%"><img src="/images/newlogo350.gif" height="95px" width= "95px" alt="record"/></td>
 <td width="50%"><h1>45 RPM Records</h1></td>
 <td id="tabletalk" width="25%"><ul class="headlist">
 <li>Blah #1</li>
 <li>Blah blah de blah blah!</li>
 <li>more blah</li>
 </ul></td></tr>
 </table>
 </div> <!--header-->
 
 
 <div id="sidebar"> 
 <ul id="mainNav">
 <li><a href="##45" id = "FFLink">45s</a></li>
 <li><a href="##33" id = "TTLink">33s</a></li>
 <li><a href="##78" id = "SELink">78s</a></li>
 <li><a href="##ep" id = "EPLink">EPs</a></li>
 <li><a href="##cd" id = "CDLink">CDs</a></li>
 <li><a href="##sh" id = "SHLink">Sheets</a></li>
 <li><a href="##em" id = "EMLink">EMail</a></li>
 <li><a href="##he" id = "HElink">Help</a></li>
 
  </ul>
 </div><!--sidebar-->
 
 <form id="subform" action="http://www.timessquarerecords.com/cgi-bin/search2.cgi" method="post" target="_top" name="searchform">
 <input type="hidden" name="Mtype" value="mtype" />
 <input type="hidden" name="pageid" value="45quer.shtml" />
 <input type="hidden" name="cartid" value="cart_id" />
 
 <fieldset id="btn">
 <!--div id = "buttons"-->
 <p><label for="subbut" class="label">Enter data, then click</label>
 <input type="submit"   class="butt"  name="aquiSw2" value="Submit" /></p>
 <p><label for="rebut" class="label">Remove data by clicking </label>
 <input type="reset"   value="Clear"  class="butt" name="reset" /></p>
 <p><label for="newbut" class="label">Click here to see</label>
 <input type="submit"   name="aquiSw"  class="butt" value="New Stuff" /></p>
 <p><label for = "retbut" class="label">Return to the selection page</label>
 <input type="button"   name="return"  class="butt" value="Return" onclick = "location.href='embedID2.cgi?newweb3.htm&cart_id'" /></p>
 
 
 <!--/div--> 

 </fieldset> 
 
 
 <fieldset id="srch">
 
 <!--div id="search"-->
 <p><label for="mtype" class="label">Choose Style</label>
 
   <select name="Mtype" id="mtype">
   <option value="S">*** ALL TYPES ***</option>
   <option value="S0">50s Rock and Roll</option>
   <option value="S2">60s and 70s Rock</option>
   <option value="SH">Acapella Groups</option>
   <option value="SK">Black Vocal Groups</option>
   <option value="SI">Comedy</option>
   <option value="SA">Country/Western</option>
   <option value="S4">Female Group</option>
   <option value="SF">Funk</option>
   <option value="S5">Garage Bands</option>
   <option value="SG">Girl Groups</option>
   <option value="S6">Group Soul</option>
   <option value="SQ">Jazz</option>
   <option value="SD">Pop</option>
   <option value="SR">R&amp;B Instrumental</option>
   <option value="SU">R&amp;B Oddities</option>
   <option value="SN">R&amp;B Vocals</option>
   <option value="S9">R&amp;R Instrumentals</option>
   <option value="SX">Reissues</option>
   <option value="SS">Rockers</option>
   <option value="S3">Soul</option>
   <option value="S8">Surf Vocals</option>
   <option value="ST">Teeners</option>
   <option value="SW">Tributes</option>
   <option value="SL">White Vocal Groups</option>
   </select></p>
   <p>
   <span class="label">To see all, click:</span>
   <label>
   <input name="all" type="radio"  onClick = "setall('labid','artid')" />By Artist</label>
   <label>
   <input name="all" type="radio" onClick = "setall('labid','artid')" />By Label <noscript>(Requires JavaScript)</noscript></label>
   </p>
   <p><label for="artid" class="label">Artist</label>
   <input type="text" name="artist" id = "artid" size="20" maxlength="20" />
   </p>
   <p><label for="labid" class="label">Label</label>
   <input type="text" name="label" id = "labid" size="16" maxlength="16" />
   </p>
   <p><label for="numid" class="label">Number</label>
   <input type="text" name="number" id = "numid" size="10" maxlength="10" /> 
   </p>
 
   <p><label for="titid" class="label">Title or keyword</label>
   <input type="text" name="title" id = "titid" size="26" maxlength="26" /> 
   </p> 
   <p><label for="pgid" class="label">Price: Greater than</label>
   <input type="text" name="pricegreater" id = "pgid"  size="5" maxlength="5" /> 
   </p> 
   <p><label for="plid" class="label">Less than</label>
   <input type="text" name="priceless" id = "plid" size="5" maxlength="5" /> 
   </p> 
   <p><label for="psid" class="label">Equal to</label>
   <input type="text" name="pricesame" id = "psid" size="5" maxlength="5" /> 
   </p> 
 <!--/div--> <!--search--> 

 </fieldset>
 
 </form> 

 <fieldset id="ck">
 <form action="showCart2.cgi" method="post">
 <input type="hidden" name="Mtype" value="S" />
 <input type="hidden" name="cartid" value="cart_id" />
 <input type="hidden" name="pageid" value="45quer.shtml" />
 <p><label for= "donbut" class="label">Finished shopping?</label>
 <input type="submit" class = "butt" value="Check out" /></p>
 </form> 

 </fieldset> 
 <div id="copyright">
 <h3>Copyright notice</h3> 
 </div>
 </div> <!--wrapper-->
 </body>
 </html>
 [/CODE]

@optimus203Jun 06.2010 — #Try fixing these validation errors first. The numbers are the line numbers that errors appear on.

The tag: "td" doesn't have an attribute: "width" in currently active versions. 249

The tag: "td" doesn't have an attribute: "width" in currently active versions. 250

The tag: "td" doesn't have an attribute: "width" in currently active versions. 251

The tag: "form" doesn't have an attribute: "target" in currently active versions. 274

he tag: "form" doesn't have an attribute: "name" in currently active versions. 274

The tag:"input" is not allowed within: "form" It is only allowed within: a, abbr, acronym, address, b, bdo, big, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, h1, h2, h3, h4, h5, h6, i, ins. . .. 275

The tag:"input" is not allowed within: "form" It is only allowed within: a, abbr, acronym, address, b, bdo, big, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, h1, h2, h3, h4, h5, h6, i, ins. . .. 276

The tag:"input" is not allowed within: "form" It is only allowed within: a, abbr, acronym, address, b, bdo, big, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, h1, h2, h3, h4, h5, h6, i, ins. . .. 277

The attribute: onclick does not conform to upper/lower case requirements. 330

The attribute: onclick does not conform to upper/lower case requirements. 332

The tag:"input" is not allowed within: "form" It is only allowed within: a, abbr, acronym, address, b, bdo, big, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, h1, h2, h3, h4, h5, h6, i, ins. . .. 362

The tag:"input" is not allowed within: "form" It is only allowed within: a, abbr, acronym, address, b, bdo, big, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, h1, h2, h3, h4, h5, h6, i, ins. . .. 363

The tag:"input" is not allowed within: "form" It is only allowed within: a, abbr, acronym, address, b, bdo, big, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, h1, h2, h3, h4, h5, h6, i, ins. . .. 364

@gfauselauthorJun 06.2010 — #I don't think those items would affect the placement of columns, would they?? Anyway, the form has worked perfectly for all these years the way it was. All I did was add the CSS stylings to it.

Has something chnaged in the last 13 years that would make it improper for this?

[CODE]   <form action="showCart2.cgi" method="post">
 <input type="hidden" name="Mtype" value="S" />
 <input type="hidden" name="cartid" value="cart_id" />
 <input type="hidden" name="pageid" value="45quer.shtml" />
 <p><label for= "donbut" class="label">Finished shopping?</label>
 <input type="submit" class = "butt" value="Check out" /></p>
 </form>  [/CODE]

@optimus203Jun 06.2010 — #Its always a good idea to have valid markup, but if its been working fine, then no need to fix. What program do you use to write code? Dreamweaver has an option where you can check browser compatability issues. Found a bunch for your markup. I can post if you don't have DW, but DW is extremely helpful in pinpointing potential browser issues, and giving you good explanations as to why and where the errors would occur.

@gfauselauthorJun 06.2010 — #I think I fixed most of those, and I had a fieldset OUTSIDE the form !

I use Dreamweaver CS3.

Some errors the Validator gives are strange. In my JavaScript function there is the "<" sign, for less than, and it says not allowed! Also, placed a NOSCRIPT tag in a text display to add warning text to an input option. Works fine, but it gives me an error.

So you were saying about DreamWeaver offering suggestions??

@optimus203Jun 06.2010 — #That great. So you can go to the Check Page option right next to Validation link. This will show you browser compatability issues with the code, and will provide links on possible solutions. I'm running CS4 so it might be in a different location. For me, the icon is a page with a check box in front of it. I've attached a screenshot. Its the last link on the right that you want to look at.

[upl-file uuid=26c1b087-df6c-4334-95ed-35fe3090b298 size=16kB]Picture 2.png[/upl-file]

@gfauselauthorJun 06.2010 — #Got it. Ran a check, and 90% of the problems were with IE6, but the space over the columns appears in IE7 also.

The other issues were using # for the IE hack and using zoom.

Any more thoughts??

@gfauselauthorJun 06.2010 — #Okay, major find. I gave each fieldset a different background color, and all of a sudden the space above the columns turned purple in FireFox, filling the whole area to the right. However, in IE you couldonly see a thin border-sized line, with the space still above. So, even though I am not floating, aligning, or doing anything with that extra fieldset, it is still displaying. There is no ened to , as this fieldset is for hidden fields which the Validator said must be enclosed in a fieldset.

Does this ring any bells??

@gfauselauthorJun 06.2010 — #Answering most of my own questions here :-) Display:none took care of the hidden fieldset, but still have the problems of the height, etc. Sidebar is 450px height, so is Fieldset #1. There is a space above the top in IE6, IE7 and FireFox. The only difference is that there is no space in the Fieldset above the first line, but there is in FF, and that is the exact same size as the space in IE.

Would posting a link be a good idea???

Also in #CSS _↴

need a frame like w/o frames Problem with WordPress 3.1.1 Posting Display Changing side scroll bar appears in scrollable DIV

Success!

Help @gfausel spread the word by sharing this article on Twitter...

Tweet This

Column float problem

12 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Column float problem

12 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #CSS _↴