...
PDA

Float issues

walkities
10-22-2009, 09:32 PM
Hey guys I usually dont have this many problems but was hoping another set of eyes could help out solve the problem as to why I can't get my floats to stretch.

Ultimately if you dont want to look through the code here you can see what the problem is by clicking here (http://www.phrostdesigns.com/develop/websites/blades/)

Here is my CSS

body {
background: #020202 url(../images/wallpaper.jpg) top center no-repeat;
font: 72.5% Trebuchet MS, Courier New, sans-serif;
margin: 0;
color:#f2f2f2;
height: 100%;
}
h1, h2, h3, p, ul {
margin: 0;
padding: 0;
}
ul {list-style: none;}
h2 {
font-size: 1.4em;
line-height: 1.0em;
font-weight: normal;
border-bottom: none;
font-family:Palatino, Georgia, "Times New Roman", Times, serif;
}

img {border:none;}
a {color:#d54a1d; text-decoration:none;}
a:hover{color:#f2f2f2; background:#d54a1d;}

.clear {clear:both;}

#blades-container {width:949px; margin:0 auto; padding:10px 0 0 0;}

/* =========== TOP AD ============= */
.blades-top-ad {width:949px; height:100px; margin:0 auto;}

/* =========== HEADER =============== */
.blades-header {width:949px; height:130px; margin:0 auto;}
.blades-header-left {width:124px; height:130px; float:left; background:url(../images/header-left.jpg) top left no-repeat;}
.blades-header-right {width:825px; height:130px; float:right;}
.blades-title {width:825px; height:60px;}
.blades-title h1 {text-indent:-9999px; background:url(../images/beaverlodge-blades-header.jpg) top left no-repeat; height:60px; margin:0; padding:0;}
.blades-title-proud {width:825px; height: 36px; text-align:right; background:url(../images/proud-bg.jpg) top left repeat-x;}
.blades-title-proud p {padding:10px 10px 0 0; color:#696464; text-transform:uppercase;}
.blades-title-menu {width:825px; height:34px; background:url(../images/menu-bg.jpg) top left repeat-x;}

/* =========== MENU ======================= */


/* =========== SLIDER ================*/
.blades-slider {width:949px; height:290px; margin:0 auto; padding:0; background:url(../images/slider-bg.jpg) top left no-repeat;}
.blades-slider-left {width:495px; float:left; height:290px;}
.blades-slider-right {width:454px; float:right; height:290px;}
.blades-slider-img {width:450px; height:261px; padding: 15px 0 0 27px;}
.blades-slider-txt {width:454px; height:266px;}
.blades-slider-txt h2 {text-transform:uppercase; padding:25px 0 5px 25px; font-size:1.8em;}
.blades-slider-txt p {padding: 25px 0 0 25px;}
.blades-slider-number {width:454px; height:24px;}


/* =========== MAIN CONTENT =================== */
.blades-main-content {width:949px; margin:0 auto; padding:0;}
/* LEFT */
.main-content-left {width:530px; float:left; margin:0; border:#CC0000 1px dashed;}
.main-content-top {width:532px; height:82px; background:url(../images/maincontent-topbg.jpg) top left no-repeat;}
.main-content {width:500px; background:#f2f2f2; color:#000000; padding:0 16px 0 16px; margin:0;}
.main-content-footer {width:532px; height:24px; background:url(../images/mainfooter-bg.jpg) top left repeat-x;}

/* RIGHT */
.main-content-right {width:415px; float:right; border:#FF0000 1px solid;}
.upcoming-game {width:417px; height:116px; background:url(../images/nextgame-bg.jpg) top left repeat-x;}
.previous-game {width:417px; height:134px; background:url(../images/lastgame-bg.jpg) top left repeat-x;}
.sponsers {width:417px; background:#313131; margin:0;}
.local-sponser {width:244px; float:left;}
.big-sponser {width:173px; float:right;}


/* =========== FOOTER ======================== */
.blades-footer {width:949px; height:50px; background:url(../images/footer-bg.jpg) top left repeat-x; clear:both; margin:0 auto;}

And here is my HTML

<!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>Beaverlodge Blades</title>
<link href="css/blades.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="blades-container">
<div class="blades-top-ad">
<img src="images/728x90-ad.jpg" />
</div>


<!-- HEADER -->
<div class="blades-header">
<div class="blades-header-left">

</div>


<div class="blades-header-right">
<div class="blades-title">
<h1>Official Home of the Beaverlodge Blades</h1>
</div>
<div class="blades-title-proud">
<p>Proud Members of the Northwest Junior Hockey League</p>
</div>
<div class="blades-title-menu">
Menu goes here
</div>
</div>

<div class="clear"></div>
</div>
<!--END HEADER-->


<!-- MAINPAGE SLIDER -->
<div class="blades-slider">
<div class="blades-slider-left">
<div class="blades-slider-img">
<img src="images/dummy-img.jpg" />
</div>
</div>

<div class="blades-slider-right">
<div class="blades-slider-txt">
<h2>Title Goes Here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam placerat, tortor et aliquet mattis, dui lorem tristique augue, vitae venenatis arcu massa at lacus. Proin cursus tellus ut tortor gravida porta. Nunc purus leo, mattis vestibulum consectetur pulvinar, hendrerit id felis. Sed faucibus lobortis iaculis. Proin blandit, nisi at lacinia pellentesque, dolor nisl viverra enim, quis vehicula dui augue suscipit massa. Vestibulum elementum purus vitae nibh dictum posuere. Curabitur in sapien lectus. </p>
</div>
<div class="blades-slider-number">
<img src="images/dummy-slider.jpg" />
</div>
</div>

<div class="clear"></div>
</div>


<!-- MAIN CONTENT -->
<div class="main-content-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam placerat, tortor et aliquet mattis, dui lorem tristique augue, vitae venenatis arcu massa at lacus. Proin cursus tellus ut tortor gravida porta. Nunc purus leo, mattis vestibulum consectetur pulvinar, hendrerit id felis. Sed faucibus lobortis iaculis. Proin blandit, nisi at lacinia pellentesque, dolor nisl viverra enim, quis vehicula dui augue suscipit massa. Vestibulum elementum purus vitae nibh dictum posuere. Curabitur in sapien lectus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam placerat, tortor et aliquet mattis, dui lorem tristique augue, vitae venenatis arcu massa at lacus. Proin cursus tellus ut tortor gravida porta. Nunc purus leo, mattis vestibulum consectetur pulvinar, hendrerit id felis. Sed faucibus lobortis iaculis. Proin blandit, nisi at lacinia pellentesque, dolor nisl viverra enim, quis vehicula dui augue suscipit massa. Vestibulum elementum purus vitae nibh dictum posuere. Curabitur in sapien lectus.
</div>

<div class="main-content-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam placerat, tortor et aliquet mattis, dui lorem tristique augue, vitae venenatis arcu massa at lacus. Proin cursus tellus ut tortor gravida porta. Nunc purus leo, mattis vestibulum consectetur pulvinar, hendrerit id felis. Sed faucibus lobortis iaculis. Proin blandit, nisi at lacinia pellentesque, dolor nisl viverra enim, quis vehicula dui augue suscipit massa. Vestibulum elementum purus vitae nibh dictum posuere. Curabitur in sapien lectus.
</div>
<!--END MAIN CONTENT-->

<div class="blades-footer"> <!-- FOOTER -->
Footer information here
</div>


</div><!--END CONTAINER-->


</body>
</html>
Scriptet
10-22-2009, 09:51 PM
Sorry what do you mean by you can't get your floats to stretch?
walkities
10-22-2009, 10:03 PM
Website in Question (http://www.phrostdesigns.com/develop/websites/blades/)

Click that and you might see what I mean. I'd like the left area (white background) where MAIN CONTENT is to stretch down to match the right float that has the skyscraper ad.

I did have a float within the sponsors area. There is a float left where it says local sponsers and the 160 x 600 is a right float. It is cleared with a "div" after, I just want that white background to sretch to match the height of the right float (the one with the ad) and vice versa (having the right float with the ad match the height of the left float with the white background).

Here is the page I updated and Im trying to get fixed.

<!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>Beaverlodge Blades</title>
<link href="css/blades.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="blades-container">
<div class="blades-top-ad">
<img src="images/728x90-ad.jpg" />
</div>


<!-- HEADER -->
<div class="blades-header">
<div class="blades-header-left">

</div>


<div class="blades-header-right">
<div class="blades-title">
<h1>Official Home of the Beaverlodge Blades</h1>
</div>
<div class="blades-title-proud">
<p>Proud Members of the Northwest Junior Hockey League</p>
</div>
<div class="blades-title-menu">
Menu goes here
</div>
</div>

<div class="clear"></div>
</div>
<!--END HEADER-->


<!-- MAINPAGE SLIDER -->
<div class="blades-slider">
<div class="blades-slider-left">
<div class="blades-slider-img">
<img src="images/dummy-img.jpg" />
</div>
</div>

<div class="blades-slider-right">
<div class="blades-slider-txt">
<h2>Title Goes Here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam placerat, tortor et aliquet mattis, dui lorem tristique augue, vitae venenatis arcu massa at lacus. Proin cursus tellus ut tortor gravida porta. Nunc purus leo, mattis vestibulum consectetur pulvinar, hendrerit id felis. Sed faucibus lobortis iaculis. Proin blandit, nisi at lacinia pellentesque, dolor nisl viverra enim, quis vehicula dui augue suscipit massa. Vestibulum elementum purus vitae nibh dictum posuere. Curabitur in sapien lectus. </p>
</div>
<div class="blades-slider-number">
<img src="images/dummy-slider.jpg" />
</div>
</div>

<div class="clear"></div>
</div>


<!-- MAIN CONTENT -->
<div class="blades-main-content">
<div class="main-content-left">
<div class="main-content-top">
</div>
<div class="main-content">
<p>MAIN CONTENT HERE</p>
<img src="images/300x225-ad.jpg" />
</div>
<div class="main-content-footer">
</div>
</div>

<div class="main-content-right">
<div class="upcoming-game">
Upcoming Game
</div>
<div class="previous-game">
Previous Game
</div>
<div class="sponsers">
<div class="local-sponser">
Local Sponsers
</div>
<div class="big-sponser">
<img src="images/160x600-ad.jpg" />
</div>
<div class="clear"></div><!-- CLEAR SPONSERS -->
</div>
</div>

<div class="clear"></div>
</div>
<!--END MAIN CONTENT-->

<!-- FOOTER -->
<div class="blades-footer">
Footer information here
</div>

</div><!--END CONTAINER-->


</body>
</html>
Scriptet
10-22-2009, 10:31 PM
So you want equal height columns? Well you can sort of fake this by pretending they are equal height by just adding a background image which fills the container that the columns are wrapper in.

e.g add .blades-main-content { background: #fff; } to your CSS to sort of see what I mean about faking the background.

More info on the technique: .blades-main-content { background: #fff; }
walkities
10-22-2009, 10:46 PM
Theoretically though using a "clear:both" should have both those floats the same height correct? I've done it a million times before Im sure (been a long day at work :D)

I have fooled around with your suggestion and it does work to a degree, the only problem being that if the content in the left float exceeds the right float I get a white background under the right side, something that probably will possibly happen because there may end up being more info in the main content area.
walkities
10-22-2009, 10:59 PM
NVM found a work around to that, just made a repeating BG image.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum