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.
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
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)
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!!!
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
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.
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
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...
Before you post, read our: 
Size of headerheight), height 100%.
it worked! incredibly wonderful you are. changes are up there. thank you and have an awesome thanksgiving!
