Ok, I am totally new to tableless which is rather funny because I've been doing php and stuff twice as hard for awhile now.

[ Link Remove Since It Was A Temp ]

What can I do to fix this? I know I should be using more than div's but as I said, I'm new and I'm more of a visual learner.

If someone could tell me how to fix this, that'd be great. Also, if someone could show me how they'd of done it, that would provide a lot for me to learn on.

Thanks

You have really over-complicated your CSS. You don't need div#xxxxx on every id. You also don't put "div#" inside the color selector, it's just color: #ebebeb;

You need to specify a height for #nav_container, currently you have no rules for it at all.

#nav_container{
height: 39px;
}
Once you do that then the floated left and right containers will fall into place where you want them. However IE will choke on the left margin on the left floated divs and DOUBLE the margins on you. So, to combat that you'll have to do 1 of 2 things. Don't float the right container and just give it a wide left margin to clear the left container, or, add conditional comments to target IE and create a separate "IEfixes.css" file that will hold ONLY those hacks necessary to make IE behave.

You can read about the doubled float margin bug, and how to solve it here;
http://www.positioniseverything.net/...ed-margin.html

You also need to properly clear the floats in the header, and just a 'clear: both' on a div isn't effective, you're adding a div where there's no need for one. A better method that works easily cross-browser is this:

.brclear { /* Use a break with this class to clear float containers on both sides */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

Then use <br class="brclear" /> after you close #header_container and before #nav_container. You'll also need the same clearing element after you close #content_container.

I would also suggest you set your font face and size in the body section and don't use px or pt, use em or %.

Originally Posted by LadynRed

You have really over-complicated your CSS. You don't need div#xxxxx on every id. You also don't put "div#" inside the color selector, it's just color: #ebebeb;

You need to specify a height for #nav_container, currently you have no rules for it at all.

#nav_container{
height: 39px;
}
Once you do that then the floated left and right containers will fall into place where you want them. However IE will choke on the left margin on the left floated divs and DOUBLE the margins on you. So, to combat that you'll have to do 1 of 2 things. Don't float the right container and just give it a wide left margin to clear the left container, or, add conditional comments to target IE and create a separate "IEfixes.css" file that will hold ONLY those hacks necessary to make IE behave.

You can read about the doubled float margin bug, and how to solve it here;
http://www.positioniseverything.net/...ed-margin.html

You also need to properly clear the floats in the header, and just a 'clear: both' on a div isn't effective, you're adding a div where there's no need for one. A better method that works easily cross-browser is this:

.brclear { /* Use a break with this class to clear float containers on both sides */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

Then use <br class="brclear" /> after you close #header_container and before #nav_container. You'll also need the same clearing element after you close #content_container.

I would also suggest you set your font face and size in the body section and don't use px or pt, use em or %.

Wow, thats a lot to take in and understand at once. The main thing that stood out for me is why do you say to avoid px and pt? I have always done things in px, I can picture how large something will be as a px. How does em work? How many pixels is 1em?

Ok, I read through that about 100 times and think I understood what you were saying. I made some changes yet I am still having problems. I also tried floating the right container to the right but that did not go so well...

[ Link Remove Since It Was A Temp ]

The problem with using PX or PT for font sizes is that it does not allow IE users to re-size the text should they choose to do so. Not everyone on the web is 15 with 20-20 vision and not all visitors will find your choice of font sizes readable. You don't want to handcuff your visitors in this fashion.

Is better to use % or em so that visitors CAN resize text to what THEY prefer - not you. The default font size for most browsers is 16px. 1em = 16px or 100%.
http://webdesign.about.com/cs/typeme.../aa042803a.htm

Ok, for one thing don't do this:

div.clear
{ /* Use a break with this class to clear float containers on both sides */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

You don't want to just add an extra div for this use the <br> the way I gave it to you.

Even worse, you now have your nav and content containers INSIDE that clearing div ! <div class="clear" /> is NOT proper html, you MUST use the correct closing div tag: <div class="clear"></div> -- but don't use a div to clear a float, not like that.

Right now your "hello" text is not in the right place because the divs are suffering from your incorrect nesting (and closing) of the divs.

There's no reason use float:right on the right container, but if you do then you have to understand the massive number of bugs in IE and learn to squash them. That is what conditional comments are for - to target the IE bugs where necessary. IE has a broken box model, so you must be very careful with dimensions and just adding margins and padding willy-nilly.

Read up on IE's numerous bugs:
http://www.positioniseverything.net/explorer.html
The broken box model: http://www.communitymx.com/content/a...989953B6F20B41


It does not appear that you added the separate declarations for #nav_container as I showed above but I added it for a reason, you need the dimension.

One more thing - don't use IE as your primary design preview tool. Load up Firefox or Opera and get it right in those first, then add the fixes needed to make IE behave.

http://www.quirksmode.org/css/condcom.html

Ok, I'll worry about font sizes later after I get the layout in place.

1) What is the rule with adding a padding to place text where I want it within a div? Does padding count as added width and height or something?

2) What is wrong with the code now in IE? I used a left margin to position it and it's still not wanting to work properly.

3) I use dreamweaver to as a text editor but it also give some nice tips. It mentioned that a few browsers do not support classes assigned to a br element.

Do NOT rely on the so-called tips from Dreamweaver. All of the MAJOR browsers support classes on the br element.

Read the article "The Box Model Problem" that I gave you a link to. It will explain the problem with the way IE 6 (and below) handles the box model - IE does things in a NON-STANDARD way, hence the need to force it to do things the way the other browsers do.

In IE you are getting what is known as 'float drop' and it's due to IE's non-standard implementation of the box model.

Ok, I understand the box issue and kinda figured it was doing something like that. Is there a document like thing on what the "float drop" is and how to fix it? I searched google and didn't find anything that really explained it very well.

Thanks again.

Float drop occurs when the contents inside a container are wider than the container itself. Because of IE's busted box model, it will 'drop' one of the divs to a point where it has enough room.

Modify the width of the right_content (and maybe left_content too), reduce padding and/or margins until it goes back up where it belongs.

Originally Posted by LadynRed

Float drop occurs when the contents inside a container are wider than the container itself. Because of IE's busted box model, it will 'drop' one of the divs to a point where it has enough room.

Modify the width of the right_content (and maybe left_content too), reduce padding and/or margins until it goes back up where it belongs.

Thanks, I understand what your saying but I am still having trouble with it. I know most coders don't believe in doing something for someone but could one of you actually repair it for me as I am truly more of a visual learner. I quite some time on it and ended up messing it up even more so I reverted back to the one I had when I made my last post.

Thanks again,
Phaaze

Ok then, here it is:

<!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"><head><title>Countrywide Proxy</title>



<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style.css" rel="stylesheet" type="text/css"></head><body aprocessed="true">
<div id="wrapper">
<div id="header_container">
<div id="logo">
<img id="logo" src="http://www.webmaster-talk.com/images/logo.gif" alt="Countrywide Proxy" height="87" width="252">
</div><!-- end logo -->
<div id="header_ad">
<script language="JavaScript" type="text/javascript">
<!--
ctxt_ad_partner = "1589037681";
ctxt_ad_section = "56864";
ctxt_ad_bg = "";
ctxt_ad_width = 468;
ctxt_ad_height = 60;
ctxt_ad_bc = "FFFFFF";
ctxt_ad_cc = "FFFFFF";
ctxt_ad_lc = "237897";
ctxt_ad_tc = "000000";
ctxt_ad_uc = "339933";
//
</script>
<script language="JavaScript" src="ypn.js">
</script><iframe src="a.htm" hspace="0" vspace="0" marginwidth="0" marginheight="0" allowtransparency="true" name="iframe0" frameborder="0" height="60" scrolling="no" width="468"></iframe>
</div><!-- end header ad -->
</div><!-- end header container -->
<br class="brclear" />
<div id="nav_container">
<ul>
<li><a href="#" class="home_active"></a></li>
<li><a href="#" class="advertise"></a></li>
<li><a href="#" class="contact"></a></li>
</ul>
</div><!-- end nav_container -->
<div id="content_container">
<div class="left_container">
<div class="title">
<p>Hello</p>
</div><!-- end title -->
</div> <!-- end left container -->
<div class="right_container">
<div class="title">
<p>Hello</p>
</div><!-- end title -->
</div> <!-- end right container -->
</div><!-- end content container -->
<br class="brclear" />
</div><!-- end wrapper -->
</body>
</html>

And the CSS

body, h1, h2, h3, p, li, ul, div
{
margin: 0;
padding: 0;
font: 100.1% Verdana, Helvetica, Arial, sans-serif;
}

img { border: none; }

/*div.clear { clear: both; }*/

a, a:visited, a:link
{
color: #5b7384;
text-decoration: underline;
}

a:hover
{
color: #3c5566;
text-decoration: none;
}

body {
background: #ebebeb url(images/bg.gif) repeat-x;
}

#wrapper {
width: 760px;
margin: 0 auto;
position: relative;
/* border: 1px solid green; */
}
#header_container {
width: 760px;
height: 87px;
vertical-align: middle;
}
#logo {
height: 87px;
width: 252px;
float: left;
}
#header_ad {
height: 62px;
width: 468px;
float: left;
margin: 12px 0 0 0;
/*position: relative;*/
}
#nav_container{
height: 39px;
}

#nav_container ul {
white-space: nowrap;
margin: 0px 0px 0px 9px;
padding: 0px;
}
#nav_container ul a {
display:block;
text-indent:-999px;
overflow:hidden;
height:39px;
}
#nav_container li {
display: inline;
list-style-type: none;
float: left;
width: 86px;
height: 39px;
margin-right: 6px;
}
#nav_container a.home {
background-image: url(images/home_out.gif);
background-repeat: no-repeat;
width: 86px;
height: 39px;
}
#nav_container a.home:hover {
background-image: url(images/home_over.gif);
background-repeat: no-repeat;
width: 86px;
height: 39px;
}
#nav_container a.home_active {
background-image: url(images/home_over.gif);
background-repeat: no-repeat;
width: 86px;
height: 39px;
}
#nav_container a.advertise {
background-image: url(images/advertise_out.gif);
background-repeat: no-repeat;
width: 86px;
height: 39px;
}
#nav_container a.advertise:hover {
background-image: url(images/advertise_over.gif);
background-repeat: no-repeat;
width: 86px;
height: 39px;
}
#nav_container a.advertise_active {
background-image: url(images/advertise_over.gif);
background-repeat: no-repeat;
width: 86px;
height: 39px;
}
#nav_container a.contact {
background-image: url(images/contact_out.gif);
background-repeat: no-repeat;
width: 86px;
height: 39px;
}
#nav_container a.contact:hover {
background-image: url(images/contact_over.gif);
background-repeat: no-repeat;
width: 86px;
height: 39px;
}
#nav_container a.contact_active {
background-image: url(images/contact_over.gif);
background-repeat: no-repeat;
width: 86px;
height: 39px;
}
#content_container {
width: 760px;
margin-top: 25px;
/* position: relative;*/
}
#content_container div.left_container {
float: left;
margin: 0px 5px 0px 9px;
width: 200px;
display: inline;
}

div.left_container div.title {
background-image: url(images/left_title.gif);
background-repeat: no-repeat;
height: 23px;
width: 200px;
color: white;
font-size: 75%;
font-weight: bold;
}
#content_container div.right_container {
float: left;
width: 532px;
margin: 0px 9px 0px 5px;
}
div.right_container div.title {
background-image: url(images/right_title.gif);
height: 23px;
width: 532px;
color: white;
font-size: 75%;
font-weight: bold;
}
.title p{ /* to style text inside*/
padding: 3px 0 0 12px;
}


.brclear { /* Use a break with this class to clear float containers on both sides */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

Originally Posted by LadynRed

Ok then, here it is:

[Code Removed So I Dont Make A Huge Message]

And the CSS

Thanks, but there is still something terribly wrong... All I see in IE6 SP2 is the logo and background...

[ Link Remove Since It Was A Temp ]

It has something to do with the script section for your ads. Take that out and copy it back in from the original source.

Also, on the <body> tag take out that "ap processed=true", that was a leftover from firebug and I forgot to take it out.

Originally Posted by LadynRed

It has something to do with the script section for your ads. Take that out and copy it back in from the original source.

Also, on the <body> tag take out that "ap processed=true", that was a leftover from firebug and I forgot to take it out.

You were correct, it was the ads but I copied it originally from yahoo directly, not sure why it got messed up.
Thanks for this, now I just need to study it and make an attempt to finish the rest of the site.

I was wondering what the aprocessed = "true" was, I simply left it since I figured you put it there for a reason, I was actually gonna ask what it was for once I got it working. :P

One last thing, I was told on other forums not to use a div with a title id for the titles... To use an H1 or H2, why is this and is an H1/H2 what you'd suggest?