SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Stopping floats from overlapping

    Hello there, I am trying to create an optional div that when not present, allows the div on the left of it to expand to the full size of the container. However, none of the divs can have a fixed width and the optional div must have a margin for when it's present.

    Here is my CSS:


    <style type="text/css">

    .clearfix:after{
    content:".";
    display:block;
    clear:both;
    line-height:0;
    height:0;
    visibility:hidden;}

    #content{
    margin:0 auto;
    background-color:#669999;
    padding:0;
    border:20px solid #336699;}

    #optional{
    background-color:#00FF66;
    padding:20px;
    float:right;
    margin-left:30px;}

    #left{
    background-color:#FF6633;
    padding:20px;}
    </style>


    Here is the HTML:


    <div id="content" class="clearfix">
    <div id="optional">Optional div here</div>
    <div id="left">Left div here</div>


    </div>

    The problem is that given that #optional is floating to the right, it overlaps the background of #left not allowing for #right's left margin to show through.

    Is there a way to get around this? It is bizarre because although #right overlaps the background of #left, the text actually moves to allow for #right to take the space.

    Go figure CSS

  2. #2
    SitePoint Addict
    Join Date
    Apr 2007
    Location
    Phoenix, AZ
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Welcome to the forums.

    I am not really sure what you are asking. Why would you want an optional container? Is this to be some sort of template?

    And you keep mentioning a #right ID, but it is not defined.

    If you can clarify this a bit, I am sure someone will be along to help.

    Thanks
    Joe

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, sorry, I meant "#optional" instead of "#right" above (got mixed up because it floats to the right).

    It's not quite a template issue, it's simply that if the data is there #optional will appear if not, it won't and #optional floats to the right.

    For this reason I cannot assign a margin to #left or float it left because when #optional is not there it generates a space on the right of it. Therefore the margin needs to be assigned to #optional.

    However, because #optional floats to the right and #left doesn't, its margin has not effect on #left, it's as if #optional is floating inside #left (very much like an image set to float inside a paragraph) which doesn't make sense.

    Does anyone know of a hack around this?

  4. #4
    SitePoint Member
    Join Date
    Mar 2008
    Location
    West Sussex, England
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried adding more padding on the optional div as oppose to a margin? Is your page online anywhere? It would be easier to understand if it was.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No the page has a lot of dependent files and is .NET and I can't run it online that is why I created a shell above in plain html.

    Padding doesn't work because I need the background of #left to show with a gap between itself and #optional when the latter is present.

    cheers

  6. #6
    SitePoint Member
    Join Date
    Mar 2008
    Location
    West Sussex, England
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tupira View Post
    It's not quite a template issue, it's simply that if the data is there #optional will appear if not, it won't and #optional floats to the right.
    I'm still not understanding what you mean, I think you've made a typo here.

    Why not just add a margin to the optional div? If the margin is overlapping then the total width of the div (including margins) is too big, reduce it.

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think that it would probably find it easier to understand if you copy the html above and run it.

    So let me go through it again:

    #left does NOT float at all

    #left has no width assigned to it because it needs to take up all the space if #optional is not there.

    #optional is set to float:right

    #optional does have margin on its left so that we see a gap between #optional and #left

    #left cannot have a margin to the right because if #optional is not there then it will not extend to the full width of it's container

    Because #left doesn't float #optional overlaps its background so you don't see a gap between the two divs regardless of #optional's margin. And that is my problem.

    I hope it's clearer now.

  8. #8
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe the optional div can have a simulated margin?
    The height is to avoid left wrap around.
    Code CSS:
    #optional{
    	background-color:#00FF66;
    	padding:20px;
    	float:right;
    	border-left:30px solid #699;
    	height:100&#37;;
    }
    Remind that optional div will take the whole width if it has fluid content.
    Happy ADD/ADHD with Asperger's

  9. #9
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    Believe me, I tried this one, the problem is that when #left has content which goes beyond the height of #optional, its background continues beyond #optional's border. Also, I need to be able to see the background of #content in the gap between #left and #optional..

    A bit of a headache this one, isn't?

  10. #10
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tupira View Post
    ... A bit of a headache this one, isn't?
    It is IE6 that is the problem,
    Other browsers goes without the extra ie6-div:
    Code CSS:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
     
    #content{
    	border: 20px solid #369;
    	background: #699;
    	height: 100&#37;;  /* for IE6 */
    }
    #optional{
    	float: right;
    	margin-left: 30px;
    	padding: 20px;
    	background: #0f6;
    }
    #left{
    	overflow: hidden;
    	padding: 20px;
    	background: #f63;
    }
    * html #left{
    	float: left;
    }
    #ie6{
    	float: right;
    }
    </style>
    </head>
    <body>
    <div id="content">
    	<div id="optional">Optional div here</div>
    	<div id="left"><div id="ie6"></div>Left div here</div>
    </div>
    </body>
    </html>
    Happy ADD/ADHD with Asperger's

  11. #11
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Erik, you're the man!!!! Display:hidden did the trick, I didn't even have to use the height:100% for IE6! Now that's one to remember, thanks a lot!

  12. #12
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad if it solved the problem.
    Happy ADD/ADHD with Asperger's


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
  •