I recently redesigned my whole website, taking out tables and instead making the structure in css.

For example, the main body of the site is a central column 1000px wide, so

.sitecolumns {display: table-cell; vertical-align: top}
#c1 {width: auto;  height:100%}
#c2 {width: 1000px;  height:100%} 
#c3 {width: auto;  height:100%}

 

Then when called upon I use

<div class="sitecolumns" id="c1"> </div>
 <div class="sitecolumns" id="c2">Main Content here</div>
<div class="sitecolumns" id="c3"> </div>

 

That's the basic structure, I repeat the structure to make a side-menu sit in the middle panel,

.sitebodycolumns {display: table-cell; border: 0px solid #000; vertical-align: top;}
#bc1 {width: 175px;  height:100%}
#bc2 {width: 800px;  height:100%}

<div class="sitebodycolumns" id="bc1"><?php include('includes/sidemenu.htm'); ?></div>
<div class="sitebodycolumns" id="bc2">page content here</div>

 

and similar structures throughout the site when I want to achieve anything in columns, where in the past I would have used table cells.

 

Here's the site:HERE

 

Quite often though, it loads with the main content sitting below the sidemenu (leaving a huge black space at the top of the page until you scroll down!)

I thought I'd fixed it by removing any mention of margins (It used to read

#bc1 {width: 175px; height:100%; margin-left:auto; margin-right:auto}

 

Can anyone try the link, navigate a few pages, refresh etc and see if you find the page loading correctly please? For me it still fails occasionally, but I'm not sure if that's still occasionally loading a cached version.

 

Any advice appreciated, I'm basically self-taught, (Well, Google helps quite a bit!) so be kind!

I can only get the glitch to happen on the 'view photos' pages. Weird.

 

The bulk of the site uses php includes to add the header, menus, footer etc, except on the 'view photos' pages, where the software didn't like the php, so I physically added the header, menus etc. But I can't see how that effects it, as the same css is still being called upon

I wouldn't suggest using display: table-cell unless you've completely given up on supporting IE7.

 

That sort of layout is easy to achieve with simple floats.

I wouldn't suggest using display: table-cell unless you've completely given up on supporting IE7.

 

That sort of layout is easy to achieve with simple floats.

Could you give me an example of a 'simple float'? I've not heard of that!

HTML:

 

<div class="container">
 <div class="main">
 </div>
 <div class="sidebar">
 </div>
</div>

 

CSS:

 

.container {
margin: 0;
padding: 0;
}

.main {
width: 75%;
float: left;
}

.sidebar {
width: 25%;
float: left;
}

Thanks, That does look simple!

 

As Div classes are already named, I could possibly just change the css and leave the rest of the site untouched!?

 

I'll have a play when I have time.

 

Cheers