Scott
February 20th, 2006, 01:46
I have this running on my blog and am still working on the styling. I want it to look like frotzed's at http://openswitch.org (he's using tables though). The problem that I am running into is that in Firefox the glass-block div isn't adjusting to the height of the content. It's mostly working on IE7b (although I have a mystery white space at the bottom).
Any ideas? The only attribute I can get to change the div height in FF is "height: 300px;" (which is a fixed and not flexible attribute). I'm afraid that most of my CSS knowledge is trial-and-error.
Here's my CSS
#glass-bottomblock { /* This is the main bottomblock container */
display: block;
width: 780px;
_width: 740px;
padding: 15px 0px 15px 0px; /* Padding is INSIDE the element, and goes TOP RIGHT BOTTOM LEFT */
margin: 0px 0px 0px 0px; /* Margin is OUTSIDE the element */
background: #EDEDED;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
font-family:?Lucida Sans?, ?Lucida Grande?, ?Trebuchet MS?, Arial, Helvetica, sans-serif;
}
#glass-bottomblock h2 { /* The centered titles above the contents */
margin: 0px 0px 0px 0px;
padding: 0px;
text-align: center;
}
.leftcol {
width:220px;
height: auto;
float:left;
position:relative;
padding: 0px 15px 0px 30px; /* Padding is INSIDE the element, and goes TOP RIGHT BOTTOM LEFT */
_padding: 0px 10px 0px 20px;
}
.rightcol {
width:220px;
height: auto;
float:right;
position:relative;
padding: 0px 30px 0px 15px; /* Padding is INSIDE the element, and goes TOP RIGHT BOTTOM LEFT */
_padding: 0px 20px 0px 10px;
}
.maincol {
width:220px;
height: auto;
float: left;
display:inline;
position: relative;
padding: 0px 15px 0px 15px; /* Padding is INSIDE the element, and goes TOP RIGHT BOTTOM LEFT */
_padding: 0px 10px 0px 10px;
background-color: #FFFFFF; /* Temporary so I can see what's going on with the padding */
}
Here's what's in the bottomblock.php file
<?php { ?>
<div id="glass-bottomblock">
<div class="leftcol">
<h2>Latest Comments</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="maincol">
<h2>Latest Posts</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="rightcol">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<?php } ?>