Thanks for the detailed response. I was going into this new project after reading some of the “everything you know about css is wrong” from sitepoint. They were mentioning that what was commonly done with floats should be properly done with display:table and the related elements.
I haven’t touched websites in a bit and a lot has changed, but I am trying to get up to date while learning new common techniques, standards, and compliance in case any of my old knowledge is now a no no lol.
Here is my HTML and my CSS, I can’t show a demo of the page because of a NDA. But:
Note: I went to 2 columns instead of 3, because I was going to put the image strip mentioned below in one but it wouldn’t work since it needs to run down the entire page.
- There is a repeating background pattern.
- There is a static image at the footer that should always be positioned at the bottom right corner of the browser.
- There is an image strip on the right side of the page that runs the full length of the browser and should repeat if necessary.
- The content along with the image strip to the right should be centered within the browser.
I created a table with 2 cells, one for the main content of the right and another with the nav, logo, and social links to the left(This is why I believed I needed 3 rows). The image strip floats to the right of the table.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page-wrapper">
<div class="table">
<div class="left-column cell">
<div class="logo"><img src="./images/logo.jpg" /> </div>
<div class="nav">
<ul>
<li> <a href="#">Services</a> </li>
<li> <a href="#">About</a> </li>
<li> <a href="#">media</a> </li>
<li> <a href="#">FAQ</a> </li>
<li> <a href="#">feedback</a> </li>
<li> <a href="#">Contact</a> </li>
</ul>
</div>
<div class="social-icons">
<ul>
<li><a href="#"><img src="images/icons_facebook.png" /></a></li>
<li><a href="#"><img src="images/icons_twitter.png" /></a></li>
<li><a href="#"><img src="images/icons_linkedin.png" /></a></li>
<li><a href="#"><img src="images/icons_youtube.png" /></a></li>
<li class="last"><a href="#"><img src="images/icons_blog.png" /></a></li>
</ul>
</div>
</div>
<div class="middle-column cell">
<h1>Welcome</h1>
<p> Lorizzle fo shiz sit amizzle, yo adipiscing elit. Nullam sapien velit, own yo' volutpat, suscipizzle funky fresh, gravida vizzle, that's the shizzle. That's the shizzle owned check out this. Sed erizzle. You son of a bizzle izzle dolor crackalackin turpis tempus things. Maurizzle bow wow wow nibh et fo shizzle. Vestibulum rizzle black. Pellentesque fo shizzle my nizzle fo shizzle my nizzle crocodizzle. Pizzle shiznit ma nizzle platea dictumst. </p>
</div>
</div>
<div class="family-strip"></div>
</div>
<div class="footer-tree"></div>
</body>
</html>
@charset "UTF-8";
/* CSS Document */
/* = Basic Reset
*****************************************************/
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img,fieldset {
border:none;
}
html {
background:url(../images/bg.jpg) repeat;
}
body{
font-family:"Minion Pro", Times, "Times New Roman", serif;
color:#010000;
}
html, html body{
height:100%;
}
/* = Layout Styles
*****************************************************/
.page-wrapper{
height:100%;
width:1251px;
margin:0 auto;
}
.table{
display: table;
border-collapse:collapse;
float:left;
margin: 0 45px 0 65px;
}
.cell{
display:table-cell;
}
.table-row{
display:table-row;
}
h1{
font-size: 35px;
}
h2{
font-size:25px;
}
h1,h2{
color: #f15626;
margin-bottom:15px;
font-weight:lighter;
}
p{
font-size:17px;
}
.logo, .logo img{
width:251px;
height:227px;
}
.family-strip{
background:url(../images/bg_familystrip.png) repeat-y;
width:170px;
min-height:100%;
float:left;
}
.footer-tree{
background:url(../images/bg_tree.png) no-repeat;
position:absolute;
right:0;
bottom:0;
z-index:-1;
width:590px;
height:490px;
}
/* = Columns
*****************************************************/
.left-column{
padding-right:45px;
width:251px;
}
.middle-column{
vertical-align:top;
background:url(../images/bg_content.png) repeat;
padding: 60px 95px 0 95px;
width:460px;
}
/* = Navigation
*****************************************************/
.nav {
display:block;
background:url(../images/bg_content.png) repeat;
padding:30px 0 4px 0;
margin-bottom:15px;
}
.nav ul{
list-style:none;
text-align:center;
}
.nav li{
margin-bottom:32px;
}
.nav a {
padding:0 5px;
font-size:22px;
font-weight:bold;
text-decoration:none;
color:#010000;
}
.nav a:hover{
color: #f15626;
}
.nav a:before, .nav a:after {
content:url(../images/nav_bullet.png);
margin:0 7px;/* horizontal margin*/
position:relative;
top:-4px;
display:none;
}
.nav a:hover:before,.nav a:hover:after{
display:inline-block;
}
/* = Style Social Icon List
*****************************************************/
.social-icons ul{
list-style:none;
margin-left:4px;
}
.social-icons li{
display:inline;
margin-right:19px;
}
.social-icons li.last{
margin-right:0;
}
However I just went ahead and 3 normal divs into the cell table. So far everything seems to be working as it should, but I am not sure if how compliant this is or whether or it good or bad coding practice lol :(.