CCs divs and table layout... baah!!!

droplink · Jan 9, 2015

I am sure that CSS is great for webdesign and it can do all sort of fancy things, but I just feel like pushing it down a flight a stairs!

I am trying to get back to doing some websites, and knowing tables are passé, I am trying to use CSS divs to position my elements, but going back to tables is so tempting...

Here is what I want to do:
Fiddle

But I can't for the life of me figure out how to do this with divs.

Any help ?

Jamesbot · Jan 9, 2015

CSS grid frameworks make this easy. There are many to choose from, just pick the one you like best.

960design · Jan 9, 2015

droplink said:
Reference: stair pushing. I've fallen and I cannot get up!!

First, build your site structure without thinking about design.

I'd build divs inside each section... sheesh... this is hard to explain

Code:

<div id='page'>
  <section class='sidebar-left'>
    <div id=''>111</div>
  </section>
  <section class='content'>
    <div id='222'>222</div>
    <span id='555'>555</span>
    <span id='666'>666</span>
  </section>
  <section class='sidebar-right'>
    <div id='444'>444</div>
    <span id='777'>777</span>
    <span id='888'>888</span>
  </section>
</div><!--end_page-->

Actually, depending on content I could use classes and ids. I'd try to keep it structurally agnostic so that I could possibly remove the 'sidebar-left' in a small mobile device view, and move the 'sidebar-right' underneath the 'content'... all with CSS. Or a million different ways to display the content with different devices.

Then style them with CSS; the part you are having trouble with.

You could float=left 'sidebar-left' and float=right 'sidebar-right', but I'd recommend using display='inline-block' for all sections with a width of something like 30% for each, centered within the 'page div'.

There's a million ways to do this... without knowing the purpose or platform, I can only reproduce your example ( without the table borders - if you need those I think you can handle it )

Code:

.sidebar-left,.content,.sidebar-right{
    display:inline-block;
    width:30%;
}
.sidebar-left{
    vertical-align:top;
}

Example:
http://jsfiddle.net/2ne588gp/1/

droplink · Jan 11, 2015

Jamesbot said:
CSS grid frameworks make this easy. There are many to choose from, just pick the one you like best.

Thanks, I have searched for a few, but they were not up to my liking

960design said:
First, build your site structure without thinking about design.

I'd build divs inside each section... sheesh... this is hard to explain

Code:

...

Actually, depending on content I could use classes and ids. I'd try to keep it structurally agnostic so that I could possibly remove the 'sidebar-left' in a small mobile device view, and move the 'sidebar-right' underneath the 'content'... all with CSS. Or a million different ways to display the content with different devices.

Then style them with CSS; the part you are having trouble with.

You could float=left 'sidebar-left' and float=right 'sidebar-right', but I'd recommend using display='inline-block' for all sections with a width of something like 30% for each, centered within the 'page div'.

There's a million ways to do this... without knowing the purpose or platform, I can only reproduce your example ( without the table borders - if you need those I think you can handle it )

Code:

..

Example:
http://jsfiddle.net/2ne588gp/1/

Ahhh!!! Now that is what I want to build!
I could steal your code and be dune with it, but I want to understand it

What is this ?

Code:

.sidebar-left, .content, .sidebar-right

I am unfamiliar with that writing ?

Here is my previous meager attempt:
http://jsfiddle.net/w7urw1uc/

960design · Jan 11, 2015

droplink said:
What is this ?

Code:

.sidebar-left, .content, .sidebar-right

I am unfamiliar with that writing ?

This is CSS shorthand.

In this case I shortened the code by comma separating the values and gave them all the same styling. I could have done it this way as well:

Code:

.sidebar-left{
  display:inline-block;
  width:30%;
}
.content{
  display:inline-block;
  width:30%;
}
.sidebar-right{
  display:inline-block;
  width:30%;
}

My structure comment ( after looking at your example ):
<div> is a block element; kinda like a <p> or <h1>
<span> is an inline element.

Try not to <div> your page to death. It just takes a little practice, but structurally your page would have been better served using <span> for the <div class='item'>. Please take my meager advice with a HUGE grain of salt, as there are literally hundreds of ways to do this. As long as you understand it and the job gets done, no one really cares how pretty code behind the vail is.

Search

Search

CCs divs and table layout... baah!!!

droplink

macrumors regular

Jamesbot

macrumors member

960design

macrumors 68040

droplink

macrumors regular

960design

macrumors 68040

Our Staff