Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: Float issues

  1. #1
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Float issues

    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

    Here is my CSS

    Code:
    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

    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>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>

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Sorry what do you mean by you can't get your floats to stretch?

  • #3
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Website in Question

    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.

    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>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>

  • #4
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    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; }

  • #5
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 )

    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.

  • #6
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    NVM found a work around to that, just made a repeating BG image.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •