Simplicity is always key when developing a site. Forcing a site to use nothing but CSS is more of a hassle when it comes to a situation like this one. In my vertical centering using CSS example you’re immediately forced into using conditional statements for Internet Explorer before your site ever even takes shape. Not only is it a lot of code to get the document to center vertically and horizontally but there’s a greater chance of breaking the working code as the side progresses or running into an issue with overflow. The single table in this article gets rid of what might happen and there’s no scrolling content in the center (unless that’s the look you’re after). Drop your CSS ego and use a table. Here’s the method (demo)
CSS Breakdown
html, body {
height:100%;
margin:0;
padding:0;
font:normal 12px/15px “Lucida Grande”, Verdana, Arial, Helvetica, serif; /* not relevant to the layout */
}
h3 { margin:0; } /* not relevant to the layout */
table {
background-color:#666; /* not relevant to the layout */
padding:0;
margin:0;
height:100%;
}
table div {
background-color:#333; /* not relevant to the layout */
padding:10px; /* not relevant to the layout */
border:1px solid white; /* not relevant to the layout */
width:500px;
height:500px;
margin:0 auto;
text-align:left; /* not relevant to the layout */
color:white; /* not relevant to the layout */
}
(more…)
This is one of the more common questions I see when it comes to CSS. It’s definitely not as straight forward as the valign=”middle” align=”center” that we used to use in tables (and still do). All the while, folks are doing their best to move completely out of tables and accomplish everything they used to do with an all CSS layout. Something that would be seemingly simple is actually not very straightforward at all. Here’s the method (demo).
CSS Breakdown
html, body {
height:100%;
margin:0;
padding:0;
}
body {
background-color:#ccc;
text-align:center;
min-width:720px;
min-height:420px;
}
#head {
margin:-210px 0 0 0; /* half the minimum height*/
width:100%;
float:left;
height:50%;
}
(more…)
This is a request I see quite often across the web…can it be done? Actually, it can be done and here’s the method behind it (demo). Only the relevant tags are commented on.
CSS Breakdown
body, html {
color: #000;
font:normal normal 12px/15px “Lucida Grande”, Verdana, Arial, Helvetica, serif;
background-color: #eee;
text-align: center; /* for IE */
height: 100%; /* force relative page heights globally */
margin:0; /* removes all the margins to prevent scrollbars from popping up here and there */
padding:0; /* removes all the padding to prevent scrollbars from popping up here and there */
border:0; /* removes all the borders to prevent scrollbars from popping up here and there */
}
#container {
margin:0 auto; /* centers the content */
width:950px;
text-align:left;
min-height:100%; /* self explanatory but this isn’t supported in IE… this is what makes the design full height in non-IE browsers */
background:#999;
}
* html #container { height: 100%; } /* this is the key component that allows the footer to be forced downward preventing the content from flowing over footer and clears up the min-height issues with IE */
#container a {
color:#222;
text-decoration:none;
}
#container a:hover {
color:#000;
text-decoration:underline;
}
(more…)
