Problems with float in my layout - Please help, I'm desperate.
Regular
Location: Wales
Posted: Sat, 2008-05-17 11:11
Hi
Thanks Hugo for your input. My apologies, I have no excuse for not running it through the validator, and I have learned quite a few things today. I didn't realise that the tag has fallen totally out of use in instances such as this.
I have the pages validating now and still am none the wiser as to why the left column is sitting under the maincol. I had thought that it was to do with the column widths set in the css file, but I have altered those and it doesn't seem to do anything.
http://www.river-rat-cards.co.uk/cards.php
Any help would be appreciated.
Harlequeen 
html, body{
margin:0;
padding:0;
text-align: center;
font-family: verdana, arial, sans-serif;
font-size: small;
}
p {font-size: 0.9em; }
#pagewidth{
min-width:100%;
}
#header{
position:relative;
height:217px;
background-color:#090300;
width:100%;
background: Black url(images/bgline2.jpg) repeat;
}
#leftcol{
width:15%;
float:left;
position:relative;
background-color:#265629;
}
#maincol{background-color: #ffffff;
float: right;
display:inline;
position: relative;
width:80%;
border: 5px;
}
#footer{
height:5%;
background-color:#D3C3CF;
clear:both;
}
img.right {
font-family: verdana;
float: right;
margin-top: 75px;
}
img.left {
font-family: verdana;
float: left;
}
img.border {
border:0;
}
.textred{
color:red;
}
.textblue{
color:blue;
}
.textgreen{
color:green;
}
.textpurple{
color:purple;
}
.textorange{
color:orange;
}
.plaintable {
border: 1px solid orange;
font-size: .90em;
width: 40%;
margin-left: auto;
margin-right: auto;
col: 25%;
}
/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */
/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}and my html is
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2. <html>
3. <head>
4. <title>River Rat Cards - Plastic, Tournament Playing Cards</title>
5. <meta http-equiv="content-type" content="text/html;charset=utf-8">
6.
7.
8. <link rel="stylesheet" href="cards2.css" type="text/css">
9. </head>
10. <body>
11. <div id="pagewidth" class="clearfix" >
12. <div id="header" >
13.
14.
15.
16. <img src="images/rat_z33trans.gif" width="150" height="135" alt="the river rat" class="right">
17. <img class="left" src="images/rrcardslogo2.jpg" width="550" height="217" alt="hands">
18.
19.
20.
21. </div>
22.
23. <div id="maincol" >
24.
25. <p>
26. High quality, large index,
27. plastic, tournament playing cards.
28. </p>
29. Available in 6 back colours: Black,
30. <span class="textorange">Yellow, </span>
31. <span class="textgreen">Green,</span>
32. <span class="textpurple">Purple,</span>
33. <span class="textred">Red,</span>
34. <span class="textblue">Blue</span>
35. <p>
36. <p>
37. <img src="images/black.jpg" alt="black card">
38. <img src="images/yellow.jpg" alt=" yellow card">
39. <img src="images/green.jpg" alt="green card">
40. <img src="images/purple.jpg" alt="purple card">
41. <img src="/images/red.jpg" alt="red card">
42. <img src="images/blue.jpg" alt="blue card">
43. </p>
44.
45.
46. <p>Size:
47. <br>
48. Weight:
49. <br>
50. These cards are perfect for
51. tournament play. They are matt finish so do not slip off each other easily
52. when stacked. </p>
53. <p> Completely washable, they withstand the rigours of spillages
54. and constant handling. </p>
55. Buy NOW !<p>
56. Payment Options:
57. <p>
58. <table border="1" class="plaintable">
59. <tr>
60. <td >PayPal</td>
61. <td> NoChex</td>
62. <td >Personal Cheques <br> (UK Only)</td>
63. <td >Postal Orders<br> (UK Only)</td>
64. </tr>
65. <tr>
66. <td><!-- PayPal Logo -->
67. <table >
68.
69. <tr><td><a href="#" onclick="javascript:window.open('https://www.paypal.com/uk/cgi-bin/webscr?cmd=xpt/cps/popup/OLCWhatIsPayPal-outside','olcwhatispaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=400, height=350');"><img class="border" src="https://www.paypal.com/en_GB/i/logo/PayPal_mark_50x34.gif" alt="Acceptance Mark" width="46" height="32"></a></td></tr>
70.
71. </table>
72. <!-- PayPal Logo -->
73.
74. </td>
75. <td><img src="https://www.nochex.com/logobase-secure-images/nochex_standard_logo_125x35.gif" alt="Nochex - Online Payment Services" width="95" height="32">
76. </td>
77. <td><img src="images/ico_cheque.JPG" width="80" height="40" alt="checques"></td>
78. <td><img src="images/postofficelogo.gif" width="44" height="49" alt="postal orders"></td>
79. </tr>
80. </table>
81.
82. </div>
83.
84.
85.
86. </div>
87. <div id="leftcol" >
88.
89.
90.
91. <a href="http://banner.tnpl.co.uk/cgi-bin/redir.cgi?TNPL247">
92. <img class="border" src="images/125x125_sitandgo.gif" width="125" height="125" alt="The Nuts Poker League" >
93. </a><p>
94. <img src="images/punctuation.gif" width="40" height="35" alt="speech marks">
95. <script src="motivatequote.js" type="text/javascript" ></script>
96. <img class="right" src="/images/punctuationupside.gif" width="40" height="35" alt="speech marks">
97.
98.
99. </div>
100. </body>
101. </html>bringing colour to a dull world
Moderator
Posts: 12314
Joined: 2004-06-06
Location: London
Harlequeen you have to learn
Posted: Sat, 2008-05-17 18:21
Harlequeen you have to learn what it means to validate your markup, either using your own eyeballs or the Firefox html-tidy plugin.
Recognising markup errors is important and they should never be brought to the forum, at the moment it's not reasonable to ask for a solution if the problem is simply caused by mal-formed code, you must fix up the errors thus eliminating them as possible causes, then if the problem exists we can deal with it.
Some of the errors are caused by deprecated tags for the DTD you are using and which I'm sure are not generated by the CSS layout generator - <font> tags must never ever be used they are absolutely deprecated, redundant, defunct in every sense that one can imagine; also there are duplicated IDs which can cause rendering problems.
Fix the page and return and we will deal with any remaining issues.
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me
Regular
Posts: 34
Joined: 2004-07-17
Location: Wales
Made changes
Posted: Sun, 2008-05-18 10:23
I have made the changes required by the validator but have edited my first post to show the code after the changes so as not to make the entry to long for this board.
any help would be appreciated.
Cheers
Harlequeen
bringing colour to a dull world
Moderator
Posts: 12314
Joined: 2004-06-06
Location: London
Tracking errors down is a
Posted: Sun, 2008-05-18 11:21
Tracking errors down is a case of applying some basic debugging processes, one would perhaps remove all child elements taking the layout back to a basic structural level that would allow one to examine things in an uncluttered environment and would clarify where the problem was originating from. Applying backgrounds to elements can help visually ID what's happening. Using tools such as Firebug will also enable you to examine various elements and see just how they are acting.
If you look at the layout you will see that 'pagewidth' is the parent element for both sidebar and content, yet you have closed it before the sidebar is started, thus sidebar is forced below this 100% wide element. Remove one closing div before sidebar starts and place it after sidebar closes and see if things improve.
To be further boring on the subject, this is a good example of how using generated layouts rather than writing ones own can lead to a state where one isn't really 100% familiar with how the layout elements are working and interacting and why it's imperative that one gradually writes ones own structures that one is fully in control of; to some extent anyway.
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me
Regular
Posts: 34
Joined: 2004-07-17
Location: Wales
Thanks
Posted: Sat, 2008-05-24 09:00
Hugo, thanks for your help. I was trying to cobble something together from some already existing pages instead of just starting from scratch. More haste less speed. I appreciate what you say about writing my own structures and will do so in the future. I just don't get enough chance to keep my hand in and end up forgetting what I've learned.
Thanks again.
Harlequeen
bringing colour to a dull world