dresden_phoenix,
I feel dizzy
Thanks for your response, but I feel like this is going over my head quickly.
Before I look at tweaking what I have, can you please comment on my current layout?
Here is index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- ################## DEBBIE ##################### -->
<!-- HTML Metadata -->
<title>Debbie's Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Page Stylesheets -->
<link type="text/css" rel="stylesheet" href="css/_main.css" />
<link type="text/css" rel="stylesheet" href="css/_layout.css" />
<link type="text/css" rel="stylesheet" href="css/top_menu.css" />
</head>
<body>
<div id="pageWrapper" class="clearfix">
<div id="pageInner">
<!-- BODY HEADER -->
<?php require_once('components/body_header.inc.php'); ?>
<!-- LEFT COLUMN -->
<div id="pageLeftCol">
left
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quam nisi,
egestas mattis commodo a, adipiscing eget erat. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce ultrices
lacus nec leo mattis vestibulum. Donec pharetra luctus nisl et sollicitudin.
Aliquam faucibus tellus at orci pretium faucibus. Duis malesuada, enim ac
luctus auctor, metus libero dictum nunc, vitae imperdiet est massa eget
massa. Nulla quis tellus volutpat metus tincidunt laoreet. Phasellus
arcu metus, ullamcorper in cursus vitae, ultricies nec eros. Proin vitae
malesuada enim. Vestibulum in ligula a ante consequat bibendum. Sed
volutpat, arcu eget suscipit aliquam, ligula mi ornare tellus, nec
ornare orci justo in tellus. Nullam in scelerisque arcu. Proin nec
euismod metus.
Sed vitae libero eget nibh ullamcorper pellentesque. Nulla elementum
varius luctus. Quisque lectus ipsum, suscipit sit amet interdum in,
sollicitudin vitae nibh. Vestibulum consequat rutrum nulla, vel commodo
eros egestas in. Praesent feugiat imperdiet purus a interdum. Donec
aliquam tincidunt nisi, ac congue est laoreet venenatis. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Aliquam erat volutpat. Sed quis varius felis. Phasellus
interdum libero non lorem accumsan placerat. Vivamus rutrum ultricies
risus, a tincidunt ligula lacinia et. Ut accumsan interdum neque sed
varius. Etiam nec nisi in massa vulputate convallis. Donec euismod
dictum enim, nec rutrum sem blandit a. Fusce nulla urna, egestas vel
condimentum sed, dignissim vitae quam.
</div><!-- End of #LEFT -->
<!-- MIDDLE COLUMN -->
<div id="pageMidCol_3">
middle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quam nisi,
egestas mattis commodo a, adipiscing eget erat. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce ultrices
lacus nec leo mattis vestibulum. Donec pharetra luctus nisl et sollicitudin.
Aliquam faucibus tellus at orci pretium faucibus. Duis malesuada, enim ac
luctus auctor, metus libero dictum nunc, vitae imperdiet est massa eget
massa. Nulla quis tellus volutpat metus tincidunt laoreet. Phasellus
arcu metus, ullamcorper in cursus vitae, ultricies nec eros. Proin vitae
malesuada enim. Vestibulum in ligula a ante consequat bibendum. Sed
volutpat, arcu eget suscipit aliquam, ligula mi ornare tellus, nec
ornare orci justo in tellus. Nullam in scelerisque arcu. Proin nec
euismod metus.
Sed vitae libero eget nibh ullamcorper pellentesque. Nulla elementum
varius luctus. Quisque lectus ipsum, suscipit sit amet interdum in,
sollicitudin vitae nibh. Vestibulum consequat rutrum nulla, vel commodo
eros egestas in. Praesent feugiat imperdiet purus a interdum. Donec
aliquam tincidunt nisi, ac congue est laoreet venenatis. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Aliquam erat volutpat. Sed quis varius felis. Phasellus
interdum libero non lorem accumsan placerat. Vivamus rutrum ultricies
risus, a tincidunt ligula lacinia et. Ut accumsan interdum neque sed
varius. Etiam nec nisi in massa vulputate convallis. Donec euismod
dictum enim, nec rutrum sem blandit a. Fusce nulla urna, egestas vel
condimentum sed, dignissim vitae quam.
</div><!-- End of #MIDDLE -->
<!-- RIGHT COLUMN -->
<div id="pageRightCol">
right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quam nisi,
egestas mattis commodo a, adipiscing eget erat. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce ultrices
lacus nec leo mattis vestibulum. Donec pharetra luctus nisl et sollicitudin.
Aliquam faucibus tellus at orci pretium faucibus. Duis malesuada, enim ac
luctus auctor, metus libero dictum nunc, vitae imperdiet est massa eget
massa. Nulla quis tellus volutpat metus tincidunt laoreet. Phasellus
arcu metus, ullamcorper in cursus vitae, ultricies nec eros. Proin vitae
malesuada enim. Vestibulum in ligula a ante consequat bibendum. Sed
volutpat, arcu eget suscipit aliquam, ligula mi ornare tellus, nec
ornare orci justo in tellus. Nullam in scelerisque arcu. Proin nec
euismod metus.
Sed vitae libero eget nibh ullamcorper pellentesque. Nulla elementum
varius luctus. Quisque lectus ipsum, suscipit sit amet interdum in,
sollicitudin vitae nibh. Vestibulum consequat rutrum nulla, vel commodo
eros egestas in. Praesent feugiat imperdiet purus a interdum. Donec
aliquam tincidunt nisi, ac congue est laoreet venenatis. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Aliquam erat volutpat. Sed quis varius felis. Phasellus
interdum libero non lorem accumsan placerat. Vivamus rutrum ultricies
risus, a tincidunt ligula lacinia et. Ut accumsan interdum neque sed
varius. Etiam nec nisi in massa vulputate convallis. Donec euismod
dictum enim, nec rutrum sem blandit a. Fusce nulla urna, egestas vel
condimentum sed, dignissim vitae quam.
</div><!-- End of #RIGHT -->
</div><!-- End of #INNER -->
</div><!-- End of #WRAPPER -->
<!-- BODY FOOTER -->
<?php //require_once('components/body_footer.inc.php'); ?>
</body>
</html><?php //Build Date: 2011-11-12 ?>
And here _layout.css
/******************************************************************************/
/* PAGE LAYOUT STYLES */
/******************************************************************************/
#pageWrapper{
position: relative; /* Create Containing Block. */
z-index: 0; /* Place below other elements */
min-width: 760px;
max-width: 1200px;
min-height: 100%; /* WHAT IS THIS?? */
margin: 0px auto;
margin-top: -60px; /* Make space for Footer. */
background: #FFF; /* Fill-Color for short Middle Column. */
text-align: left; /* ??? */
}
/* Holds 3 Columns and hides portion sticking out to the right. */
#pageInner{
position: relative; /* Create Containing Block. */
z-index: 3; /* Raise above Colored Columns. */ /* NEEDED?? */
width: 100%;
overflow: hidden; /* Hides Middle Column hanging outside of viewport. */
}
#pageHeader{
position: relative; /* Create Containing Block. */
z-index: 3; /* Raise above Colored Columns. */ /* NEEDED?? */
clear: both; /* PURPOSE??? */
width: 100%; /* Width of Viewport. */
padding: 0; /* NEEDED?? */
color: #000; /* NEEDED?? */
background: #FFF; /* NEEDED?? */
border-top: 60px solid #F00; /* Compensates for negative margin in Wrapper
which was used to make way for Footer. */
}
/* All 3 columns below are floated left.
Left Col is 200px wide.
Middle Col is 100% wide and thus extends 200px beyond viewport.
Right Col is 200px wide and thus extends 400px beyond viewport.
Middle Col has -400px Right Margin to move Right Col back into viewport. */
#pageLeftCol{
position: relative; /* Create Containing Block. */
z-index: 2; /* ????? */
float: left;
width: 200px;
overflow: hidden; /* NEEDED?? */
font-size: 0.8em; /* NEEDED?? */
}
#pageMidCol_3{
/* By floating the Middle Column we avoid the IE6 3 pixel jog and also keep
columns in normal source order (i.e. Left, Middle, Right), but we need
to use a negative margin offset to make it all fit. */
/* position: relative; /* Why doesn't this exist? */
/* z-index: 2; /* Why doesn't this exist? */
float: left;
width: 100%; /* Width of Viewport. */
margin-right: -400px; /* Compensate for 200px Left & Right Columns. */
}
#pageMidCol_2{
/* Each of the two columns are floated left.
Middle Col is 100% wide and thus extends to the edge of the viewport.
Right Col is 200px wide and thus extends 200px beyond viewport.
Middle Col has -200px Right Margin to move Right Col back into viewport. */
/* position: relative; /* Why doesn't this exist? */
/* z-index: 2; /* Why doesn't this exist? */
float: left;
width: 100%; /* Width of Viewport. */
margin-right: -200px; /* Compensate for 200px Right Column. */
}
#pageMidCol_1{
/* position: relative; /* Why doesn't this exist? */
/* z-index: 2; /* Why doesn't this exist? */
float: left;
width: 100%; /* Width of Viewport. */
}
#pageRightCol{
position: relative; /* What does this do? */
z-index: 2; /* What does this do? */
float: right;
width: 200px;
overflow: hidden; /* Why doesn't this exist like in LEFT?? */
font-size: 0.8em; /* NEEDED?? */
}
#pageFooter{
/* This is located BELOW the wrapper. */
position: relative; /* What does this do? */
z-index: 2; /* What does this do? */
clear: both; /* NEEDED?? */
min-width: 760px; /* Same min-width as #wrapper. */
max-width: 1200px; /* Same max-width as #wrapper. */
height: 60px; /* Must match Negative Top-Margin in #wrapper. */
margin: 0 auto; /* NEEDED ?? */
text-align: center;
font: normal 14px/15px arial,helvetica,sans-serif; /* NEW */ /* How does this affect Total Height of 60px?? */
color: #000;
background: #DDD;
}
And here is main.css which contains the ClearFix styles at the bottom of the code. (Note: I have some more extraneous ClearFix code in my top_menu.css file, but let’s save that for later?!)
/******************************************************************************/
/* GENERAL STYLES */
/******************************************************************************/
*{
margin: 0;
padding: 0;
}
html,
body{
height: 100%; /* For IE6 ??? Will expand beyond 100% */
}
body{
font-family: Helvetica, Arial, Sans-Serif;
line-height: 1.4em;
font-size: 0.9em;
background: #FFF;
}
h1, h2, h3, h4{
padding: 0.5em 0 0 0;
text-align: center;
}
p{
padding: 0.5em 1em;
}
/******************************************************************************/
/* HEADER STYLES */
/******************************************************************************/
#logo{
float: left;
margin: 0.5em 18px 1em 0;
}
#topMenu{
clear: both;
}
/******************************************************************************/
/* FOOTER STYLES */
/******************************************************************************/
#footer ul{
list-style: none;
padding: 22px 0 23px 0;
}
#footer ul li{
display: inline;
}
#footer ul li a{
margin: 0 1em;
}
/******************************************************************************/
/* MISC STYLES */
/******************************************************************************/
/* Allow Container Box to "clear" a Floated item. */
/* For more info see: "http://www.positioniseverything.net/easyclearing.html" */
.clearfix:after{
content: "."; /* Append a period to element. */
display: block; /* Set as Block element. */
clear: both; /* Apply clear to move Container Box below Float. */
height: 0; /* Keep period from showing. */
visibility: hidden; /* Keep period from showing. */
}
/* IE and Mac fix */
.clearfix{
display: inline-block;
}
/* Fixes bug in Opera which doesn't usually like 100% height.
We move the float way above the viewport out of the way of everything. */
.clearfix{
display: block;
}
/* What does this do? */
/*Opera Fix*/
body:before{ /* thanks to Maleika (Kohoutec)*/
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px; /* thank you Erik J - negate effect of float*/
}
This code appears to work “as-is” - although I’m lame and haven’t tested it on IE since I am on a Mac!
Can you (and others) please comment on how I have things laid out and styled? (Most of this was taken from Paul O’ and then tweaked and I added lots of comments to make it clearer, but some things like ClearFix and “clearing floats” still kinda confuse me?!)
Thanks,
Debbie