asked on

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.

LZ1

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/

DennisHacker

ASKER

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.

LZ1

Can you post your code here? Or show a live URL?

DennisHacker

ASKER

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.

LZ1

Try adding the following line after the closing </div> tag of the wrapper

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

Open in new window

DennisHacker

ASKER

I added that to the markup, but it didn't seem to have any effect. It's live at the same link as before.

LZ1

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.

DennisHacker

ASKER

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.

LZ1

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.

ASKER CERTIFIED SOLUTION

LZ1

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

DennisHacker

ASKER

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?

DennisHacker

ASKER

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?

LZ1

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?

DennisHacker

ASKER

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.

LZ1

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.

LZ1

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!