Results 1 to 18 of 18
  1. #1
    Join Date
    Nov 2003
    Location
    tampa, fl
    Posts
    326

    CSS layout: floating divs with footer afterwards?

    Hi! I'm very excited as I almost have a design down in CSS that I never thought that I would be able to do without tables. However, I'm having a problem with displaying a footer after a floating div that's driving me crazy. The XHTML and CSS validates. Here is the page in question and css.

    Here is the actual HTML code with the text, images and head removed for easier reading. IE displays it correctly (ironic ) but, the code in bold below is not being displayed after the floated container div #main in Firefox or Opera (correct i'm assuming now). Haven't been able to take a look in Safari or on Konqueror yet. The footer and footer2 are actual hiding behind the floating main div right underneath the main header on these browsers.



    Code:
    <div id="frame">
    	        <div id="headimage">image</div>
    	               <h1>Title</h1>
    		<div id="main">
    			<div class="left-column">
    				<h2>Main Header</h2>
    				<div class="tablebottom-lg"></div>
    				<div>&nbsp;</div>
    
    				<h2>w00t</h2>
    				<div class="tablebottom-lg"></div>
    				<div>&nbsp;</div>	
    			
    				<!--<div class="tablebottom">w00t</div>-->
    			</div>
    			<div class="right-column">
    			
    				<h3>Naviation</h3>
    				<div class="tablebottom">w00t</div>
    				<div>&nbsp;</div>
    				<h3>w00t</h3>
    				<div class="tablebottom">w00t</div>
    			</div>
    		<br />
              </div>	
    
              <div class="footer2">Blue Distortion 2005</div>
              <div id="footer"></div>
    
    </div>
    Any help would be greatly appreciated!

  2. #2
    Join Date
    May 2005
    Posts
    41
    Try adding widths to to those elements in the css.
    < !-- Place sig here //-- >

  3. #3
    Join Date
    Nov 2003
    Location
    tampa, fl
    Posts
    326
    Hi Snokrash, I tried adding the width attribute to both divs and that didn't work, thank you for the suggestion though.

  4. #4
    try position absolute etc etc

  5. #5
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    Try adding clear:both to the footer2 rule

    Code:
    .footer2
            {
            clear:both;
            width:748px;
    }
    If the problem is stemming from the float, that's what you need to clear it.
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  6. #6
    Join Date
    Nov 2003
    Location
    tampa, fl
    Posts
    326
    /Jumps up and down

    Thanks, the PM!

  7. #7
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    Originally posted by recipher
    /Jumps up and down

    Thanks, the PM!
    Glad that did the trick

    If you do end up needing assistance with the header and footer, making them connect to the content area, I have a couple ideas for you...
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  8. #8
    Join Date
    Nov 2003
    Location
    tampa, fl
    Posts
    326
    Awesome, what do you think? If there is an easier / more sound way I will use it.

  9. #9
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    I think it has something to do with setting explicit heights for divs that only contain images. Try setting a height for headimage equal to the height of the graphic in the div. I'll bet that'll help.
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  10. #10
    Join Date
    Nov 2003
    Location
    tampa, fl
    Posts
    326
    Cool, I'll try that out. I think that might help me validate this as XHTML Strict. Thanks for all you help again!

  11. #11
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    Actually, adding particular styles will have no effect on your validation. One is CSS and the other is XHTML. But hopefully it will help you achieve the desired effect anyway
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  12. #12
    Join Date
    Nov 2002
    Location
    Space Coast, FL
    Posts
    160
    I see that you have this fixed now, but there is a much easier way to do all this. Just float everything, and if needed give your divs padding.
    Loading Deck
    Freelance web designer
    XHTML CSS web sites

  13. #13
    Join Date
    Nov 2003
    Location
    tampa, fl
    Posts
    326
    Originally posted by the_pm
    Actually, adding particular styles will have no effect on your validation. One is CSS and the other is XHTML. But hopefully it will help you achieve the desired effect anyway
    Well, I had to add CSS for the header image to validate since it's a link and I couldn't use a border attribute in the actual <img>. I added img {border:0;}. It works in Transitional, but, when I change the doc type to Strict a 3px gap shows up on Firefox (and I'm assuming Opera) underneath the header image div. IE shows it fine.

    Originally posted by Graphicism
    I see that you have this fixed now, but there is a much easier way to do all this. Just float everything, and if needed give your divs padding.
    Thanks for the feedback, I had a lot of problems last night trying to float everything, including the footers. I may give it another try though, thanks.
    Last edited by recipher; 06-09-2005 at 03:53 PM.

  14. #14
    Join Date
    Nov 2002
    Location
    Space Coast, FL
    Posts
    160
    Add img { border: 0px } like that to your CSS.

    The space you are seeing is due to the height of the div, set everything to 100% height.

    Float shouldn't give you any problems, remember width and float left/right.
    Loading Deck
    Freelance web designer
    XHTML CSS web sites

  15. #15
    Join Date
    Nov 2003
    Location
    tampa, fl
    Posts
    326
    Graphicism, thanks for the reply. I did add that before to compensate for removing the boarder attribute from the<img>, it seems to be a bug... I'm looking for a hack now. It only shows up when I user XHTML strict not Transitional (nothing else changes and both validate).

    Even if I get rid of everything else expect the header and h1, the 3px gap still shows up in Firefox.

  16. #16
    Join Date
    Nov 2002
    Location
    Space Coast, FL
    Posts
    160
    Well you have to remember FireFox will be displaying it correctly, IE on the other hand makes it up and is not correct.
    Loading Deck
    Freelance web designer
    XHTML CSS web sites

  17. #17
    Join Date
    Nov 2002
    Location
    Space Coast, FL
    Posts
    160

  18. #18
    Join Date
    Nov 2003
    Location
    tampa, fl
    Posts
    326
    You've got mail!

Posting Permissions

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