10 replies [Last post]
gotaquestion
Offline
newbie
Last seen: 10 years 10 weeks ago
Timezone: GMT-4
Joined: 2012-07-23
Posts: 6
Points: 7

Ok I don't know how much and of which code you need to see so ill post bits of each.

TRYING TO DO: Want the main content portion of the site in between header and footer to have white background that stretches to fill enter screen UNTIL the fixed footer.

USING: Wordpress + 960.gs.

WHAT'S HAPPENING: Best described through this picture.

simplified structure html basics

<html>
  <head>
  <body>
   <div class="wrapper">
    <div id="ribbon">
    <div id="contentwrap1">
      <div id="content_wrapper" class="container_12 clearfix">
         <div id="content" class="grid_8">
         <div id="sidebar-wrap" class="grid_4">
      </div>
      <div style="clear: both"></div>
    </div>
      <div class="push"></div>
    <div id="footer" class="footer">
   </body>
</html>

snippets of the css

@import url('reset.css');
@import url('typography.css');
@import url('grid.css');
@import url('forms.css');
 
/* header */
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	min-height: 100%;
}
 
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -90px;
}
 
#ribbon {
	height: 90px;
}
 
.header {
        padding: 0px 0px 50px 10px;
	position: relative;
	width: 100%;
}
 
 
#menu-navigation, .menu, .widget_nav_menu,{
	width:100%;
}
 
.header li{
	float: left;
}
 
.header ul.menu li#menu-item-19,#menu-item-17,#menu-item-18  {border-right: 1px solid white; padding:0 10px 0 10px;}
.header ul.menu li#menu-item-16 {padding:0 0 0 10px;}
 
 
#content_wrapper{
	min-height: 100%;
	height: 100%;
	background-color: white;
}

I feel like I have done this in the past and never had a problem, any help would be appreciated. I have tried pretty much everyone on the internets suggestion and have spent litterally 4-5 hours figuring this out.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

The simplified markup you

The simplified markup you give is meant so we can replicate the problem Smile What you gave us is unworkable and I can only hope your actual markup is better. Make sure all the div's are closed etc.

Did you read up about Debugging CSS

gotaquestion
Offline
newbie
Last seen: 10 years 10 weeks ago
Timezone: GMT-4
Joined: 2012-07-23
Posts: 6
Points: 7

Maybe this sounds stupid, but

Ok, html pulled straight from firebug:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title> </title>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<meta content="description here" name="description">
<link media="screen" href="http://localhost/portfolio/wp-content/themes/simon-wp-framework/style.css" type="text/css" rel="stylesheet">
<link href="http://localhost/portfolio/feed/" title="title here" type="application/rss+xml" rel="alternate">
<link href="http://localhost/portfolio/xmlrpc.php" rel="pingback">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Permanent+Marker|Arimo">
<link href="http://localhost/portfolio/xmlrpc.php?rsd" title="RSD" type="application/rsd+xml" rel="EditURI">
<link href="http://localhost/portfolio/wp-includes/wlwmanifest.xml" type="application/wlwmanifest+xml" rel="wlwmanifest">
<link href="http://localhost/portfolio/pricing/" title="Pricing" rel="next">
<meta content="WordPress 3.4.1" name="generator">
<link href="http://localhost/portfolio/" rel="canonical">
</head>
<body>
<div class="wrapper">
<div id="ribbon">
<div class="container_12">
         <div class="header">
            <div id="header-wrap">
                <div id="nav-bar">
                    <div style="clear: both"> </div>
                </div>
            </div>
         </div>
         <div style="clear: both"></div>
</div>
<div id="contentwrap1">
     <div id="content_wrapper" class="container_12 clearfix">
         <div id="content" class="grid_8">
                  <div id="post-entries">
                    <div id="post-4" class="post-4 page type-page status-publish hentry"></div>
                  </div>
            <div id="sidebar-wrap" class="grid_4">
                <div id="sidebar">
                   <ul>
                    <li id="text-2" class="widget widget_text">
                       <div class="textwidget">widget sidebar</div>
                    </li>
                   </ul>
                 </div>
             </div>
          </div>
       </div>
       <div style="clear: both"></div>
</div>
<div class="push"></div>
<div id="footer" class="footer">
         <div id="footer_wrap" class="container_12">
             <div id="footer_info" class="grid_12">
                   <div id="footer_info_wrap">
                     <p>
                     Copyright &copy; 2012
                     <a href="http://localhost/portfolio/"> footer info </a>
                      -
                     <a href="http://localhost/portfolio/wp-login.php">Log in</a>
                     </p>
                    </div>
              </div>
          </div>
</div>
</body>
</html>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

You have everything wrapped

You have everything wrapped in #ribbon which has a height of 90px

gotaquestion
Offline
newbie
Last seen: 10 years 10 weeks ago
Timezone: GMT-4
Joined: 2012-07-23
Posts: 6
Points: 7

Ribbon shows closed in

Ribbon shows closed in firebug and in my php file. I will double check and report back.

EDIT: Checked ribbon is closed as it should be. Height is only defined to itself, no mention of ribbon in style of any of the contents wrapping in style panel in Firebug.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

All of this markup is within

All of this markup is within ribbon:

<div id="ribbon">
<div class="container_12">
<div class="header">
<div id="header-wrap">
<div id="nav-bar">
<div style="clear: both"> </div>
</div>
</div>
</div>
<div style="clear: both"></div>
</div>
<div id="contentwrap1">
<div id="content_wrapper" class="container_12 clearfix">
<div id="content" class="grid_8">
<div id="post-entries">
<div id="post-4" class="post-4 page type-page status-publish hentry">
</div>
</div>
<div id="sidebar-wrap" class="grid_4">
<div id="sidebar">
<ul>
<li id="text-2" class="widget widget_text">
<div class="textwidget">widget sidebar</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div style="clear: both"></div>
</div>
<div class="push"></div>
<div id="footer" class="footer">
<div id="footer_wrap" class="container_12">
<div id="footer_info" class="grid_12">
<div id="footer_info_wrap">
<p>
Copyright © 2012
<a href="http://localhost/portfolio/"> Shane Hughes Web Design </a>
-
<a href="http://localhost/portfolio/wp-login.php">Log in</a>
</p>
</div>
</div>
</div>
</div>
 
</div>

So if the height of ribbon is 90px then having stuff with 100% height inside is going to be 90px.
and anything with a larger height is going to cause problems somewhere.

gotaquestion
Offline
newbie
Last seen: 10 years 10 weeks ago
Timezone: GMT-4
Joined: 2012-07-23
Posts: 6
Points: 7

Tony, first off, words cant

Tony, first off, words cant describe how happy I am someone is willing to help me out just to be helpful. Your a nice person! Big smile

Like I said though ribbon doesn't appear to be consuming everything below it, I even tried an extra </div> closing tag after it to verify and all it did was wreck havoc on any structure the was on the page. As well, firebug shows it closed as it is.

I cleaned up the HTML to make it easier to read in the original post. I see it doesn't show the </div> for the ribbon and that is where your concern is. What I said still stands though, when I add it wrecks the page.

I should also mention as the content fills it corrects the problem through just stretching, however I am getting into doing this sort of stuff for others and I don't want it to "just work" I want it to work regardless of if there is no content in the box or 5 pages worth.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Firebug most likely closes

Firebug most likely closes tags automatically you are probably better off viewing source to get the markup.

Try this, view source, copy it to a text file then starting at the middle find each open and closed tag pair then delete and keep working out.

Make sure you have validated your markup and styles.

gotaquestion
Offline
newbie
Last seen: 10 years 10 weeks ago
Timezone: GMT-4
Joined: 2012-07-23
Posts: 6
Points: 7

Ok so I read over the view

Ok so I read over the view source and it looked like yeah, it was missing the </div> to end ribbon. However when I did add it everything goes crazy and I essentially have the reverse problem; Now the white middle wont go all the way to the top!

Here is a picture of what is happening:
Really wish I could figure this out...

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Did you validate? If you can

Did you validate?
If you can make a link available I can have a look.

gotaquestion
Offline
newbie
Last seen: 10 years 10 weeks ago
Timezone: GMT-4
Joined: 2012-07-23
Posts: 6
Points: 7

It is server side, how can I

It is server side, how can I validate it? I followed your link but won't let me upload more than one file and this is composed of multiple php pages.

EDIT: Copy and pasted it in. It validates except some of the meta says its not self closed using /> at the end, verified it is though.

There was one parse error in the CSS validation cleared it however, no change. I even did my usual and throw up a SEPERATE barebones version to see if I could get it to do it. Turns out I am not crazy because I got that version to work but it won't with this site. I have a feeling it has to do with the 960.gs.