Discussion:
help with cleafloat
(too old to reply)
weiling
2011-02-14 16:37:11 UTC
Permalink
Im working with fixed, 3 column template
I deleted side bar 2 on the left cause i have no use for it
right now, there's an empty black bg right below my content (a little
above my footer), i couldnt remove it
and everynow and then my side bar would float down when i dun have any
content in it yet..

im currently new to dreamweaver, just doing my final year project and
would like thanks for any help

This is my code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of
the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers.
The text is then set to the left aligned default in the #container
selector */
color: #000000;
background-color: #FFF;
}
.thrColFixHdr #container {
width: 780px;
margin: 0 auto; /* the auto margins (in conjunction with a width)
center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the
body element. */
background-color: #000;
}
.thrColFixHdr #header {
background-color: #FED0DA;
background-repeat: no-repeat;
height: 235px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 20px;
}
.thrColFixHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header
div will avoid margin collapse - an unexplainable space between divs.
If the div has a border around it, this is not necessary as that also
avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to
keep the element away from the edges of the div */
}
.thrColFixHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given
*/
width: 175px; /* the background color will be displayed for the
length of the content in the column, but no further */
padding: 0px 10px 0px 10px; /* padding keeps the content of the div
away from the edges */
background-color: #CCC;
height: 400px;
text-align: left;
}
.thrColFixHdr #mainContent {
float: none;
width: 536px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0;
margin-left: 195px;
padding-top: 15px;
padding-right: 20px;
padding-bottom: 0;
padding-left: 30px;
background-color: #FF9;
}
.thrColFixHdr #footer {
padding: 0 2px 0 20px;
background-color: #FFF;
font-family: Tahoma, Geneva, sans-serif;
font-size: 9px;
font-style: italic;
font-weight: lighter;
font-variant: normal;
text-align: right;
}
.thrColFixHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer
will avoid the possibility of margin collapse - a space between divs
*/
padding: 0px 0;
}
.fltrt { /* this class can be used to float an element right in your
page. The floated element must precede the element it should be next
to on the page. */
float: left;
margin-left: 5px;
}
.fltlft { /* this class can be used to float an element left in your
page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element
and should be the final element before the close of a container that
should fully contain a float */
clear:both;
height:0;
overflow: hidden;
visibility: hidden;
background-color: #C63;
}
-->
</style><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* .clearfloat {

clear: both;

}

*/
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top:
30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs
to avoid several bugs */
</style>
<![endif]-->
</head>

<body class="thrColFixHdr">

<div id="container">
<div id="header">
<h1>&nbsp;</h1>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="762" height="47" border="0" cellpadding="0"
cellspacing="0">
<tr></tr>
<tr>
<td align="right" valign="bottom">&nbsp;</td>
</tr>
</table>
</div>
<div id="sidebar1"></div>
<div id="mainContent">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><br class=>
</p>
</div>
<div id="footer">
<p>Copyright &copy; 2011 Sweet Moments All Rights Reserved</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
Duncan Kennedy
2011-02-14 18:46:19 UTC
Permalink
Post by weiling
Im working with fixed, 3 column template
I deleted side bar 2 on the left cause i have no use for it
right now, there's an empty black bg right below my content (a little
above my footer), i couldnt remove it
[snip]
Post by weiling
.thrColFixHdr #container {
width: 780px;
margin: 0 auto; /* the auto margins (in conjunction with a width)
center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the
body element. */
background-color: #000;
}
I think your black background is coming from the above line. Try
removing it if you don't need a black background over the whole area.

Not sure what is happening with the movng side column. Perhaps
something to do with fixed heights going wrong.

Perhaps somebody else will spot it.


I have to say I find it esier to use a separate css file "linked to" the
HTML page rather than embed it in the page code - you can see it all in
a side bar of Dreamweaver - and you can double click an entry and
Dreamweaver will throw up a dialogue to see and change the properties.
(Highlighting an entry shows the properties below the main CSS sidebar.)

If you want a different layout for other pages jus make a css sheet with
a different name and link that to your second or subsequent pages.
--
duncank
Loading...