3 column layout with css display table, with first row having multiple rows?

Hello,

I am working on a new website which:

  1. Has 3 columns - Each Column being a cell
  2. First column has 3 rows (Logo, Nav, icons) - Has a Div with display: table which wraps arround 3 divs with display:table-row.
  3. Other two columns only have 1 row. With the middle column being the content area.

However since this is my first time using display:table, I am running into some things that aren’t so clear to me. I was trying to avoid floating divs.

  1. If I need multiple rows with one cell in each row per column, do I embed each cell in a row or just create each row and not declare cells. I understand that browsers automatically create the missing elements but I want to make sure I do this properly to avoid any side effects that might occur due to the browser automatically creating the missing elements.

Edit:
I think my brain is just over worked, I guess I can accomplish this by just using 3 divs in the first column instead of using a nested table div with the rows. This just popped into my head.

For the first column, if I just added 3 normal divs to simulate the rows I need would this be good approach considering compliance, standards, and compatibility? Or would the browser attach anonymous table-cells/table-rows to the normal divs?

Hi,

I think you are overcomplicating this a little.:slight_smile: Don’t worry about what the browser will construct as that has no real influence here. If you define a table-cell then the browsers constructs an anonymous table-row and table around the cell but in reality is of no consequence to you.

The display table properties cannot imitate rowspan or colspan so don’t bother trying. If you want multiple rows with multiple celle then you will need to lay them out with a display:table-row parent for each row so that the browsers knows this is the end of the row.

It’s hard to say whether the structure you have is ok without seeing the content and the design. Usually you would start with content and then decide how it should be styled depending on how the content needs to behave rather than shoe-horning it into a grid that you have thought up. Of course there is always some give and take between methods to get a good looking design but content should be the first priority.

Display:table is suitable for column layouts that you don’t want to wrap and that you want to have equal columns. If you don’t need these functions then there is no need for using display:table as such as floats and other methods will suffice.

Also avoid thinking in terms of old fashioned table layout otherwise you just end up creating an old fashioned table layout but with css.:slight_smile: Although this is better than using an actual table it would be better to design with css in mind from the start and a more fluid and responsive approach.

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.

  1. There is a repeating background pattern.
  2. There is a static image at the footer that should always be positioned at the bottom right corner of the browser.
  3. 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.
  4. 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 :(.