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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Divs overlapping. Please help. Been stuck on this all night.

    Heres a link to my problem: http://ajc10.net76.net/spade/ (focus on index page only - i haven't finished changing the menu bar on the other pages, not gonna bother until it works...)

    I'm trying to put the menu bar on the left and not have my content div merge into it when the page is resized (a different size). I want my content centered with the header/logo, and the nav to stay on the left side and not get frisky w/ the content... any help would be appreciated. I've tried different things with position, display, overflow, floats, adding a div to clear stuff... I'm lost, stuck, got a deadline.

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,724
    Thanks
    41
    Thanked 191 Times in 190 Posts
    a few things going on here and something to consider (still pondering a solution, but hopefully this post will help you solve it or someone else help solve if I cannot think of one first)... you set the anchors to float... not really a problem in itself, but in this case unnecessary. (the float would really be if you wanted a horizontal menu)... by doing this you now have removed them from normal flow... in addition you never clear your floats on the parent div, so it collapses... divs are block and unless they are set to a width or removed from normal flow they will occupy as much space as possible... do one of the follow to see what i mean
    Code:
    add to id leftnav overflow:auto;
    or after the <ul> add a clear method...
    (i prefer) <hr style="clear:both; visibility:hidden;"
    after doing this you will force that div to wrap arround it's children and you will see that it pops the other div down...
    now after seeing that my suggested solution would be to set both divs (menu and content) to float:left and then adjust their spacing via margins... I would force a width of the content wrapper using min-width:#px to keep it from shrinking in on itself as the window shrinks and also add overflow:auto to it... remove the <div id="clear> and then add to the footer CSS clear:both;
    see how you make out with that and reply

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • Users who have thanked alykins for this post:

    formidableKitts (11-23-2011)

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi

    Try setting a div for the header. With width 100% and height fixed to height of content.

    Set a div for the left nav with width to the width of 25%, float:left, position :absolute and topSize of headerheight), height 100%.

    Then set a div for the content, width 75% and height 100% and float right.

    Try that.

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,724
    Thanks
    41
    Thanked 191 Times in 190 Posts
    Quote Originally Posted by kinger251285 View Post
    Hi

    Try setting a div for the header. With width 100% and height fixed to height of content.

    Set a div for the left nav with width to the width of 25%, float:left, position :absolute and topSize of headerheight), height 100%.

    Then set a div for the content, width 75% and height 100% and float right.

    Try that.
    A) do not set position absolute.
    B) position:absolute; and float:left; in the same line is counter intuitive. These are not used in conjunction but actually inversely (ie when you use position you do not use float and vise versa)

    (don't know if inversely is the "right" word for it)

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • Users who have thanked alykins for this post:

    formidableKitts (11-23-2011)

  • #5
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hey thank you! I made the changes you suggested, visible here: http://ajc10.net76.net/spade/

    It worked! The only thing I see and I'm not sure how big of a prob this is, but if someone resizes the window or perhaps just started out with a teeny little window, the content gets bumped down below the left nav again.

    I really appreciate your help and any more you are willing to provide!!!

    Thank you again!

  • #6
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,724
    Thanks
    41
    Thanked 191 Times in 190 Posts
    Quote Originally Posted by formidableKitts View Post
    Hey thank you! I made the changes you suggested, visible here: http://ajc10.net76.net/spade/

    It worked! The only thing I see and I'm not sure how big of a prob this is, but if someone resizes the window or perhaps just started out with a teeny little window, the content gets bumped down below the left nav again.
    yeah that was the only thing i was getting stumped on... I think bc I always set my widths and heights (I never do liquid(%|em base) or auto) is why I haven't really seen this happen before and why it is stumping me. try the minwidth method I mentioned in prior post. If the min-width of the wrapper is set to be at least the width of those two divs combined and then also set to have overflow:auto; (or maybe overflow:scroll) it should contain them no prob... remember to flush your cache a lot when making little tweaks so you don't end up seeing cached CSS and scratching your head four hours over something that's been fixed

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • Users who have thanked alykins for this post:

    formidableKitts (11-23-2011)

  • #7
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    it worked! incredibly wonderful you are. changes are up there. thank you and have an awesome thanksgiving!

  • #8
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,724
    Thanks
    41
    Thanked 191 Times in 190 Posts
    Quote Originally Posted by formidableKitts View Post
    it worked! incredibly wonderful you are. changes are up there. thank you and have an awesome thanksgiving!
    ur welcome and u too
    mmmm tryptophan

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #9
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    hmm I dont see anything different...lol still seems to be breaking your layout. Either way, whether it's moving under or being bumped down below, it's not right.

    I think it's because you dont have your leftNav and your content in a containing element.

    Try this shell code I worked up.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #mainContent {
    	width: 960px;
    	margin: 0 auto;
    	background-color: gray;
    	overflow: auto;
    }
    #content {
    	background-color: #EEEEEE;
    	border-radius: 15px 15px 15px 15px;
    	box-shadow: 0 0 15px #333333;
    	color: #222222;
    	font-family: Optima,Palatino,serif;
    	min-width: 600px;
    	overflow: auto;
    	padding: 20px;
    	text-align: center;
    	width: 600px;
    	margin: 40px 50px 50px 50px;
    	
    }
    #leftNav {
    	background-color: #CCC;
    	float: left;
    	width: 200px;
    	margin-right: 25px;
    }
    ul#nav2 {
        font-family: Optima,Palatino,serif;
        font-size: 14pt;
        list-style: none outside none;
        margin-top: 40px;
        width: 200px;
    }
    ul#nav2 li:first-letter {
        font-family: "arial black",sans-serif;
        font-size: 200%;
    }
    ul#nav2 {
        font-family: Optima,Palatino,serif;
        font-size: 14pt;
        list-style: none outside none;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
      <div id="mainContent">
        <div id="leftNav">
    			<ul id="nav2">
    				<li><a href="index.html">Home</a></li>
    				<li class="spade"><a href="sidewalks.html">Sidewalks</a></li>
    				<li class="spade"><a href="patios.html">Patios</a></li>
    				<li class="and">And</li>
    				<li class="spade"><a href="driveways.html">Driveways</a></li>
    				<li class="spade"><a href="etc.html">Etc.</a></li>
    				<li><a href="contact.html">Contact</a></li>
    			</ul>
    		</div>
        <div id="content">Content for  id "content" Goes Here   Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here</div>
      </div>
    </div>
    </body>
    </html>
    I didnt put your header section in, so if you use the code above, you can add all that.
    Teed

  • #10
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    mmmm tryptophan
    I feel like I've already overdosed on that stuff and I haven't touched a turkey yet...lol
    Teed

  • #11
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Quote Originally Posted by formidableKitts View Post
    and the nav to stay on the left side and not get frisky w/ the content... .
    LOL...LOL best line I've heard since I got here!



    not to be a complete troll teedoff, but the left panel needs to be position: absolute; and all that is needed on #content is margin-top: 40px;

    EDIT:
    I digress, re-reading the question, I guess it's more for the lesson than browser consistency
    Last edited by Sammy12; 11-23-2011 at 11:30 PM.

  • Users who have thanked Sammy12 for this post:

    formidableKitts (11-26-2011)

  • #12
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Sammy12 View Post
    LOL...LOL best line I've heard since I got here!



    not to be a complete troll teedoff, but the left panel needs to be position: absolute; and all that is needed on #content is margin-top: 40px;

    EDIT:
    I digress, re-reading the question, I guess it's more for the lesson than browser consistency
    Why would a column need position absolute when it is basically a two column layout? Floats work fine here.
    Teed

  • #13
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    I was posting on behalf of the example you provided.

    The height of the #content will exceed the height of #leftNav, therefore it's background-color will not span the entire height of its parent. Looking at the op, this does not apply. That's a mistake on my part, I merely skimmed through this.

    So I'm guessing you agree that the margins was incorrect


  • #14
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Well, he does have a background image on his div id="container" that masks the left column not exceeding the length of his center column. I just provided enough code to get those two columns to float and not overlap as his issue stated. I guess he hasnt used it though. His issue still remains...
    Teed

  • #15
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    yeah no I was trolling

    Looking at the live link that's not quite right
    oh well the original poster thumbsd it up
    Last edited by Sammy12; 11-24-2011 at 02:58 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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