weird CSS problem

[mattreedymcdani]

I can't figure out why one of the columns in the content refuses to obey the text-align, float, or width tags. Everything in the top is OK, I think, it's just the content and the fact that the footer doesn't fit 100% of the container. Here's the temporary location of the site. Any help would be greatly appreciated.

The .css is here.

Thanks!

 

[StephanieCordray]

I can't get the page. Looks like your server is down so I'll try to remember to check it later. Sometimes it's in the code, you can see what's wrong... like maybe some settings in HTML overriding the css code.

 

[mattreedymcdani]

Sorry. Typo. The link's fixed and I added a quick link to the .css. There are probably redundancies in the .css because I've been toying with it so much, trying to fix the problem. I'll go in and clean it up after I solve the problem with the two columns...

 

[StephanieCordray]

The columns are fine but I'd suggest opening up the white space a tad... maybe 20px left to right with 10px between the columns. As far as the footer, I don't think it's a good placement to have it in with the columns. It should really be separate and I think the font is large for links and copyright information... that can be fixed by adding those attributes to the css code for the footer.

You might also want to put a little space between sections of content in those columns... a single line break would be sufficient, really.

divs can be evil creatures, especially if they aren't defined with absolute sizes and positioning. What I see in IE might be totally different from what one would see in firefox or some other browser, but I can see that there is a problem with how it is showing. You might try manipulating the padding attributes for better placement. You have 0 for the left padding, no margins, or any other defining characteristics that help text placement.

Since I don't think it's a good placement for the footer, I'd suggest creating a div outside the container div and see if you get better results. If you're adamant about where it's placed now, then I'd suggest resizing the font for a better fit. There's only so much you can fit into that left over space because the container div has absolute properties (ie. width:600px)

 

[mattreedymcdani]

The footer's not supposed to be where it is. I don't know why it's there. That's one of my problems. That and the fact that the left column refuses to follow any of the rules that the right column follows so diligently...

 

[StephanieCordray]

The reason it shows there is you placed inside the container div in the html.

<div id="footer">

<a href="contact.html">Contact Info</a> | <a href="legal.html">Legal Information & Privacy Statement</a> | <a href="resources.html">Helpful Resources</a> | <a href="servicelist.html">Index of Services</a><br />
&copy; 2006 United International Investigations
</div>

</div> this last tag closes the <div> where you began the body of the page which means everything will be inside that main one which you named "container". Since the divs are all largely undefined, it's going to find the only space available to it within the properties of the container.

Like I said earlier, divs can be evil creatures if not absolutely defined and that's the case here. Your left side divs "unit" really take up 100% of the horizontal space (width) of the container. The text is light so it's really difficult to see unless you look at it for awhile. If you give the divs an absolute size in width and height it might help your problem. Other than that I can suggest instead of using divs without constraints why not place the content in tables and cells that can do pretty much the same thing without allowing all the overlap? You can assign the same classes to tables and cells as to divs.

The only thing I see really off between the left and right columns is one of the small images is not aligned the same as the others and that image is the first on the right. That could be my browser (IE6).

 

[mattreedymcdani]

I'm trying to avoid using tables.

The weird part about the left column is that it won't fit in ANY width. I've tried changing the width just to see what happens. I don't understand why the borders fit the entire width of the container but the text fits in the 50% column.

 

[mattreedymcdani]

Problem solved! I was using <div id=..> when it should've been <div class=..> I feel like such an idiot but I'm glad it's been solved. Thanks for the help.

 

[StephanieCordray]

Problem solved! I was using <div id=..> when it should've been <div class=..> I feel like such an idiot but I'm glad it's been solved. Thanks for the help.

I didn't catch it, either, while looking through the source code, which I did as well as the css link you provided.

Don't feel like an idiot. Things like that happen all the time and sometimes you need a bit of space away from the project to be able to find it. Many times I've crossed similar problems where I'd beat myself up for hours on end because I couldn't find the mistake. I'd take a break and come back to it to find it within a minute or two of looking usually nothing more than a missing tag. It's the small things like that which are easiest to slide past the eyes.

 

[zkiller]

yup, i make mistakes like that all the time and i too beat myself up over them for hours with no results. then i step away for a few hours and come back to it just to find it was a typo or missing slash or something small like that.