You haven’t really said what you want to center, but if you mean the text in the middle, the problem arises with the container being floated, so that it shrink wraps the content. Perhaps describe how you want this layout to work, and a better option can be suggested.
Should do it w/o any modification to your html ( other than removing inline CSS , cuz it’s evil).
The problem stemmed from the fact that floats shrink-wrap. in other word your text WAS centered, but the container was the EXACT with of your text and floated left. thus you need to give your floated elements a set width.
I now have a “working” template using both ronpat’s and dresden_phoenix’s codes. However, now I need to (1) have the left nav and right column made the “wrapper” start to grow height wise with the “longer” one doing the most “forcing” and (2) the footer to stay permanently on the bottom of the display.
Here is my updated code:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<title>
New SACCC Home Page Design
</title>
<style type="text/css">
@charset "utf-8";
/* CSS Document */
#wrapper {
width: 95%;
margin: 0 auto;
margin-top: 20px;
border: 5px red solid;
}
.heading {
margin: 0 auto;
width: 100%;
height: 160px;
text-align:center;
}
#leftPic {
clear: both;
float: left;
padding: 5px 10px;
width: 150px;
height: 150px;
overflow:hidden;
border: 2px green dotted;
text-align:center;
}
#bodyLeftNav {
clear: both;
float: left;
padding: 5px 10px;
width: 150px;
border: 2px olive solid;
text-align:center;
}
#midDescription {
display:inline-block;
height: 155px;
padding: 5px 10px;
}
#bodyCenter {
display: inline-block;
padding: 5px 10px;
border: 2px yellow solid;
}
#rightPic {
float: right;
width: 190px;
height: 150px;
padding: 5px 10px;
border: 2px black solid;
text-align:center;
}
#rightPic p {
padding: 0;
margin: 0;
margin-top: -5px;
font-size: 1.2em;
color: #FF4500;
}
#bodyOptionalRightColumn {
float: right;
width: 190px;
padding: 5px 10px;
border: 2px black dashed;
}
.webBody {
border: 2px solid orange;
text-align:center;
}
.pageFooter {
position:absolute;
bottom:0;
width:95%;
height:60px; /* Height of the footer */
background:#6cf;
text-align:center;
}
</style>
</head>
<body>
<div id = "wrapper">
<div class="heading">
<div id = "leftPic">
This is the left picture area
</div>
<div id = "midDescription">
<p>this is the description area </p>
</div>
<div id = "rightPic">
Thi is the right picture area
</div>
</div>
<div class="webBody">
<div id="bodyLeftNav">
this is nav section
<ul>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
<li> 1 </li>
</div>
<div id="bodyCenter">
this is the web body with a variable width
<p>but somehow it might not work properly???</p>
</div>
<div id="bodyOptionalRightColumn">
this is the right section
</div>
</div>
<div class = "pageFooter">
this is the footer
</div>
</div>
</body>
</html>
</html>
The red border on the wrapper doesn’t grow with the floats because floated content is removed from the flow. You need to contain your child floats in order to make the parent encompass the children. This can be simply done by applying overflow:hidden and zoom:1.0 to #wrapper but assumes that you don’t want visible overflow. If you do need visible overflow then use the clearfix technique to encompass the floats.
and (2) the footer to stay permanently on the bottom of the display.
This depends whether you want a fixed footer always at the bottom of the viewport or a sticky footer at the bottom of the viewport only when the document doesn’t reach the viewport; at other times the footer is at the end of the document. The sticky footer technique is explained in detail in the CSS faq (see my sig) so I won’t elaborate here but it does need to be done correctly and exactly as per the details shown.
A fixed positioned footer uses position:fixed and you place the footer at bottom:0; and left:0 and right:0; (unless you want it centralised as in the demo I linked to). However as it is removed from the flow it needs to be a fixed height and thus you must ensure that you add padding bottom (equal to the height of the footer) to the last element above the footer so that it can scroll clear of the fixed footer. Fixed positioned footers are only suitable for small height footers preferably with a fixed width.
I also note you are using inline-block for your middle column but this will only work as long as the content in that element does not reach the right column. If it stretches to the right column then something will break and the columns will drop. Usually in a three column layout with a flexible centre you would float the left and right columns first and then follow this with a static element that has left and right margins to clear the left and right floated columns above (similar to this basic example).
Your original question was about centring some text so the methods offered for that example would not necessarily be the same if you were in fact creating a fluid layout. As I always say the answer to a questions is: “It depends on what comes next”
