Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

floated div jumping below

  • 21-07-2009 04:46PM
    #1
    Registered Users, Registered Users 2 Posts: 2,793 ✭✭✭


    Hi,

    I have a container div:
    div.Wrapper
    {
      text-align:left;
      margin-left:40px;
      margin-top:5px;
      min-width:1000px;
      background-color:Transparent; 
      padding:0px;
    }
    

    It contains two floated divs:
    div.NavMenuCol
    {
    	width:200px;
    	float:left;
    }
    
    div.Wrapper .MainContents
    {
      float:left;
      margin-left:5px;
      min-width:790px;
      min-height:500px;
      vertical-align:top;
      padding:0px;
    }
    

    The main content area is variable in width. Most of the time it will be 790px and it looks great, but sometimes it could stretch to 1000px+.

    My problem is that when this happens, the main content div jumps below NavMenuCol.

    Any suggestions on how to prevent this would be great.

    Thanks
    John


Comments

  • Registered Users, Registered Users 2 Posts: 8,488 ✭✭✭Goodshape


    You could try position : relative or position : absolute on the MainContents to set it 200px from the left, regardless of what the menu is doing.

    Though that may well cause other problems.


  • Closed Accounts Posts: 1,200 ✭✭✭louie


    jumping below is usually due to margin settings.

    To solve this, ad another div inside the ".MainContents" with "margin:0px; padding:0px;", change the "min-width" to " fixed "width" and right below the two floating divs ad
    <div style="clear:both;"></div>
    


  • Registered Users, Registered Users 2 Posts: 2,793 ✭✭✭John_Mc


    Goodshape wrote: »
    You could try position : relative or position : absolute on the MainContents to set it 200px from the left, regardless of what the menu is doing.

    Though that may well cause other problems.

    Worked a treat, and without any problems (that I've noticed so far anyway)!

    Thanks to both of you for your help :)


  • Registered Users, Registered Users 2 Posts: 3,782 ✭✭✭Scotty #


    Why are you floating the .Maincontents div? If there are only the two divs inside the container it seems pointless (and it wont wrap under the nav div if you don't float it)


Advertisement