www.webdeveloper.com
Results 1 to 3 of 3

Thread: How to prevent overlap between two floating divs

  1. #1
    Join Date
    Jul 2013
    Posts
    55

    How to prevent overlap between two floating divs

    I have 2 divs which float side by side, ex:

    <div id="1"></div>
    <div id="2"></div>

    css

    #1 {float: left}
    #2 {float:right}

    but when i resize the browser size, it become overlap each other. How to make it not overlap?

  2. #2
    Join Date
    Sep 2013
    Posts
    221
    Set a min-width on the containing element.
    Try out with the below example code:

    #container{
    width: 70%;
    min-width: 1000px;
    margin: auto;
    }
    #left {
    float: left;
    width: 20%;
    }
    #content {
    float: left;
    width: 60%;
    }
    #right {
    float: right;
    width: 20%;
    }

    Hope this helps.
    strad solutionswww.stradsolutions.com

  3. #3
    Join Date
    Mar 2012
    Posts
    917
    Floating divs will not overlap unless there is an error in your code. Have you validated it? If so, and if there are no errors reported, we really need to see your code.

    However, as a guess, I'd suggest: try making both divs float left.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles