SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float works in IE, but won't work properly in Firefox (Simple Fix, I'm sure)

    I'm having a content div floating on the right (like a menu), and the content wrapped around it. In IE, the menu floats properly and the content wraps around it properly. However, in Firefox, there is a problem. The menu floats correctly, however the content won't wrap around it - that is, the content stays a fixed width the whole length of the page, as if the menu was that long.

    The following picture shows the problem in Firefox:



    My code is as follows:

    Code:
      <div id="Content_Container">
        <div id="Right_Content">
        //Content here
        </div>
        <div id="Body">
         //Content here
         </div>
      </div>
    Code:
    #Body {
    	padding-right: 20px;
    	background: #FFFFFF;
    	margin-right: 0px;
    	overflow: auto;
    }
    #Content_Container {
    	top: -20px;
    	position: relative;
    	margin: 0 auto;
    	width: 900px;
    	display: inline;
    	overflow: auto;
    }
    
    #Right_Content {
    	width: 235px;
    	float: right;
    	background: #FFFFFF;
    	padding: 10px;
    }

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, IE is probaby just displaying correcty because of haslayout being set (the width). Try this new ruleset
    Code:
    #Content_Container {
    	top: -20px;
    	position: relative;
    	margin: 0 auto;
    	width: 900px;
    	overflow: hidden;
    }
    I removed the display:inline; (probably the cause of the issue) and changed the overflow to hidden
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but I've tried (and now tried again) both of those, and neither changes the look cept a tad, and doesn't fix it.

    I did fix it however, by removing the overflow declaration from #Body. Not sure why I didn't try it before, but it works now!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    When you use overflow on an element it will create a rectangular block to the side of any floated content and won't wrap. It's useful for creating a column that you don't want to wrap around a float.

    Make sure you remove the display:inline (as Ryan mentioned) from your content_container as that needs to be block level.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tlshaheen View Post
    Thanks, but I've tried (and now tried again) both of those, and neither changes the look cept a tad, and doesn't fix it.

    I did fix it however, by removing the overflow declaration from #Body. Not sure why I didn't try it before, but it works now!
    No no, you should keep the overflow property on there. I admit I didn't test my code when I posted but it should have worked . Something is probably going wrong in your site, if you wouldn't mind directing me to a site we could see what's up
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Got the site via PM. Removing display:inline fixes it. As I siad
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you add the Overflow back to #Body (which I removed, its now the same propertys just #Main_Content)? Because adding the overflow back in, and removing the display:inline still yeilds no wrap for me

    Edit: I now have the page so the overflow property is in #Main_Content and the display:inline is removed. If you view in IE, it wraps. In firefox, no wrap.

    thanks for helping with this!

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Your picture in the beginning was a bit confusing. I thought you were asking why is the parent not extending past the floated elements

    To answer your question, Overflow:hidden; needs to be removed from #main_content. That will allow the unfloated #main_content to slide over to the floated right column and have the text under .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats the solution, thank you very much!

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

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