• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 637
  • Last Modified:

CSS Properties for Site Text Navigation

Consider the following markup:

<div id="textContainer">
   <div id="textNav">
	<div id="column1">
        </div>
        <div id="column2">
        </div>
        <div id="column3">
        </div>
        <div id="column4">
        </div>	
   </div><!-- textNav -->
</div><!-- textContainer -->

Open in new window


This is intended to be a Text Navigation Panel at the bottom of each page.  The DIV textContainer is supposed to stretch the width of the site, and be a virtual black stripe across the bottom of the site.  The DIV textNav I have set to a width of 1000px (the width of the main container) and in the css, margins left and right set to auto.  Then, each of the column DIVS will have a series of links to outside sources, and pages within the site.

I have a background color of black on the DIV textContainer, which I wanted to provide the black stripe and background for the other divs, that would expand as necessary depending on the content of the inner divs.

When I implemented this, it didn't work.  In Chrome's Element Inspector, the DIV textContainer shows a full site width, but height of 0px.  The DIV textNav shows a 1000px width, and height of 0px.  So, it appears that the contents of the column DIVS aren't having any effect on the container divs.

I'm sure it's positioning relative to each other that is causing my problem, but I'm confused as to the right way to accomplish this.  Any suggestions are appreciated.
0
DennisHacker
Asked:
DennisHacker
  • 9
  • 7
1 Solution
 
LZ1Commented:
So your trying to do columns with CSS?  
I honestly would not try to reinvent the wheel.  Try this link for examples:

http://www.code-sucks.com/css%20layouts/faux-css-layouts/ 

Then here is an example that looks close to what your describing:
http://www.code-sucks.com/css%20layouts/faux-css-layouts/4-column-css-layouts/faux-35-4-col/
0
 
DennisHackerAuthor Commented:
All of my sites are done with CSS layouts now.  I don't consider it "reinventing the wheel" if I'm trying to understand one aspect of CSS layouts.

I looked at the examples you sent me, and none of them accomplish what I'm trying to do.

To reiterate:  I want the DIV textContainer to be the entire width of the monitor;  I want the DIV textNav to be 1000px wide and centered, and the DIV column1, column2, etc. to be contained inside the DIV textNav.

The DIV textContainer is outside of the main wrapper, which is also set to a width of 1000px, if that helps.
0
 
LZ1Commented:
Can you post your code here? Or show a live URL?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
DennisHackerAuthor Commented:
Here is a url with what is uploaded thus far:  http://www.kcusbc.com/test-backup.php

The Text Nav section is at the bottom of the page.

I have tried some things with the CSS, so what is there might not make total sense.
0
 
LZ1Commented:
Try adding the following line after the closing </div> tag of the wrapper

<div style="clear:both;float:left;"></div>

Open in new window

0
 
DennisHackerAuthor Commented:
I added that to the markup, but it didn't seem to have any effect.  It's live at the same link as before.
0
 
LZ1Commented:
You know the div#textContainer is set to 1920px wide? What size monitor are you viewing this on?

I would recommend making that width smaller or at least closer to what your #wrapper is. If your viewing it on a monitor that's smaller than 1920px wide, then it will definitely look off.
0
 
DennisHackerAuthor Commented:
I could probably make this work by just putting a 1000px wide DIV inside the wrapper, and having it just be as wide as the rest of the site.  I really wanted the black stripe all the way across the bottom of the site.
0
 
LZ1Commented:
Ok, I think I have a better idea of what you want. Give me a few and let me see if I can get it for you.
0
 
LZ1Commented:
Try adding this in place of your textContainer and textNav css

div#textContainer {
	clear: both;
	width: 100%;
	float:left;
	background-color: black;
}

div#textNav {
	width: 1000px;
	margin: 10px auto;	
	background-color: black;
	margin:0 auto;
}

Open in new window

0
 
DennisHackerAuthor Commented:
OK.  I took the width parameter off of the div#textContainer.  Now, it should go as wide as any display allows, correct?

What is keeping it from expanding vertically, and adding the black background that I want behind this Site Text Navigation?
0
 
DennisHackerAuthor Commented:
That worked beautifully.  I didn't add the background color and second margin to the div#textNav, but still, it worked.

So, adding the clear: both; and the float: left; attributes to the style on the div#textContainer is what actually accomplished this?
0
 
LZ1Commented:
1. Yes. Just make sure to have width 100% on it
2. Floats aren't being cleared correctly it looks like. Is everything live on the link above?
0
 
DennisHackerAuthor Commented:
I asked one follow up on why this worked, but once my problem was understood, it was a quick fix.  Thanks for all the effort.
0
 
LZ1Commented:
Whoops..........looks like we hit submit around the same time.

Glad it's working. Yes. Clear:both makes sure to clear your floats and the float left I put in there as habit. You can remove it.
0
 
LZ1Commented:
No problem. I would of had this fixed in probably 1 or 2 comments but I didn't fully understand at first. I thought this was an entire site layout, not a section.

Glad we got it!! Thanks for the points!
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 9
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now