div tag and layout

[greenelephant]

Hello i am new to the site and registered cause it looks like i can get the help i need here. So the help i need besides mental help is a problem with getting so things to align for me properly.

Here you can see what i mean. The Site in question

The problem i am having is in the bottom area where the 3 windows are verticaly aligned when they should be aligned horizontaly. Now i have trying useing absolute and relative positioning and that didn't work. Absolute won't work cause it works off the left margin and screws up when the window is resized. Relative worked but left a space where each div was in it's vertical position. So there was a huge blank area that i can't fill or get rid off.

Now normaly i would lay all this out with tables but sense i know things have changed and the people who make the browsers can't seem to come up with any full standard. I did it with the div tag so it might look alittle sloppy and or novice like. If you guys could help me out that would be awesome.

-Charles

[greenelephant]

Now i am having a padding issue. Now this works fine in IE but for FF i don't know what the heck it's doing. If i add another <div> tag around the text in the main area and give it a padding-right value it works. In IE it works when i get the parrent <div> the padding-right value.

[drhowarddrfine]

The problem is IE and the fact that you are designing in IE and then checking in Firefox which is the opposite of what you should be doing.

1) You will never get IE to pretend to act like a modern browser without a proper doctype. See the article about this under "Article" above.
2) You are using an 'id' name more than once in your css. id names can only be used once per page.
3) There must be 'units' for dimensions, ie, you must specify px, em, etc.
4) Internet Explorer is old, buggy and non-standard. Always test your code in a modern browser, such as Firefox or Opera, and then adjust for IEs quirks and bugs.

Validating your html and css would have shown you these errors.

[greenelephant]

I was testing it in firefox. I only opened it in IE to see how it would look for the common public. And i saw that it was working there. I will check out the article about the DOC types. And how dose one validate there code. Thanks for the help so far.

EDIT: So found the article on DOC types and on Validating and i am working on cleaning up my mark up. Can someone now help me with the problem of the divs stacking like they are.

[greenelephant]

Ok so now that i have it all cleaned up and using valid markup and i have 1 error in my css that i am not to worried about. My site is all goffy looking i have yet to start messing with reworking the CSS and HTML to try and make it look like it's supose to again because i have to head off to work. If anyone wants to help me on figureing out why it's now doing what it's doing that would be awesome :)

[drhowarddrfine]

First, you are using xhtml closing tags, the />. Remove the slash from all ending tags that have that.

EDIT: Then, add float:left to .window in your css. You may have to adjust the width of the divs to get them to fit in one line.

[greenelephant]

Thanks for the help with getting all the doc type set up and getting the lower windows to line up. I will have to play with the widths like you said to make them line up right but that i can do.

The problem now is that the nav bar has a space between the header and the header has a space between the main content and the main content has a space between the top of the windows. I am not sure what is causing this at all. I will sit and play with it some more to see if i can't get it figured out.

[greenelephant]

Ok i can't for the life of me figure out what is going on with this layout. IE is displaying really nice and FF is now the on that can't seem to figure out what to do. Now i always design using FF and check with IE just to make any tweaks needed. But this one is really messing with my head. I know why the lower windows don't line up perfectly in ie. That is because the images are just a little big to make them space evenly. But that doesn't explain what FF is doing with the windows and the rest of the images.

[drhowarddrfine]

You need to be more specific because what I see is the opposite of what you describe. The windows at the bottom may be different due to default margins and padding which are different between browsers. Many times, we set all margins and padding to zero in css just to keep everyone on the same page, then set them as we like.

[asmanand]

use this code <!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
body{
background: #000000;
color: #808080;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
text-align: center;
}
a{ color:#fffffF; text-decoration:none;}
img{border: 0px;}

#wrapper{ margin:0px auto; width: 820px;
}
#navbar{
background: transparent url(images/navbar.gif);
background-repeat: repeat-x;
height: 15px;
text-align: right;
padding-right: 14px;
}
.header{background-image:url(images/header.gif); background-repeat:no-repeat; height:100px;}
#lower_header{ background: transparent url(images/lower_header.gif); background-repeat: repeat-x;height:30px;}
#lower_header span.lft{background-image:url(images/lower_header_left.gif); width:36px; height:30px; background-repeat:no-repeat; float:left}
#lower_header span.rgt{background-image:url(images/lower_header_right.gif); width:36px; height:30px; background-repeat:no-repeat; float:right}
#main_content{
background: transparent url(images/site_bg.gif);
background-repeat: repeat-y;
text-align: left;
font-weight: bold;
padding-left:30px;
}
#mid_divider{background-image:url(images/mid_bg.gif);background-repeat: repeat-x;height: 9px;}
#mid_divider span.lft{background-image:url(images/mid_left.gif); background-repeat:no-repeat; width:23px; height:9px; float:left; line-height:9px; font-size:1px;}
#mid_divider span.rgt{background-image:url(images/mid_right.gif); background-repeat:no-repeat; width:23px; height:9px; float:right;line-height:9px; font-size:1px;}
.window{background-image:url(images/window_tile.gif);background-repeat: repeat-x;height: 183px;color: #808080;width: 273px;float:left;}
.window span.lft{background-image:url(images/window_left.gif); width:23px; height:183px; background-repeat:no-repeat; background-position:bottom; float:left;}
.window span.rgt{background-image:url(images/window_right.gif); width:23px; height:183px; background-repeat:no-repeat; background-position:bottom; float:right;}
.window span.txt{ padding:10px; text-align:left; float:left; color:#ffffff}

</style>
<title>Untitled Document</title>
</head>

<body>
<div id="wrapper">
<div id="navbar"><a href="#">sdfs</a></div>
<div class="header"></div>
<div id="lower_header">
<span class="lft"></span>
<span class="rgt"></span>
</div>
<div id="main_content">Welcome to the The Infamous Flaming Vagabonds website. It is currently underconstruction as you can see but you would like you to join us on our forums.<br>The address to our forums is <a href="http://forums.ifvguild.com">http://forums.ifvguild.com</a><br /><br /><br /></div>
<div id="mid_divider">
<span class="lft"></span>
<span class="rgt"></span>
</div>
<div class="window">
<span class="lft"></span>
<span class="rgt"></span>
<span class="txt">Test</span>
</div>
<div class="window">
<span class="lft"></span>
<span class="rgt"></span>
<span class="txt">Test</span>
</div>
<div class="window">
<span class="lft"></span>
<span class="rgt"></span>
<span class="txt">Test</span>
</div>
</div>
</body>
</html>