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 13 of 13
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Floating DIVs problem

    Hey guys,
    I have two DIV ags inside a parent DIV,
    Something like that:
    Code:
    <div id="Container" style="border:1px solid black;">
      <div id="Left" style="display:block; float:left">Some text here</div>
      <div id="Right" style="display:block; float:right">Some text here as well</div>
    </div>
    If The result is the Left and the Right DIVs are not in the parent div, and the border runs over (actually under) the text of the child DIVs.

    if it makes any diffrence, the child DIVs have some padding and margin values.

    I've attached an image that will hopefully explain the problem better then my words

    Thanks for the help guys.
    Attached Thumbnails Attached Thumbnails Floating DIVs problem-div.gif  

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    I don't understand this either or what the problem is called, but I solved it by putting content below the floated divisions. Namely, a 1 pixel tall image.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Performing as expected. You can try adding overflow:auto; to your parent div. Also, google for "clear floats" for more info.

    The floated divs are removed from the normal flow causing the parent to collapse. IE has a bug which causes it to enclose the divs but this is incorrect behavior. Just be aware of it.

  • #4
    New Coder
    Join Date
    May 2006
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

    Quote Originally Posted by Arbitrator
    I don't understand this either or what the problem is called, but I solved it by putting content below the floated divisions. Namely, a 1 pixel tall image.
    Not working
    The text\image appears on top or below my child DIVs.

    frustradet... :\

  • #5
    New Coder
    Join Date
    May 2006
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by drhowarddrfine
    Performing as expected. You can try adding overflow:auto; to your parent div. Also, google for "clear floats" for more info.

    The floated divs are removed from the normal flow causing the parent to collapse. IE has a bug which causes it to enclose the divs but this is incorrect behavior. Just be aware of it.
    Yippie! Works! :P
    Thanks!
    that did the trick like magic!

    Best regards mate,
    Eli

  • #6
    New Coder
    Join Date
    May 2006
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by The Ace
    Yippie! Works! :P
    Thanks!
    that did the trick like magic!

    Best regards mate,
    Eli
    It works great, in FF, in IE still the same...
    Ahhhhhhhhhhhh...

    Any ideas?

  • #7
    Regular Coder
    Join Date
    May 2005
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    #Container{
    display:table;
    }

  • #8
    New Coder
    Join Date
    May 2006
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Found it...

    Yeap, answering my own question with a little help from google (and drhowarddrfine who told me to google in the frst place ).

    this is the code I used to "clear" my floats:
    Code:
    .clearfix:after {
        content: "."; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;
    }
    
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    /* End hide from IE-mac */
    taken from here: http://positioniseverything.net/easyclearing.html
    nice article as well

    tahnks guys for the help

  • #9
    New Coder
    Join Date
    May 2006
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by CrAzY_J
    Code:
    #Container{
    display:table;
    }
    Isn't display:table; ignored by IE? as far as I know it does...
    If it's not, then I can use the property display:table-row/cell etc'?

  • #10
    Regular Coder
    Join Date
    May 2005
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by The Ace
    Isn't display:table; ignored by IE? as far as I know it does...
    If it's not, then I can use the property display:table-row/cell etc'?
    just add a width.

    http://garyblue.port5.com/webdev/floatdemo.html

    have fun

  • #11
    New Coder
    Join Date
    May 2006
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs down

    Quote Originally Posted by CrAzY_J
    IE says nooooooooo
    Floating DIVs problem-tablecell.gif
    see?
    in FF it looks perfect, but not in IE :\

  • #12
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by The Ace
    Yeap, answering my own question with a little help from google (and drhowarddrfine who told me to google in the frst place ).

    [...]

    taken from here: http://positioniseverything.net/easyclearing.html
    nice article as well

    tahnks guys for the help
    Ah, I remember reading that article awhile back. I had no use for it at the time so I forgot about it though.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #13
    Regular Coder
    Join Date
    May 2005
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by The Ace
    IE says nooooooooo
    Click image for larger version. 

Name:	tablecell.GIF 
Views:	246 
Size:	11.0 KB 
ID:	4495
    see?
    in FF it looks perfect, but not in IE :\
    just add a width.
    You just need to add some width to the div and it will work fine.


  •  

    Posting Permissions

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