Forum Moderators: not2easy

Message Too Old, No Replies

unruly columns

css problem

         

mattreedy

1:12 am on Jan 1, 2007 (gmt 0)

10+ Year Member



I don't know what the problem is. I've designated my content space into 2 columns, the right one obeys me. The left one refuses to follow the rules. I don't know what the problem is. As far as I can tell they're identical in the .css and I checked for a <div> that was left open... I just don't know what it is.

That and the footer won't fill the container.

I had it all working great until I realized that it wasn't IE compatible so I went around repairing that problem and opened the door to several more...
I appreciate any help/advice anyone can provide.

Thanks.

[edited by: encyclo at 2:09 am (utc) on Jan. 1, 2007]
[edit reason] no URLs please, see TOS [webmasterworld.com] [/edit]

penders

5:14 pm on Jan 1, 2007 (gmt 0)

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



I don't know what the problem is....

hhhmmm, me neither! If you paste your HTML/CSS we can have a gander... :)

mattreedy

6:59 pm on Jan 1, 2007 (gmt 0)

10+ Year Member



No URLs? OK, here's the lengthy html and css...
________________________________________
________________________________________
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>· United International Investigations · Local · Worldwide ·</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<link href="text.css" rel="stylesheet" type="text/css"/>

</HEAD>
<BODY>

<div id="container">
<h1>United International Investigations</h1>
<div class="topr">

<h2>Fast, Accurate, Professional Results...</h2>

<p class="blue">
United International Investigations is an experienced private investigations firm with a reputation for integrity, dependability, and thoroughness, which can provide you with a broad range of investigative assistance. Corporations, law firms, and prominent individuals have relied on United International Investigations to gain control over their particular situations.
</p>
<p class="mini">
<a href="resources.html">Helpful Resources</a><br />
<a href="servicelist.html">Index of Services</a><br />

<a href="legal.html">Legal & Privacy Statement</a><br />

</p>
</div>
<div class="topl">
<p class="sub" style="padding:40px 0px 0px 5px;">
Providing a balance in today's volatile world.
</p>
<div class="leftmenu">

<a href="personal.html">Personal Services</a><br />
<a href="business.html">Business Services</a><br />
<a href="collection.html">Legal and Collection Services</a><br />
<a href="security.html">Security Services</a><br />
<a href="contact.html">Contact Us</a>
</div>

</div>
<div class="right">
<div class="unit">
<img src="images/3im2.jpg" alt="Surveillance Ops" />
<div class="title">
Surveillance Ops
</div>
<div class="description">
<p>

Most people, when they think of surveillance and private investigators, think only of the typical "domestic" case involving suspicions of a "cheating" spouse.<br /><br />
However, surveillance can be an effective means of gathering information and proving allegations in many other types of cases. A well-executed and thoroughly planned surveillance often yields beneficial results to our clients while preserving the integrity of the investigation.<br /><br />

Investigators at United International Investigations are highly trained and experienced in surveillance techniques. We use a variety of tactics and techniques. In addition, we have the resources and personnel to perform the best surveillance to achieve the best results at a cost-effective price.
</p>
</div>
</div>
<div class="unit">
<img src="images/3im6.jpg" alt="Business Support" />

<div class="title">
Business Support
</div>
<div class="description">
<p>
United International Investigations can help you make smart business and personal decisions. Our customized research and investigations provide detailed and accurate information. We can provide research on privately held companies, international organizations, hidden business units of major corporations, and elusive business executives. Information can be obtained regarding critical vendors, corporate mergers, competitors and business partners. Research and investigative methods employed by United International Investigations are legal, ethical and very effective. We conduct all research without revealing our clients' identity or interests.
</p>
</div>
</div>
<div class="unit">

<img src="images/5im2.jpg">
<div class="title">
Domestic Issues
</div>
<div class="description">
<p>
NEED HELP IN YOUR DOMESTIC AFFAIRS? Have you just met Mr. or Ms. Right? Shouldn't you find out if this new presence in your life is really the person he or she claims to be before making a serious financial or life-long commitment? Wouldn't you feel safer knowing the background on the nanny you want to hire to care for your precious child? Can you trust the workers at the daycare center where you drop off your child each morning? Are you trying to locate your real father or mother, searching for a lost relative or needing to get back in touch with an old friend who has vanished? Has that wandering deadbeat dad disappeared on you to avoid paying child support to his son or daughter? Has your tenant just skipped out owing seven months rent? Do you need to locate assets to collect on a judgment the court has awarded you? Are you suspicious that your husband, wife or lover may be cheating on you?
</p>
</div>
</div>

</div>
<div id="left">
<div class="unit">
<img src="images/2im3.jpg" alt="Experience" />
<div class="title">
Experience
</div>
<div class="description">
<p>

United International Investigations is unmatched in the information field. We specialize in obtaining accurate information. Information is power, and this is what we can provide to our clients - the power to assist them with almost any case or situation. Our information services are available nationally and internationally, and are utilized daily by attorneys, small and large businesses and corporations, individuals, and other investigative companies.
</p>
</div>
</div>
<div class="unit">
<img src="images/2im1.jpg" alt="Due Dilligence" />
<div class="title">
Due Diligence
</div>
<div class="description">

<p>
The need to maintain a competitive edge in the marketplace heightens the importance of intelligence and research activity. Through the proper utilization of intelligence and research operations, your company can detect changes that have taken place in the business environment and be in a position to make more effective decisions that would have been impossible without the information. Individuals or companies contemplating a purchase or business relationship with another company should have available all information possible regarding that company.
</p>
</div>
</div>
<div class="unit">
<img src="images/2im2.jpg" alt="Reports" />
<div class="title">
Reports
</div>

<div class="description">
<p>
An investigative report from United International Investigations is NOT a generic report that comes out of a computer or a bunch of web links to surf.Because of the confidential nature of our services, it is impossible to quote prices for all types of services within this web site. We tailor our services to the needs of our individual clients. <br /><br />

Please Note: Social Security Numbers, if not provided by the client, will be provided with a legal permissible purpose or signed authorization from the subject. Otherwise, the social security number will be omitted from the report. Contact us for further information. It is not our intention to provide information to possible stalkers or to cause harm to anyone. Traditional investigation on a fee per hour basis plus expenses can be provided when necessary.
</p>
</div>
</div>
<div class="unit">

<img src="images/5im3.jpg" alt="Don't Delay" />
<div class="title">
Don't Delay
</div>
<div class="description">
<p>
Too many times, clients wait and worry before getting professional help, and their problems become more serious than if they had just called right away. If you would like to discuss your situation, please call toll free (877) 231-9279 for a free consultation or send an e-mail to <a href="mailto:info@investigateworldwide.com"target=_blank>info@investigateworldwide.com</a> in order to explore how United International Investigations may be able to assist you.
</p>

</div>
</div>
</div>
<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>
</BODY>
</HTML>
________________________________________
________________________________________
body
{
margin: 0px;
padding: 0px;
background-color: #eee;
font-family: sans-serif, arial, verdana;
color: #666;
text-align: center;
min-width: 600px;
background-image: url('images/bg.jpg');
background-repeat: repeat;
}
img
{
float:left;
margin:5px;
}
p
{
font-size: 10px;
color: #666;
margin:0px;
padding:0px 5px 0px 5px;
}

#container
{
text-align: left;
background-color: #fff;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
width: 600px;
border-left: 1px solid #369;
border-right: 1px solid #369;
border-bottom: 1px solid #369;
}
.topr
{
background-image:url('images/top2.jpg');
background-position:bottom left;
background-repeat:no-repeat;
WIDTH:50%;
HEIGHT:242px;
padding:0px;
margin:0px;
float:right;
border-bottom: 5px solid #369;
}
.topl
{
background-image:url('images/top1.jpg');
background-position:bottom left;
background-repeat:no-repeat;
WIDTH:50%;
HEIGHT:242px;
padding:0px;
margin:0px;
float:left;
border-bottom: 5px solid #369;
}
.content
{
background-image:url('images/dots.jpg');
background-position:top left;
background-repeat:repeat-x;
padding: 10px 0px 0px 0px;
}
.right
{
margin:0px;
padding:10px 0px 0px 0px;
text-align: justify;
float:right;
width:48%;
border-bottom: 5px solid #369;
}
.left
{
margin:0px;
padding: 10px 0px 0px 0px;
text-align: justify;
float:left;
width:48%;
border-bottom: 5px solid #369;
}
.unit
{
border-bottom:1px solid #eef;
margin:0px;
padding:0px 5px 0px 5px;
layout:table;
}
.description
{
margin:0px;
padding:0px;
font-size: 10px;
}
.title
{
font-size: 10px;
color: #369;
margin:0px 5px 0px 5px;
padding:0px 5px 0px 5px;
border-bottom: 1px dotted #999;
}
.title2
{
font-size: 14px;
color: #369;
margin:0px 5px 5px 5px;
padding:0px 5px 0px 5px;
border-bottom: 1px dotted #999;
width: 100%;
}
.footer
{
text-align:center;
background-image:url('images/dots.jpg');
background-repeat:repeat-x;
padding:10px 0px 5px 0px;
border:0;
width:100%;
}


h1
{
text-align: center;
margin: 0px;
padding: 5px 0px 0px 5px;
border-bottom: 2px dotted #ddf;
color: #369;
}
h2
{
padding: 0px 0px 0px 5px;
margin-bottom: 12px;
font-size: 12px;
color: #fff;
border-bottom: 1px dotted #ddf;
}

.link
{
font-size: 10px;
padding: 0px 0px 0px 5px;
margin: 0px 0px 20px 0px;
}
.sub
{
font-size: 10px;
margin:0px;
padding:0px;
}
.mini
{
text-align: right;
font-size: 10px;
margin:0px;
padding-right:5px;
color: #fff;
position:relative;
bottom:-28px;
}

.blue
{
font-size: 12px;
color: #fff;
margin: 0px 0px 0px 10px;
padding: 0px;
width: 250px;
}

.leftmenu
{
font-size: 15px;
color: #333;
margin:0px;
padding:80px 0px 0px 5px;
width: 200px;
text-align: right;
}
.leftmenu a:link, .leftmenu a:visited
{
color: #fff;
text-decoration: none;
}
.leftmenu a:hover, .leftmenu a:visited:hover
{
color: #369;
border-bottom: 1px solid #def;
text-decoration: none;
}
.mini a:link, .mini a:visited
{
color: #fff;
text-decoration: none;
}
.mini a:hover, .mini a:visited:hover
{
color: #aef;
border-bottom: 1px solid #369;
text-decoration: none;
}
a:link, a:visited
{
color: #333;
text-decoration: none;
}
a:hover, a:visited:hover
{
color: #369;
text-decoration: none;
border-bottom: 1px solid #f70;
}
________________________________________
________________________________________

If you want to SEE the problem, you can find it at it's temporary location: www.mrmcdaniel.com/temp/index.html

penders

8:48 pm on Jan 1, 2007 (gmt 0)

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



Cor, I asked for that one! Actually, it doesn't look like more than a possible typo or two...

In your HTML, you have marked your left column with an ID...

<div id="left">

But you have defined this as a class (.left) in your CSS, so you just need to change your mark-up to match:
<div class="left">

(or vice-versa)

And you've done a similar thing with your

<div id="footer">
- which has been defined as a class (.footer) in your CSS, although I suspect you will want to change your CSS to
#footer
- to keep it an ID?

You may also want to add the rule:

clear:both;
to your #footer style in order to be sure that both columns are cleared.

mattreedy

9:20 pm on Jan 1, 2007 (gmt 0)

10+ Year Member



O
M
G

I looked over that .html file for ...I don't even know how long looking for tags that didn't get closed and things of that nature and didn't even notice that.

Thank you SO MUCH.

penders

8:38 am on Jan 2, 2007 (gmt 0)

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



No worries - you can't beat another pair of eyes sometimes! :)