CSS collapsing layout and mysterious margin in custom WordPress theme - php

Question

I am making a simple wordpress theme for a friend that will be designed specifically for the content he will be posting. I am now in te process of switching out the temporary static content for dynamic php content.
I have limited knowledge of CSS and usually spend half the time googleing things, and now I have encountered the first real problem that I cant find a solution to myself. In the index.php-part of my theme is a div that contains two floated divs, left (main content) and right (extra stuff), the left one will always have content in it (the WP loop fetching the news posts) while the one on the right may at times be empty (here I have a loop that fetches the featured image of posts that I want to highlight, linking to that post).
Now if no posts are shown in the right div, the containing div ignores the left div and collapses. I previously had the problem of it collapsing anyway, which I solved by giving the container this CSS:
overflow: auto;
}
* html #main {
height: 1%;
}
Here is my html for the index.php (static content in 'main_left' will be replaced with a WP loop later):
<?php get_header(); ?>
<div id="main"><div id="main_left"><h2>Välkommen till Klamas Kultur & Nöje!</h2><p class="small">Klamas Kultur & Nöje producerar fars, komedi och barnteater – både inomhus och utomhus – i hela Västsverige, och har gjort så sedan 1987.</p><hr />
<h1>TURNÉ - Våren 2015</h1><p class="small">Publicerat 2014-12-09 18:42</p>
<p>Efter höstens stora succé, med utsålda hus på Fjärås Bygdegård, ger sig gänget under våren 2015 ut på en liten turné. Första stopp blir Vänersborgs Teater där det blir nypremiär SÖNDAG 18/1 kl. 15.00. Då kommer dessutom ett antal Tvåstadsbekantingar att dyka upp på scen, nämligen Thomas Fridén, Maria Zeffer Johnsson samt Thomas Green. Fyra veckor varar spelperioden för att sedan avslutas med att original-ensemblen återförenas för en finalhelg med föreställningar på Dergårdsteatern i Lerum LÖRDAG 14/2 kl. 19.00 samt på Kungsbacka Teater SÖNDAG 15/2 kl. 15.00.</p>
<h1>TURNÉ - Våren 2015</h1><p class="small">Publicerat 2014-12-09 18:42</p>
<p>Efter höstens stora succé, med utsålda hus på Fjärås Bygdegård, ger sig gänget under våren 2015 ut på en liten turné. Första stopp blir Vänersborgs Teater där det blir nypremiär SÖNDAG 18/1 kl. 15.00. Då kommer dessutom ett antal Tvåstadsbekantingar att dyka upp på scen, nämligen Thomas Fridén, Maria Zeffer Johnsson samt Thomas Green. Fyra veckor varar spelperioden för att sedan avslutas med att original-ensemblen återförenas för en finalhelg med föreställningar på Dergårdsteatern i Lerum LÖRDAG 14/2 kl. 19.00 samt på Kungsbacka Teater SÖNDAG 15/2 kl. 15.00.</p>
<h1>TURNÉ - Våren 2015</h1><p class="small">Publicerat 2014-12-09 18:42</p>
<p>Efter höstens stora succé, med utsålda hus på Fjärås Bygdegård, ger sig gänget under våren 2015 ut på en liten turné. Första stopp blir Vänersborgs Teater där det blir nypremiär SÖNDAG 18/1 kl. 15.00. Då kommer dessutom ett antal Tvåstadsbekantingar att dyka upp på scen, nämligen Thomas Fridén, Maria Zeffer Johnsson samt Thomas Green. Fyra veckor varar spelperioden för att sedan avslutas med att original-ensemblen återförenas för en finalhelg med föreställningar på Dergårdsteatern i Lerum LÖRDAG 14/2 kl. 19.00 samt på Kungsbacka Teater SÖNDAG 15/2 kl. 15.00.</p>
</div>
<div id="main_right">
<div id="main_right_top"><h3>AKTUELLT</h3></div>
<?php query_posts('cat=4 &posts_per_page=3'); while (have_posts()) : the_post(); ?>
<div class="main_right_contents"><?php the_post_thumbnail('category-thumbnail'); ?>Mer info & Bokning</div>
</div>
<?php endwhile; ?>
</div>
<?php get_footer(); ?>
The 'main'-div is inside two additional divs spanning the entire layout; 'dropshadow' and 'wrapper'.
This is the full CSS stylesheet:
body {
margin: 0px;
background-attachment: fixed;
background-image: url(graphics/burnBG.jpg);
background-repeat: repeat-y;
background-position: center top;
}
#dropshadow {
width: 990px;
height: 100%;
margin-right: auto;
margin-left: auto;
background-image: url(graphics/dropShadow.png);
background-repeat: repeat-y;
margin-bottom: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#wrapper {
width: 950px;
height: 100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#header {
background-color: #FFFFFF;
height: 260px;
width: 950px;
margin-right: auto;
margin-left: auto;
}
#banner {
background-color: #FFFFFF;
margin: 0px;
height: 225px;
width: 100%;
}
#slider_container {
z-index: 9;
position: relative;
}
#logo {
z-index: 10;
margin-top: -225px;
position: relative;
}
#menu {
background-color: #ffff2d;
height: 35px;
margin: 0px;
}
#main {
width: 950px;
height: 100%;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
overflow: auto;
}
* html #main {
height: 1%;
}
#main_left {
width: 572px;
height: 100%;
float: left;
border-right-width: 3px;
border-right-style: dotted;
border-right-color: #ffff2d;
padding-top: 10px;
padding-right: 25px;
padding-bottom: 25px;
padding-left: 25px;
}
#main_right {
float: right;
width: 325px;
height: 100%;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}
#main_right_top {
width: 250px;
margin-right: 25px;
margin-left: 20px;
padding-right: 15px;
padding-left: 15px;
height: 28px;
background-image: none;
background-color: #883831;
line-height: 28px;
}
.main_right_contents {
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
width: 280px;
margin-right: 25px;
margin-left: 20px;
background-image: url(graphics/diagonalstripes.png);
background-repeat: repeat;
margin-top: 10px;
}
#main_full {
width: 870px;
height: 100%;
padding-top: 10px;
padding-right: 40px;
padding-bottom: 25px;
padding-left: 40px;
}
#main_full a:link{
font-family: "Trebuchet MS";
color: #000000;
text-decoration: underline;
}
#main_full a:hover{
color: #000000;
text-decoration: none;
background-color:#ffff2d;
}
#main_full a:visited{
font-family: "Trebuchet MS";
color: #000000;
text-decoration: underline;
}
#footer {
width: 950px;
margin-right: auto;
margin-left: auto;
height: 150px;
margin-bottom: 0px;
border-top-width: 7px;
border-top-style: double;
border-top-color: #ffff2d;
background-image: url(graphics/footerBG.jpg);
background-repeat: repeat-x;
}
#footer a:link{
font-family: Arial, Helvetica, sans-serif;
color: #cb867c;
text-decoration: none;
}
#footer a:hover{
color: #000000;
background-color:#ffff2d;
}
#footer a:visited{
font-family: Arial, Helvetica, sans-serif;
color: #cb867c;
}
#footer_contents {
margin: 0px;
height: 130px;
width: 910px;
padding-right: 20px;
padding-left: 10px;
color: #cb867c;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
vertical-align: bottom;
}
#footer_contents_left {
float: left;
width: 600px;
padding-top: 110px;
}
#footer_contents_right {
float: left;
width: 200px;
padding-top: 10px;
padding-left: 110px;
}
#copyright {
width: 865px;
margin-bottom: 0px;
padding-right: 45px;
padding-left: 20px;
padding-top: 3px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #cb867c;
padding-bottom: 0px;
bottom: 0px;
height: 25px;
text-align: right;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #cb867c;
margin-right: auto;
margin-left: auto;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
font-weight: normal;
}
p.small{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
font-weight: normal;
}
h1 {
font-family: "Trebuchet MS";
font-size: 18px;
font-style: normal;
color: #000000;
font-weight: bold;
}
h2 {
font-family: "Trebuchet MS";
font-size: 20px;
color: #000000;
font-style: italic;
}
h3 {
font-family: "Trebuchet MS";
font-size: 18px;
font-style: normal;
color: #E9CDC9;
font-weight: bold;
}
h4 {
font-family: "Trebuchet MS";
font-size: 14px;
font-style: normal;
color: #000000;
font-weight: bold;
margin-bottom: 5px;
}
hr {
color: #ffff2d;
background-color: #ffff2d;
height: 2px;
width: 100%;
border: 0px;
}
#main_left a:link {
font-family: "Trebuchet MS";
color: #000000;
text-decoration: underline;
}
#main_left a:hover {
color: #000000;
text-decoration: none;
background-color:#ffff2d;
}
#main_left a:visited {
font-family: "Trebuchet MS";
color: #000000;
text-decoration: underline;
}
.nav {
background-color: #ffffff;
}
.nav ul {
overflow: auto;
width: 950px;
margin: 0;
padding: 0;
}
.nav li {
float: left;
list-style: none;
background-color: #ffff2d;
text-align: center;
padding: 0;
margin: 0;
font-family: "Trebuchet MS";
font-size: 1.2em;
line-height: 35px;
height: 35px;
width: 16.6667%;
width: calc(100% / 6);
font-style: normal;
}
.nav a {
text-decoration: none;
color: #000000;
display: block;
transition: .3s background-color;
}
.nav a:hover {
color: #ffffff;
background-color: #883831;
font-style: italic;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
.boka {
width: 200px;
height: 30px;
line-height: 30px;
background-color: #ffff2d;
text-decoration: none;
color: #000000;
display: block;
margin-right: auto;
margin-left: auto;
transition: .3s background-color;
cursor:pointer;
font-family:Trebuchet MS;
font-size: 1.2em;
padding:6px 8px;
}
.boka:hover {
color: #ffffff;
background-color: #883831;
font-style: italic;
}
.boka:active {
background-color: #fff;
color: #444;
cursor: default;
}
/* Everything below is for ssslider */
.sss {
height: 0;
margin: 0;
padding: 0;
position: relative;
display: block;
overflow: hidden;
}
.ssslide {
width: 100%;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
display: none;
overflow: hidden;
}
.ssslide img {
max-width: 100%;
height: auto;
margin: 0;
padding: 0;
position: relative;
display: block;
}
.sssnext, .sssprev {
width: 25px;
height: 100%;
margin: 0;
position: absolute;
top: 0;
background: url('images/arr.png') no-repeat;
}
.sssprev {
left: 3%;
background-position: 0 50%;
}
.sssnext {
right: 3%;
background-position: -26px 50%;
}
.sssprev:hover, .sssnext:hover {
cursor: pointer;
}
I have been trying to fix this for the last 3 hours with no success. Also, there is a margin of a few pixels at the bottom of the page that have been haunting me throughout the project.
Link to site: http://wordpress.klamas.se/

Answer 1

Collapsing Div Issue
You could write in a check for the content and add a space to keep the div from collapsing.
<?php
$args = array(
'cat' => 4,
'posts_per_page' => 3
);
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post(); ?>
<div class="main_right_contents"><?php the_post_thumbnail('category-thumbnail'); ?>Mer info & Bokning</div>
<?php }
} else {
echo ' ';
}
wp_reset_postdata();
?>
Bottom Margin Issue
The odd margin at the bottom is due to the content being too large for the fixed height footer. With anything content based I wouldn't recommend fixing the height to a pixel value. By applying the gradient using CSS3 with Graceful Degradation and removing the fixed height we ensure the footer will always look correct.
#footer {
width: 950px;
margin-right: auto;
margin-left: auto;
border-top-width: 7px;
border-top-style: double;
border-top-color: #ffff2d;
background: #cd655a;
background: -moz-linear-gradient(top, #cd655a 50%, #672324 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#cd655a), color-stop(100%,#672324));
background: -webkit-linear-gradient(top, #cd655a 50%,#672324 100%);
background: -o-linear-gradient(top, #cd655a 50%,#672324 100%);
background: -ms-linear-gradient(top, #cd655a 50%,#672324 100%);
background: linear-gradient(to bottom, #cd655a 50%,#672324 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cd655a', endColorstr='#672324',GradientType=0 );
}
References
Colorzilla - CSS Gradient Generator - A nice quick CSS3 Gradient Generator.