1. Home
  2. Forums Index
  3. Browser Side / CSS 9:00 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

navBar and Content overlapping

         

ab57128

5:07 pm on Jul 12, 2007 (gmt 0)

10+ Year Member



Been searching and working on this for 3 days and am absolutely stumped.
I am using the standard 2colleft_nav.css. We had a small graphic in the navbar and the content was set at width 75%. This worked fine for resizing unless you got the window below 200pixels wide which we figured wouldn't happen. Now we'd like to put a larger graphic 210px wide in the navbar. I need the content to be able to resize without overlapping the navbar and bumping it down on the page.
I set the navbar fixed at 210px, content with a left margin of 220px, or content with 0 margin and padding of 220px left. When I set a px value in the content, it bumps the navbar down no matter how wide the window is. If I use a %, it works but bumps the navbar down when the content text touches the navbar which is entirely possible.
I have used all types of positioning for the navbar. The only way I can get it next to the content while a px margin is set is to use absolute positioning. This then overlaps the siteinfo bar at the bottom.
Basically I can not get the darn navbar to be next to the content with a fixed margin set for the content unless I overwrite the siteinfo bar at the bottom by using absolute positioning for the navbar. If I don't use absolute and set the content with no margin or a % margin, all is fine until I shrink the window below 900px wide. If I set the margin using a definite pixel width, the navbar gets bumped down regardless of how much space is available.

This worked fine with a small graphic
#masthead{
border-bottom: 3px solid #000000;
width: 100%;
background-image: url(images/90thbar2.jpg);
}

#navBar{
margin: 0 79% 0 0;
background-color: #339966;
}

#content{
float:right;
width: 75%;
padding: 1% 3% 0 0;
}

This puts the navbar and content next to each other, resizes well, etc but overwrites the siteinfo at bottom
#masthead{
width: 100%;
background-image: url(90thbar3.jpg);
max-height: 151px;
min-height: 151px;
}

#navBar{
background-color: #666666;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
width: 210px;
top: 151px;
position: absolute;
border-right-width: 10px;
border-right-style: solid;
border-right-color: #000000;
border-bottom-width: 15px;
border-bottom-style: solid;
border-bottom-color: #000000;
}

#content{
float:right;
width: 75%;
padding-top: 0;
padding-right: 3%;
padding-bottom: 0;
padding-left: 230px;
}

This leaves plenty of room on the layout, but still moves the navbar to just below the content

#masthead{
width: 100%;
background-image: url(images/90thbar.jpg);
max-height: 151px;
min-height: 151px;
}

#navBar{
background-color: #666666;
width: 210px;
border-right-width: 10px;
border-right-style: solid;
border-right-color: #000000;
border-bottom-width: 15px;
border-bottom-style: solid;
border-bottom-color: #000000;
margin: 0;
}

#content{
float: right;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
margin-left: 220px;
}

Here's my html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div id="masthead">
...
</div>
<!-- end masthead -->
<div id="content"><span class="style8">90th Infantry Division Preservation Group</span>
<div class="feature">
...
</div>
<div class="story">
...
</div>
</div>
<!--end content -->
<div id="navBar">
<div id="sectionLinks">
<p align="center"><img src="images/sidebar.jpg" width="210" height="145" align="top" /></p>
</div>
<div class="relatedLinks">
...
</div>
<div id="headlines">
...
</div>
</div>
<!--end navbar -->
<div id="siteInfo"><a href="AboutUs.html">About Us</a> ¦ <a href="contacts.html">Contact Us</a> ¦ </div>
<br />
</body>
</html>

I'm checking my results using IE7, IE6 and Firefox 2. I'm using Dreamweaver 9
I may be able to fix things by editing my html, moving navbar above content and using floating. But if possible, I'd like to get away from that as I have ~100 pages to edit, that would have to be done by hand and the info in the navbar changes on each page.

Is there some way I can get navbar and content next to each other without using absolute (or overwriting the siteinfo bar at the bottom)? Other than editing each html, unless that's what I have to do.

Thanks much. Any help will be GREATLY appeciated.
Drew

Marshall

5:27 pm on Jul 12, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Try adding:

"white-space: nowrap" which applies to block level elements to you nav <div>.

Marshall

ab57128

5:44 pm on Jul 12, 2007 (gmt 0)

10+ Year Member



I'm sorry, I'm not getting it right. Where exactly should I put the nowrap?
Inside navbar and/or content doesn't help the blocks and just unwraps the text.
Outside navbar and content makes both go full width and content on top of navbar.

Thanks
Drew

Marshall

5:54 pm on Jul 12, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



It should be applied to the <div> you don't want to wrap.

Marshall

ab57128

6:03 pm on Jul 12, 2007 (gmt 0)

10+ Year Member



Thanks again. Sorry I'm being dense. I'm just having trouble putting it in the correct place. Inside the div, let's the 2 divs still wrap but the text within them doesn't wrap.

I did it the following way and content and navbar go full width with content on top:

#masthead{
}

{white-space:nowrap;

#navBar{
}

#content{
}

}

Again very sorry, don't want to ask for hand holding but I guess I am. I'm assuming it's very simple and I'm just missing it.

Marshall

6:20 pm on Jul 12, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I have to admit I am a little confused as to why you have two #navBar definitions in your post, but I am assuming it's for demo purposes (I am also tired an not thinking clearly). Anyway, you want to put the "white-space:nowrap;" in the <div> you don't want to wrap, e.g.

#navBar {
white-space:nowrap;
/* The rest of your definitions */
}

The only other option that I know of is assign "position: absolute" to the <div>

Marshall

ab57128

6:37 pm on Jul 12, 2007 (gmt 0)

10+ Year Member



Thanks again for the fast reply. Very much appreciated.
yeah, the multiple #navbar(s) are examples of different thing that I have tried.
At least I wasn't missing your suggestion. I did put nowrap inside navbar. navbar was still pushed down below content but the text within navbar was not wrapped then.

Unless anyone has anymore suggestions, I'm just gonna bite the bullet and move the navbar above the content in my html and see what that does. Assuming it works, I'll just edit each html.

Thank you again.

ab57128

1:17 pm on Jul 13, 2007 (gmt 0)

10+ Year Member



Ok, I moved the code in my html to put the navbar above the content. It partially worked. The navbar is composed of sectionlinks, relatedlinks, headlines. The sectionlinks showed up next to my content. The other 2 were pushed down below.
I figured I'd try an easier tack. I used absolute positioning for the navbar, it's right where I want it and never moves. The navbar overlaps the horizontal siteinfo bar at the bottom. I've tried various margins and padding. If I can get the siteinfo bar to move down when it runs into any other element, that would solve my problems.Is there a way I can make the siteinfo never overlap? Or have I made things more difficult using absolute? Can't set the siteinfo bar absolutely as the navbar does change.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 9:00 am May 2, 2026