Hi i'm create website for mobile phone,
but i have a problem
i want add space in between box css
this is screenshot
and this is my code
<?php
include "connection.php";
?>
<ul data-role="listview" data-icon="false" data-divider-theme="a">
<li data-role="list-divider"><center><font color="white"><b>Sekolah Rekomendasi</b></font></center></li>
<div id="owl-demo-5">
<?php
$dataskl = mysqli_query($con,"SELECT alamat,diskon,link,logo,kode,nama_sekolah,vvip from sekolah where vvip='Ya' order by id_sekolah desc limit 0,10");
while ($skl = mysqli_fetch_object($dataskl))
{
$jd = $skl->link;
?>
<div style="border-style:solid;border-width:2px;width:162px;" class='product_item'>
<div>
<a data-ajax="false" href='<?php echo $jd ?>'>
<img style="float:left; margin-right:8px;width:70px;height:85px;" src='images/sekolah/logo/<?php echo $skl->logo ?>' class='c_image_1' alt=''>
</a>
<?php if ($skl->diskon=="Ya") { ?>
<div class='ribbon'><img src='images/biaya.png' alt=''></div>
<?php } else { } ?>
</div>
<?php
$ptng_nama = substr($skl->nama_sekolah,0,15);
$ptng_alamat = substr($skl->alamat,0,34);
?>
<div class='product_info'>
<a style="text-decoration:none" data-ajax="false" href='<?php echo $jd ?>'><font size="1"><?php echo $ptng_nama ?></font></a><br/>
<font size="1"><?php echo $ptng_alamat ?></font><br/>
<?php
$datac_pre = mysql_query("select count(id_kunjungan) as hitung from sekolah_kunjungan where kode='$skl->kode' and tgl_kunjungan between '$web->range_awal' and '$web->range_akhir'");
$cpre = mysql_fetch_object($datac_pre); ?>
<font size='1' color='blue'>Dilihat : <?php echo $cpre->hitung ?></font>
</div>
</div>
<?php } ?>
</div>
</ul>
How to add space in between box ?
helpme thank's
You can use margin or padding property in the css rules for those blocks.
CSS:
body, html {
margin:0;
padding:0;
}
div {
width:100px;
display:inline-block;
border:1px solid black;
height:300px;
}
.a {
margin-right:20px;
}
HTML:
<div class="a"></div><div class="b"></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 have done responsive webdesign a-lot that i cant simply remember how to make a div non-resposnive.
here is what my design looks like
when i take it to mobile it resizes, i don't want it to resize i want it to have a long width with an horizontal scroll bar.
here is my code sample.
<?php function acardio_big_grid_3() {
?>
<div class="row"><div class="clearfix eight-small-grid-contoler">
<div class="the-content-cat-bt" style="padding-bottom: 10px;"> <a class="tiptipBlog" title="Latest Post">Best Smartphone 2017</a> </div>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('post_type' => 'post', 'posts_per_page' => 8, 'paged' => $paged);
$query = new WP_Query($args);
if( $query->have_posts() ) :
while( $query->have_posts() ) : $query->the_post(); ?>
<?php $count++; ?>
<?php if ($count == 1) : ?>
<div class="all-eight-small-grid-thumbs">
<li class="the-big-list">
<div class="eight-small-grid-thumbs">
<div class="the-main-featured-image-responsive">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'the-featured-section-wordpress-thumbnail' ); } ?>
</div>
</div>
</li>
<?php elseif ($count == 2) : ?>
<li class="the-big-list">
<div class="eight-small-grid-thumbs">
<div class="the-main-featured-image-responsive">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'the-featured-section-wordpress-thumbnail' ); } ?>
</div>
</div>
</li>
<?php elseif ($count == 3) : ?>
<li class="the-big-list">
<div class="eight-small-grid-thumbs">
<div class="the-main-featured-image-responsive">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'the-featured-section-wordpress-thumbnail' ); } ?>
</div>
</div>
</li>
<?php elseif ($count == 4) : ?>
<li class="the-big-list">
<div class="eight-small-grid-thumbs">
<div class="the-main-featured-image-responsive">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'the-featured-section-wordpress-thumbnail' ); } ?>
</div>
</div>
</li>
<?php elseif ($count == 5) : ?>
<li class="the-big-list">
<div class="eight-small-grid-thumbs">
<div class="the-main-featured-image-responsive">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'the-featured-section-wordpress-thumbnail' ); } ?>
</div>
</div>
</li>
<?php elseif ($count == 6) : ?>
<li class="the-big-list">
<div class="eight-small-grid-thumbs">
<div class="the-main-featured-image-responsive">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'the-featured-section-wordpress-thumbnail' ); } ?>
</div>
</div>
</li>
</div>
</div>
</div>
<?php else : ?>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
<?php
}
add_shortcode( 'acardio-big-grid-3', 'acardio_big_grid_3' );
?>
please what do i do to make sure it doesn't break on mobile like this
instead to be long and have a scroll bar.
Like this
To get the side scrolling, you can set overflow-y: auto so if the contents inside of the container are wider then the container, you'll get the side scrolling you're looking for.
#container {
border: 1px solid red;
width: 350px;
overflow-y: auto;
}
#inner {
width: 620px;
}
article {
display: inline-block;
background-color: #ccc;
width: 200px;
height: 200px;
}
<div id="container">
<div id="inner">
<article></article>
<article></article>
<article></article>
</div>
</div>
I'm not sure how to centre a doubleclick ad horizontally. After reading this similar question Centre align leaderboard ad, I'm using this code now
<div class="center">
<style type="text/css">
.center {
text-align: center;
margin: 0 auto;
}
</style>
AD CODE
</div>
But it doesn't work. Any ideas?
To clarify, the ad is being used on this website. http://worldgreendaily.com/
The total code on the page is:
<?php
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
$page_layout = get_option(THEME_NAME."_page_layout");
//logo settings
$logo = get_option(THEME_NAME.'_logo');
$search = get_option(THEME_NAME.'_search');
//top banner
$topBanner = get_option(THEME_NAME."_top_banner");
$topBannerCode = get_option(THEME_NAME."_top_banner_code");
//fixed menu
$menuStyle = get_option(THEME_NAME."_menu_style");
$weatherSet = get_option(THEME_NAME."_weather");
$weather = OT_weather_forecast($_SERVER['REMOTE_ADDR']);
// header social icons
$socialHeader = get_option(THEME_NAME."_social_header");
$vimeo = get_option(THEME_NAME."_vimeo");
$twitter = get_option(THEME_NAME."_twitter");
$facebook = get_option(THEME_NAME."_facebook");
$googlepluss = get_option(THEME_NAME."_googlepluss");
$pinterest = get_option(THEME_NAME."_pinterest");
$tumblr = get_option(THEME_NAME."_tumblr");
$linkedin = get_option(THEME_NAME."_linkedin");
$dribbble = get_option(THEME_NAME."_dribbble");
$soundcloud = get_option(THEME_NAME."_soundcloud");
?>
<!-- BEGIN .boxed -->
<div class="boxed<?php echo $page_layout=="boxed" ? " active" : false; ?>">
<!-- BEGIN .header -->
<div class="header">
<!-- BEGIN .header-very-top -->
<div class="header-very-top">
<!-- BEGIN .wrapper -->
<div class="wrapper">
<div class="left">
<?php
if ( function_exists( 'register_nav_menus' )) {
$walker = new OT_Walker_Top;
$args = array(
'container' => '',
'theme_location' => 'top-menu',
'items_wrap' => '<ul class="ot-menu very-top-menu load-responsive" rel="'.__("Top Menu", THEME_NAME).'"><li><i class="fa fa-home"></i></li>%3$s</ul>',
'depth' => 3,
'walker' => $walker,
"echo" => false
);
if(has_nav_menu('top-menu')) {
echo wp_nav_menu($args);
}
}
?>
</div>
<?php if($weatherSet=="on") { ?>
<?php if(!isset($weather['error'])) { ?>
<div class="right">
<div class="weather-report">
<span><?php _e("Weather",THEME_NAME);?></span>
<b><?php echo $weather['country'].', '.$weather['city'];?></b>
<img src="<?php echo THEME_IMAGE_URL.$weather['image'];?>.png" alt="<?php echo $weather['country'].', '.$weather['city'];?>" />
<font class="weather-meter" style="background: <?php echo $weather['color'];?>;"><?php echo $weather['temp_'.get_option(THEME_NAME."_temperature")];?></font>
</div>
</div>
<?php
} else {
echo $weather['error'];
}
?>
<?php } ?>
<div class="clear-float"></div>
</div>
<div class="double-split"></div>
<!-- END .header-very-top -->
</div>
<!-- BEGIN .header-middle -->
<div class="header-middle">
<div class="wrapper">
<?php if($logo) { ?>
<div class="logo-image">
<h1><?php bloginfo('name'); ?></h1>
<img class="logo" src="<?php echo $logo;?>" alt="<?php bloginfo('name'); ?>" />
</div>
<?php } else { ?>
<div class="logo-text">
<h1><?php bloginfo('name'); ?></h1>
</div>
<?php } ?>
<?php if($topBanner=="on") { ?>
<div class="banner">
<div class="banner-block">
<?php echo stripslashes(do_shortcode($topBannerCode));?>
</div>
<?php if (is_pagetemplate_active("template-contact.php")) { ?>
<?php $contactID = ot_get_page('contact'); ?>
<div class="banner-info">
<span class="icon-default"> </span><?php _e("Sponsored Advert", THEME_NAME);?><span class="icon-default"> </span>
</div>
<?php } ?>
</div>
<?php } ?>
<div class="clear-float"></div>
</div>
<!-- END .header-middle -->
</div>
<!-- BEGIN .header-menu -->
<div class="header-menu<?php if($menuStyle=='on') { echo ' thisisfixed'; } ?>">
<div class="wrapper">
<?php
wp_reset_query();
if ( function_exists( 'register_nav_menus' )) {
$walker = new OT_Walker;
$args = array(
'container' => '',
'theme_location' => 'middle-menu',
'items_wrap' => '<ul class="%2$s main-menu" >%3$s</ul>',
'depth' => 3,
"echo" => false,
'walker' => $walker
);
if(has_nav_menu('middle-menu')) {
echo wp_nav_menu($args);
} else {
echo "<ul class=\"main-menu\"><li class=\"navi-none\">Please set up ".THEME_FULL_NAME." menu!</li></ul>";
}
}
?>
<?php if($search=="on") { ?>
<div class="right menu-search">
<form method="get" action="<?php echo home_url(); ?>" name="searchform" >
<input type="text" value="" placeholder="<?php _e("Search something..",THEME_NAME);?>" name="s" id="s"/>
<input type="submit" class="search-button" value=" " />
</form>
</div>
<?php } ?>
<div class="clear-float"></div>
</div>
<!-- END .header-menu -->
</div>
<!-- BEGIN .header-undermenu -->
<div class="header-undermenu">
<div class="wrapper">
<?php
if ( function_exists( 'register_nav_menus' )) {
$args = array(
'container' => '',
'theme_location' => 'third-menu',
"link_before" => '<i>',
"link_after" => '</i>' ,
'items_wrap' => '<ul class="secondary-menu" >%3$s</ul>',
'depth' => 1,
"echo" => false
);
if(has_nav_menu('third-menu')) {
echo wp_nav_menu($args);
}
}
?>
<div class="clear-float"></div>
</div>
<!-- END .header-undermenu -->
</div>
<!-- END .header -->
</div>
<?php wp_reset_query(); ?>
<div style="text-align: center; margin: 0 auto;"><!-- Test_WGD -->
<div id='div-gpt-ad-1419519536676-0' style='width:728px; height:90px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1419519536676-0'); });
</script></div>
</html>
If you put your css on the page instead of linking to an external css file you should be putting it inside the <head></head> tags. Your document should look something like this:
<html>
<head>
<style type="text/css">
.center {
text-align: center;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="center">AD CODE</div>
</body>
</html>
you can also use inline styling (which I would not recommend) if you wanted the styles near the div like your example:
<div style="text-align: center; margin: 0 auto;">AD CODE</div>
UPDATE
This is being pulled in from an iframe. What you need to do is find the id that I have pointed out in the below image:
Which is this:
<div id='div-gpt-ad-1419519536676-0' style='width:728px; height:90px;'>
and add margin: auto to it, like so:
<div id='div-gpt-ad-1419519536676-0' style='width:728px; height:90px; margin: auto;'>
That should center your image
div and style tags must be replaced.
<html>
<head>
<style type="text/css">
.center {
text-align: center;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="center">
AD CODE
</div>
</body>
</html>
How to style the elements dynamic in iteration
In test.phtml page
<?php foreach($tests => $test) { ?>
<li class="<?php echo $test['class'] ?>">
<a href="#" title="">
Test Instance
</a>
<style type="text/css">
li.<?php echo $test['class'] ?> a:hover {
color: <?php echo $test['color'] ?>;
background-color: <?php echo $test['bgColor'] ?>;
}
</style>
</li>
<?php } ?>
Style tags are coming in page.
<li class="third-item">
<a href="#" title="">
Test Instance
</a>
<style type="text/css">
li.third-item a:hover {
color: #498995;
background-color: #dbe7ea;
}
</style>
</li>
But, these style have no effect in webpage.
Please help me to solve this problem...
You can use inline style tag like this.
<li style="color:<?php echo $test['color']; ?>;background-color: <?php echo $test['bgColor'] ?>;"><a>Test</a></li>
I have modify your code check it.
<?php foreach($tests => $test) { ?>
<style type="text/css">
li.<?php echo $test['class'] ?> a:hover {
color: <?php echo $test['color'] ?>;
background-color: <?php echo $test['bgColor'] ?>;
}
</style>
<li class="<?php echo $test['class'] ?>">
<a href="#" title="">
Test Instance
</a>
</li>
<?php } ?>
You should define internal styles in the head-section of the htmldocument. Visit http://www.w3schools.com/css/css_howto.asp.
You could use your loop to define variables both for the head-section and the later markup and echo them at the right position.
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.