My css classes are not affecting the h1 containing the wp single_post_title()
<div class="intro-text child">
<!--<h1 class="herotext sr-hero">Kompletní<br>realizace staveb.</h1>-->
<?php
if ( is_front_page() ) {
echo '
<img src="' . get_template_directory_uri() .'/img/samsonsvg2_animated.svg" class="samsonlogo">
';
}
else {
echo '
<h1 class="herotext sr-hero">'. single_post_title() .'</h1>
';
}
?>
</div>
css:
.herotext {
font-size: 10vh;
font-weight: 300;
color: #EF7F1A;
}
Solved it by assigning the .herotext class to the parent div
<div class="intro-text child herotext">
<!--<h1 class="herotext sr-hero">Kompletní<br>realizace staveb.</h1>-->
<?php
if ( is_front_page() ) {
echo '
<img src="' . get_template_directory_uri() .'/img/samsonsvg2_animated.svg" class="samsonlogo">
';
}
else {
echo '
<h1 class="sr-hero">'. single_post_title() .'</h1>
';
}
?>
</div>
Related
I cannot for the life of me
figure out why my footer is showing up in the middle of my webpage. I have my #content div set to have a height of 100% and have given it a relative position; and I even added an absolute position to my footer with bottom: 0;. What am I missing? I can't figure out what is causing it to not follow the normal flow of elements in the page!
I've checked several posts with this same problem, but the suggestion is almost always what I've tried above. I did try getting rid of the position for #content and the footer and instead setting display: inline-block; for both (was suggested in another post), and that didn't do anything.
Link to my in-progress page: http://freshcardsite.thewelllovedlife.com/home-use/
HTML for the Page (starting below the header):
<div class="site-content-contain">
<div id="content" class="site-content">
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main consumer-page" role="main">
<?php
// vars
$topsection = get_field('consumer_top_image_section');
if( $topsection ): ?>
<div class="top-image" style="background-image: url(<?php echo $topsection['consumer_background_image']; ?>); background-size: cover; background-repeat: no-repeat; background-position: bottom center;">
<div class="top-section">
<div class="top-text">
<h1>Fresh Card</h1>
<p><?php echo $topsection['consumer_top_content']; ?></p>
<img src="<?php echo $topsection['consumer_top_icon']; ?>" />
</div>
</div>
</div>
<?php endif; ?>
<?php
// vars
$aboutsection = get_field('consumer_about_section');
if( $aboutsection ): ?>
<div class="about-section">
<div class="about-content">
<h2><?php echo $aboutsection['consumer_about_section_title']; ?></h2>
<p><?php echo $aboutsection['consumer_about_section_main_content']; ?></p>
</div>
<?php if($aboutsection['consumer_uses_section'] ): ?>
<div id="tabs">
<ul class="tabs">
<?php foreach($aboutsection['consumer_uses_section'] as $use): ?>
<li><h3><?php echo $use['consumer_use_name']; ?></h3><img src="<?php echo $use['consumer_use_icon']; ?>" /></li>
<?php endforeach; ?>
</ul>
<?php foreach($aboutsection['consumer_uses_section'] as $use): ?>
<div id="<?php echo $use['consumer_use_number']; ?>">
<p> <?php echo $use['consumer_use_information']; ?> </p>
<p> <?php echo $use['consumer_use_video']; ?</p>
<p> <?php echo
$use['consumer_second_use_video']; ?> </p>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<div class="contact-section">
<div class="contact-content">
<h2>Contact Us</h2>
<?php the_field('consumer_contact_section'); ?>
</div>
</div>
<?php if (have_posts() ) : ?>
<div class="news-section">
<div class="news-content">
<h2>Awards & News</h2>
<ul>
<?php $the_query = new WP_Query( 'posts_per_page=5' ); ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?>
</a></li>
<li><?php the_excerpt(__('(more…)')); ?></li>
<?php endwhile; wp_reset_postdata(); ?>
</ul>
</div>
</div>
<?php else : ?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .wrap -->
</div><!-- #content -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="wrap">
<?php
get_template_part( 'template-parts/footer/footer', 'widgets' );
if ( has_nav_menu( 'social' ) ) : ?>
<nav class="social-navigation" role="navigation" aria-label="
<?php esc_attr_e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'social',
'menu_class' => 'social-links-menu',
'depth' => 1,
'link_before' => '<span class="screen-reader-text">',
'link_after' => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
) );
?>
</nav><!-- .social-navigation -->
<?php endif;
get_template_part( 'template-parts/footer/site', 'info' );
?>
</div><!-- .wrap -->
</footer><!-- #colophon -->
</div><!-- .site-content-contain -->
</div><!-- #page -->
And here's my relevant CSS
html, body {
height: 100%;
}
.consumer-page {
min-width: 100%;
margin: 0 auto;
position: absolute;
left: 0;
top: 0;
}
#content {
position: relative;
height: 100%;
min-height: 100%;
}
footer#colophon {
position: absolute;
bottom: 0;
}
Your main problem is that .consumer-page is getting a position:absolute and its messing with your elements heights
Lets try the next classes:
.consumer-page {
min-width: 100%;
margin: 0 auto;
position: initial;
left: 0;
top: 0;
}
.wrap {
padding: 0;
width: 100vw;
max-width: 100vw;
margin: 0;
}
#content {
padding: 0;
}
footer#colophon {
position: initial;
bottom: 0;
}
Hope this helps. If you run into problems, pliss coment on this answer and will happily edit
I'm trying to make each <span> a new paragraph or add a break between each.
Here is my code:
<div class="post_custom_fields">
<?php
if (isset($gt3_theme_pagebuilder['page_settings']['portfolio']['skills']) && is_array($gt3_theme_pagebuilder['page_settings']['portfolio']['skills'])) {
foreach ($gt3_theme_pagebuilder['page_settings']['portfolio']['skills'] as $skillkey => $skillvalue) {
echo "<span>" . esc_attr($skillvalue['value']) . "</span>";
}
}
?>
</div>
Any help would be super appreciated!
Here is a picture of how the info is currently displaying on the website without any spacing between the fields I entered.
Have you thought about using a break?
<div class="post_custom_fields">
<?php
if (isset($gt3_theme_pagebuilder['page_settings']['portfolio']['skills']) && is_array($gt3_theme_pagebuilder['page_settings']['portfolio']['skills'])) {
foreach ($gt3_theme_pagebuilder['page_settings']['portfolio']['skills'] as $skillkey => $skillvalue) {
echo "<span>" . esc_attr($skillvalue['value']) . "</span><br/>";
}
}
?>
</div>
You could use some CSS on the span element
.post_custom_fields > span {
clear:both;
display: block;
margin: 2px 0;
}
I believe what you are asking for is either:
<div class="post_custom_fields">
<?php
if (isset($gt3_theme_pagebuilder['page_settings']['portfolio']['skills']) && is_array($gt3_theme_pagebuilder['page_settings']['portfolio']['skills'])){
foreach ($gt3_theme_pagebuilder['page_settings']['portfolio']['skills'] as $skillkey => $skillvalue) {
echo "<span>" . esc_attr($skillvalue['value']) . "</span><br />";
}
}
?>
</div>
OR
<div class="post_custom_fields">
<?php
if (isset($gt3_theme_pagebuilder['page_settings']['portfolio']['skills']) && is_array($gt3_theme_pagebuilder['page_settings']['portfolio']['skills'])) {
foreach ($gt3_theme_pagebuilder['page_settings']['portfolio']['skills'] as $skillkey => $skillvalue) {
echo "<p>" . esc_attr($skillvalue['value']) . "</p>";
}
}
?>
</div>
echo "<span>" . esc_attr($skillvalue['value']) . "</span> <br>";
or
echo "<p><span>" . esc_attr($skillvalue['value']) . "</span></p>";
I was trying to make a menu using cols from bootstrap. Something similar to this:
http://i.stack.imgur.com/55xst.png
But I think it's not the best way to make it because I found so much troubles when I tried to implement into Wordpress..
Have some idea how can make it in the right way?
This is my code
HTML:
<div class="container main-menu">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 col-menu logo">
<div class="item-menu">
<figure>
<img src="http://www.sdi-inc-usa.com/image/35012580_scaled_116x87.jpeg" alt="">
</figure>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-menu text-center">
<div class="item-menu">
<div class="txt-main-menu">
lorem ipsum
</div>
</div>
</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-6 col-md-3 col-menu text-center">
<div class="item-menu">
<div class="txt-main-menu">
lorem ipsum & lorem ipsum
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-menu text-center">
<div class="item-menu">
<div class="txt-main-menu">
lorem ipsum lorem ipsum lorem ipsum
</div>
</div>
</div>
</div>
</div>
CSS:
.main-menu {
margin-top: 40px;
}
.main-menu > .row > .logo {
text-align: left!important;
}
.main-menu > .row > .col-menu > .item-menu {
background: #f2f2f2;
padding: 10px;
height: 107px;
font-size: 1.375em;
position: relative;
}
.main-menu > .row > .col-menu > .item-menu:hover {
background: #bcd22c;
}
.txt-main-menu > a {
font-family: 'museo-700';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 25px 25px;
text-decoration: none;
color: #565656;
}
.col-menu {
padding-left: 0px;
padding-right: 5px;
padding-bottom: 5px;
}
/** END Main Menu - LOGO*/
#media screen and (max-width: 767px) {
div.col-menu:nth-child(2n+3),
div.col-news:nth-child(2n+3),
div.col-menu:nth-child(2),
div.col-news:nth-child(2) {
padding: 0;
}
.col-grid {
padding-right: 0;
}
}
Thank you
I'd suggest you use the "navbar" component. It is purpose build for this type of thing.
http://getbootstrap.com/components/#navbar
I found this bootsrap to wordpress series online http://bootstrapwp.com/adding-bootstrap-menu-wordpress-theme/ It is a excellent course for combining bswp.
The first step is to add a custom Walker menu to create the Bootstrap menu for the WordPress theme. We will then go over how to add the custom menu to the header of our WordPress theme and some minor customization options. You will also learn how make sure the menu has all the markup needed to be responsive and support child menu items.
Create a new file called bootstrap-walker.php in the /inc/ directory
In this file add the following code:
<?php
// Custom Walker Class for Bootstrap Menu
add_action( 'after_setup_theme', 'bootstrap_setup' );
if ( ! function_exists( 'bootstrap_setup' ) ):
function bootstrap_setup(){
class Bootstrap_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_lvl( &$output, $depth ) {
$indent = str_repeat( "\t", $depth );
$output .= "\n$indent<ul class=\"dropdown-menu\">\n";
}
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$li_attributes = '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = ($args->has_children) ? 'dropdown' : '';
$classes[] = ($item->current || $item->current_item_ancestor) ? 'active' : '';
$classes[] = 'menu-item-' . $item->ID;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = ' class="' . esc_attr( $class_names ) . '"';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>';
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
$attributes .= ($args->has_children) ? ' class="dropdown-toggle" data-toggle="dropdown"' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= ($args->has_children) ? ' <b class="caret"></b></a>' : '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
if ( !$element )
return;
$id_field = $this->db_fields['id'];
//display this element
if ( is_array( $args[0] ) )
$args[0]['has_children'] = ! empty( $children_elements[$element->$id_field] );
else if ( is_object( $args[0] ) )
$args[0]->has_children = ! empty( $children_elements[$element->$id_field] );
$cb_args = array_merge( array(&$output, $element, $depth), $args);
call_user_func_array(array(&$this, 'start_el'), $cb_args);
$id = $element->$id_field;
// descend only when the depth is right and there are childrens for this element
if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) {
foreach( $children_elements[ $id ] as $child ){
if ( !isset($newlevel) ) {
$newlevel = true;
//start the child delimiter
$cb_args = array_merge( array(&$output, $depth), $args);
call_user_func_array(array(&$this, 'start_lvl'), $cb_args);
}
$this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output );
}
unset( $children_elements[ $id ] );
}
if ( isset($newlevel) && $newlevel ){
//end the child delimiter
$cb_args = array_merge( array(&$output, $depth), $args);
call_user_func_array(array(&$this, 'end_lvl'), $cb_args);
}
//end this element
$cb_args = array_merge( array(&$output, $element, $depth), $args);
call_user_func_array(array(&$this, 'end_el'), $cb_args);
}
}
}
endif;
Save the boostrap-walker.php file
Open functions.php
At the bottom of this file, you will want to write the code to include our new bootstrap-walker.php file. It should look like the following:
<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* #package bootstrapwp
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<nav role="navigation">
<div class="navbar navbar-static-top navbar-default">
<div class="container">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="homepage"><?php bloginfo( 'name' ) ?></a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<?php
$args = array(
'theme_location' => 'primary',
'depth' => 2,
'container' => false,
'menu_class' => 'nav navbar-nav navbar-right',
'walker' => new Bootstrap_Walker_Nav_Menu()
);
if (has_nav_menu('primary')) {
wp_nav_menu($args);
}
?>
</div>
</div>
</div>
</nav>
</header><!-- #masthead -->
Note: I also removed the “skip to content” link from this code. I go over this in the next video tutorial.
Save the header.php file
Now that we have all the code in place, we can create a new Menu from the WordPress Dashboard. Login to the backend of your WordPress site (wp-admin) and go to Appearance -> Menu
Create a new menu, select and add a few pages to the menu, and assign it to the Primary Menu theme location.
Reload the front-end of your WordPress and play with your awesome Bootstrap menu!
If you want to learn more about the Walker Class you can read more about it http://codex.wordpress.org/Class_Reference/Walker
I have a demonstation here: DEMO
You should be able to see audio players displayed in a slider. The issue I am having is that I do not know how to center the audio player into the middle of slider. How can this be acheived and I want this working in all browsers:
Below is code displaying slider and an iframe which links to the audio player itself:
<style>
#galleriaaudio_<?php echo $key; ?>{ width: 550px; height: 200px; background: #000; }
</style>
<div id="galleriaaudio_<?php echo $key; ?>">
<?php
foreach ($arrAudioFile[$key] as $a) { ?>
<img class="iframe" src="Images/audiothumbnail.png">
<?php $j++; ?>
<?php } ?>
</div><br/>
<script type="text/javascript">
Galleria.loadTheme('jquery/classic/galleria.classic.min.js');
Galleria.run('#galleriaaudio_<?php echo $key; ?>');
</script>
<?php
}
I am using Galleria as my slider and documentation could be found here if you want to see: http://galleria.io/docs/
MORE INFORMATION:
I only want audio players in the slider to be centred in the slider.
Below is full code where if there is no audio then it displays a blank, if there is one audio then display single audio player on page (that is most of the code below), if multiple audio players then display in slder. This is for each questions even though I have not included the loop for each question in code snippet below:
//start:procedure audio
$aud_result = '';
if(empty($arrAudioFile[$key])){
$aud_result = ' ';
}else{
$j = 0;
if(count($arrAudioFile[$key]) == 1){
foreach ($arrAudioFile[$key] as $a) {
$info = pathinfo('AudioFiles/'.$a);
?>
<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer-<?php echo $key.'-'.$j; ?>").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
<?php echo $info['extension'];?>: "<?php echo "AudioFiles/".$a; ?>"
});
$(this).bind($.jPlayer.event.play, function() {
$(this).jPlayer("pauseOthers");
});
},
cssSelectorAncestor: "#jp_container_<?php echo $key.'-'.$j; ?>",
cssSelectorAncestor: "#jp_interface_<?php echo $key.'-'.$j; ?>",
solution:"flash,html",
swfPath: "jquery",
supplied: "<?php echo $info['extension'];?>"
});
});
</script>
<div id="jquery_jplayer-<?php echo $key.'-'.$j; ?>" class="jp-jplayer"></div>
<div id="jp_container_<?php echo $key.'-'.$j; ?>" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface" id="jp_interface_<?php echo $key.'-'.$j; ?>">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
<li>stop</li>
<li>mute</li>
<li>unmute</li>
<li>max volume</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li>repeat</li>
<li>repeat off</li>
</ul>
</div>
</div>
</div>
</div>
<?php
}
}else if(count($arrAudioFile[$key]) > 1){
?>
<style>
#galleriaaudio_<?php echo $key; ?>{ width: 550px; height: 200px; background: #000; margin:0; }
</style>
<div id="galleriaaudio_<?php echo $key; ?>">
<?php
foreach ($arrAudioFile[$key] as $a) { ?>
<img class="iframe" src="Images/audiothumbnail.png">
<?php $j++; ?>
<?php } ?>
</div><br/>
<script type="text/javascript">
Galleria.loadTheme('jquery/classic/galleria.classic.min.js');
Galleria.run('#galleriaaudio_<?php echo $key; ?>');
</script>
<?php
}
}
//end:procedure audio
You can center by adding margin: 0 auto to the element you want to center.
.jp-audio {
margin: 0 auto;
}
Please note that this only works if the element is a block element and has a set width.
Apply these styles, It should work
div.jp-audio {
margin: auto !important;
width: 85% !important;
}
Hi I'm modifying a Wordpress theme and I'm having some trouble positioning the outside container images that provide the border for the middle section of content. The problem is that the background images are not extending with the content, instead it stops at the bottom of the browser screen. The site is located here: http://www.richmindonline.com/test
I've never structured background images in this way before, so I apologize for my being naive to this issue.
Here's the CSS id's for the background image structure:
#main {border:1px solid blue; width:900px; display:block; margin:0px auto;}
#container {
width: 600px;
float:left;
border:0px solid red;
}
#content-before {
border:0px solid yellow;
content:"";
position:absolute;
display:block;
top:150px;
left:185px;
bottom:0px;
width:20px;
height:auto;
background:url('/test/wp-content/themes/basic/assets/images/main-boxed-light.png') 0px 0px repeat-y;
}
#content {
width:590px;
border:0px solid green;
}
#primary {
float:right;
overflow: hidden;
width: 250px;
border:1px solid brown;
}
#content-after {
border:0px solid yellow;
content:"";
float:left;
position:absolute;
display:block;
top:150px;
left:1145px;
bottom:0px;
width:20px;
height:auto;
background:url('/test/wp-content/themes/basic/assets/images/main-boxed-light.png') -20px 0px repeat-y;
}
#footer {
clear: both;
width: 100%;
}
Here is my index.php HTML div structure:
<?php get_header(); ?>
<div id="container">
<div id="content-before"></div><!-- #content-before-->
<div id="content">
<?php /* Top post navigation */ ?>
<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
<div id="nav-above" class="navigation">
<div class="nav-previous"><?php next_posts_link(__( '<span class="meta-nav">«</span> Older posts', 'your-theme' )) ?></div>
<div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span class="meta-nav">»</span>', 'your-theme' )) ?></div>
</div><!-- #nav-above --><?php } ?>
<?php /* The Loop — with comments! */ ?>
<?php while ( have_posts() ) : the_post() ?>
<?php /* Create a div with a unique ID thanks to the_ID() and semantic classes with post_class() */ ?>
<div id="post-<?php the_ID(); ?>"
<?php post_class(); ?>>
<?php /* an h2 title */ ?>
<h2 class="entry-title">
<?php the_title(); ?>
</h2>
<?php /* Microformatted, translatable post meta */ ?>
<div class="entry-meta">
<span class="meta-prep meta-prep-author"><?php _e('By ', 'your-theme'); ?></span>
<span class="author vcard"><a class="url fn n" href="<?php echo get_author_link( false, $authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __( 'View all posts by %s', 'your-theme' ), $authordata->display_name ); ?>"><?php the_author(); ?></a></span>
<span class="meta-sep"> | </span>
<span class="meta-prep meta-prep-entry-date">
<?php _e('Published ', 'your-theme'); ?></span>
<span class="entry-date"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time( get_option( 'date_format' ) ); ?></abbr></span>
<?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t" ) ?>
</div><!-- .entry-meta -->
<?php /* The entry content */ ?>
<div class="entry-content">
<?php the_content( __( 'Continue reading <span class="meta-nav">»</span>', 'your-theme' ) ); ?>
<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your-theme' ) . '&after=</div>');?> </div><!-- .entry-content -->
<?php /* Microformatted category and tag links along with a comments link */ ?>
<div class="entry-utility">
<span class="cat-links"><span class="entry-utility-prep entry-utility-prep-cat-links">
<?php _e( 'Posted in ', 'your-theme' ); ?></span><?php echo get_the_category_list(', '); ?>
</span>
<span class="meta-sep"> | </span>
<?php the_tags( '<span class="tag-links"><span class="entry-utility-prep entry-utility-prep-tag-links">' . __('Tagged ', 'your-theme' ) . '</span>', ", ", "</span>\n\t\t\t\t\t\t<span class=\"meta-sep\">|</span>\n" ) ?>
<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'your-theme' ), __( '1 Comment', 'your-theme' ), __( '% Comments', 'your-theme' ) ) ?></span>
<?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t\n" ) ?>
</div><!-- #entry-utility -->
</div><!-- #post-<?php the_ID(); ?> --> <?php /* Close up the post div and then end the loop with endwhile */ ?>
<?php endwhile; ?>
<?php /* Bottom post navigation */ ?>
<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
<div id="nav-below" class="navigation">
<div class="nav-previous"><?php next_posts_link(__( '<span class="meta-nav">«</span> Older posts', 'your-theme' )) ?></div>
<div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span class="meta-nav">»</span>', 'your-theme' )) ?></div>
</div><!-- #nav-below --><?php } ?>
</div><!-- #content -->
<div id="content-after"></div>
</div><!-- #container -->
<div id="primary" class="widget-area">
</div><!-- #primary .widget-area -->
<?php get_sidebar(); ?>
<div style="clear:both"></div>
<?php get_footer(); ?>
The min-height value of 100% that you are using to try to stretch the outer columns to the full length of the page isn't working because it returns the browser window height.
Perhaps posting the code for your template file so we can easily see your div structure would help in providing a resolution.