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 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2012
    Location
    Singapore
    Posts
    21
    Thanks
    2
    Thanked 1 Time in 1 Post

    Question my right div wraps below my left div :(

    im having some problem with my html when the browser is being resized. the right div will drop below the left navigation div. I've been trying to fix it and only manage to fix IE but seems like the problem still arise after i try to fix the other browsers!

    I cant seem to attach the code here as its too long. Please help me to look at the html text.

    Sorry its a long code. I've added the position absolute to the topcontainer however, in FF and chrome, the left div overlaps the right div as it floats to the left. anyone can help me out?

    Here is the screenshot of how it looks like:
    Attached Files Attached Files

  • #2
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    What I would normally do for this type of layout is have both the nav and right divs inside a "wrapper" div. Then give the nav and right div appropriate widths and then float the nav div left and the right div right. That will stop the right div wrapping under the nav div when the right divs height becomes taller than the nav div and vicky-vercky.

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    I would do what webdev1958 says.

    Do something like this.

    <div class="Wrapper">
    <div class="left-nav">
    <ul>
    <a href="#"> blah blah blah </a>
    </ul>
    </div>
    <div class="right-content">
    <p> haskjdfh klasdjf ;lasjf k;lasjkfdl ;saf</p>
    </div>
    </div>



    And have a set width for your wrapper div, and for your left and right div.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Remove position:absolute from #topcontainer.


  •  

    Posting Permissions

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