Forum Moderators: not2easy
<!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=utf-8" />
<title></title>
<style type="text/css">
<!--
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
background-image:url(background.gif);
background-attachment:fixed;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
#container {
width: 779px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
padding: 0;
border: 1px solid #000000;}
#contentback {
border : 1px solid #008BEF;
background-image:url(maintableback.gif);
padding-left:15px;
padding-right:15px;
padding-top:15px;/* remember that padding is the space inside the div box and margin is the space outside the div box */
}
#border2 {
border : 1px solid #008BEF;
}
#border3 {
border : 4px solid #76D5FF;
}
#header {
width:725px;
height:200px;
}
#contentblock {
padding:5px;
text-align: left; /* this overrides the text-align: center on the body element. */
}
div.contentborder1 {
border: 1px solid #000000;
margin-bottom:15px;
}
div.contentborder2 {
border : 1px solid #76D5FF;
}
div.contentborder3 {
border : 3px solid #ffffff;
}
div.contentborder4 {
border : 1px solid #008BEF;
background-color:#FFFFFF;
}
div.contentcontainer {
width:70%;
float:left;
}
div.sidebarcontainer {
width:30%;
float:left;
}
#menuleftmargin {
margin-left:15px;
}
-->
</style></head>
<body>
<div id="container">
<div id="border2">
<div id="border3">
<div id="contentback">
<!--begin header -->
<div class="contentborder1">
<div class="contentborder2">
<div class="contentborder3">
<div id="header" class="contentborder4">
<a href="/"><img src="grees.gif" alt="" border="0" /></a>
</div></div></div></div>
<!--end header -->
<!--begin page content block -->
<div class="contentcontainer">
<div class="contentborder1">
<div class="contentborder2">
<div class="contentborder3">
<div id="contentblock" class="contentborder4">
main content here blah blah blah
</div>
</div>
<?php endwhile; endif;?>
<?php edit_post_link('Edit this entry.', '<p>', '</p>');?>
</div></div></div></div></div>
<!-- end page content block -->
<!--begin side bar -->
<div class="sidebarcontainer">
<div id="menuleftmargin" class="contentborder1">
<div class="contentborder2">
<div class="contentborder3">
<div id="contentblock" class="contentborder4">
sidebar here
</div></div></div></div> </div><br clear="left" />
<!--end side bar -->
</div>
</div></div></div>
</body>
</html>
It's also probably not a good idea to identify a div with both an ID and a class. I'm not sure if this should work or not because I never do this. I tend to use classes throughout.
Another small point (although not essential) is that
padding-left:15px;
padding-right:15px;
padding-top:15px;
can be simplified to padding:15px 15px 0 15px;
The order is clockwise, starting from 'top'.
I recommend you do your test situation without all those borders for visual styling. In fact, complete site design could be be done without the extra borders, and just add them in at the end (you may experience some bugs from IE when it comes to widths/margin/padding/borders though, but those problems are generally fixed at the end anyways).
Now here's some extra things you may or may not know, I'm just brining them up, because it's hard to actually go through a fair bit of code like that thoroughly.
-When you specify a width of an element, by the web standards such a width does not include border or padding (and definitely not margin). If you wish for a total width of a certain amount, ensure the border/padding/margin numbers add up to the total space they have, or else an element will likely jump to another line.
-Floated elements don't take up any flow. If you have floated elements in a container (only in certain circumstances. In many cases it's if there's ONLY floated elements in the container), you need to be careful that the container isn't collapsing on the floats. What's potentially possible is that one container is collapsing, but another is cleared, and didn't collapse, making it seem like it's not in the div.
This is a large bit of guess work on my part, since I'm not running IE 7 right now, and there was no exact elaboration of the problem.
You say that "the floating divs are displaying outside of #contentback and I wish them to be inside it." I have IE7 and the floating divs are below #contentback.
The content div is slightly higher than the sidebar div, which is probably a margin issue. You have to be carefull with margins because they can "collapse" giving unexpected results. (There is a current thread on this subject.)
If you want the visual effect that I think you do, then it might be easier to use borders and padding.
<links removed>
See how the content and menu blocks aren't staying inside the area with the small checkered background? I wonder if it has to do with the clear?
[edited by: encyclo at 6:37 pm (utc) on Dec. 23, 2007]
[edit reason] no screenshot links please, see posting guidelines [/edit]
If I were you I would take out everything unneccesary to the basic layout, and get that working before worrying about borders or padding.
