...

View Full Version : Divs overlapping. Please help. Been stuck on this all night.



formidableKitts
11-23-2011, 03:24 PM
Heres a link to my problem: http://ajc10.net76.net/spade/ (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.

alykins
11-23-2011, 03:44 PM
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


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

kinger251285
11-23-2011, 03:47 PM
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 top:(Size of headerheight), height 100%.

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

Try that.

alykins
11-23-2011, 03:50 PM
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 top:(Size 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)

formidableKitts
11-23-2011, 04:06 PM
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!

alykins
11-23-2011, 04:10 PM
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

formidableKitts
11-23-2011, 04:19 PM
:thumbsup: it worked! incredibly wonderful you are. changes are up there. thank you and have an awesome thanksgiving!

alykins
11-23-2011, 04:21 PM
:thumbsup: it worked! incredibly wonderful you are. changes are up there. thank you and have an awesome thanksgiving!

ur welcome and u too :p
mmmm tryptophan

teedoff
11-23-2011, 04:33 PM
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.


<!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.

teedoff
11-23-2011, 04:35 PM
mmmm tryptophan

I feel like I've already overdosed on that stuff and I haven't touched a turkey yet...lol

Sammy12
11-24-2011, 12:26 AM
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 :thumbsup:

teedoff
11-24-2011, 02:34 AM
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 :thumbsup:

Why would a column need position absolute when it is basically a two column layout? Floats work fine here.

Sammy12
11-24-2011, 03:32 AM
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 :p

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled2-7.png

teedoff
11-24-2011, 03:50 AM
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...:confused:

Sammy12
11-24-2011, 03:51 AM
yeah no I was trolling :D

Looking at the live link that's not quite right
oh well the original poster thumbsd it up

formidableKitts
11-26-2011, 07:25 PM
well it worked well enough for my purposes. this isn't the most artful site, not something I'm putting a ton of time into. just to get by, you know.

formidableKitts
11-26-2011, 07:25 PM
p.s. ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum