By miggols99 on

I am making my own theme from scratch (I have had a few problems with Zen. It's just too confusing!). So far I have been quite successful, but I have one problem with the clear-block div which is on some of my pages. It creates a large white space. If I change it to "display: inline", everything works how it should, but I'm sure there's a reason for clear-block for being there. Is there something I can change in my CSS file to avoid ruining something?

⋅ Categories: Drupal 6.x

Comments

miggols99’s picture

miggols99 commented

I put in "float: left" for .clear-block and this fixes it. Hopefully I won't get any problems...

EDIT: This is a very dirty workaround.. can anyone help me fix this? Here's my page.tpl.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language->language; ?>" xml:lang="<?php print $language->language; ?>">

<head>

<title><?php print $head_title; ?></title>

<?php print $head; ?>
<?php print $styles; ?>
<?php print $scripts; ?>

</head>

<body>

<div id="header">

<div id="adsense">

<script type="text/javascript"><!--
google_ad_client = "pub-5422902423815581";
/* Top on top of clouds */
google_ad_slot = "3494932054";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</div>

<?php if ($logo): ?>

<div id="site-logo">
<a href="<?php print $base_path; ?>"><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" /></a>
</div>

<?php endif; ?>

<?php if ($site_name): ?>

<div id="site-name">
<a href="<?php print $base_path; ?>" title="<?php print t('Home');?>"><?php print $site_name; ?></a>
</div>

<?php endif; ?>

<?php if ($site_slogan): ?>

<div id="site-slogan"><?php print $site_slogan; ?></div>

<?php endif; ?>

</div> <!-- End Header -->

<div id="primary">

<?php print theme('links', $primary_links); ?>

</div> <!-- End Primary Links -->

<div id="primary-outside"></div> <!-- Image to finish "I did it!" picture -->

<div id="wrapper">

<?php if ($right): ?>

<div id="navigation">

<?php print $right; ?>

</div> <!-- End Navigation Bar -->

<?php endif; ?>

<!--///////////////////
/ Start Main Content /
//////////////////-->

<div id="content" class="clear-block">

<?php if ($breadcrumb): ?>
<div id="breadcrumb"><?php print $breadcrumb; ?></div>
<?php endif; ?>

<?php if ($mission): ?>
<div id="mission"><?php print $mission; ?></div>
<?php endif; ?>

<?php if ($tabs): ?>
<div class="tabs"><?php print $tabs; ?></div>
<?php endif; ?>

<?php print $help; ?>
<?php print $messages; ?>

<h1 class="title"><?php print $title; ?></h1>

<?php print $content; ?>

</div>

<!--/////////////////
/ End Main Content /
////////////////-->

</div> <!-- End Wrapper -->

<div id="footer"><?php print $footer_message; ?></div>

<?php print $closure; ?>

</body>
</html>

and my style.css:

body

{
font-size: 13px;
margin: 0
}

a

{
color: #474747
}

a:hover

{
color: #8C8C8C
}

.info

{
color: white;
background: url('images/information.png') no-repeat top left;
padding: 77px 5px 5px 3px;
display: block;
background-color: navy;
font-size: 13px;
background-position: 3px 3px;
min-width: 240px;
border: 1px solid #000033;
margin-bottom: 5px
}

.info:first-line

{
font-weight: bold
}

.problem

{
background: url(problem.png) no-repeat top left;
padding: 73px 5px 5px 3px;
display: block;
background-color: #F0F0F0;
font-size: 13px;
background-position: 3px 3px;
min-width: 440px;
border: 1px solid #BEBEBE
}

#header

{
background: #B0E2FF url('images/header-back.png') bottom right no-repeat;
padding: 10px;
min-height: 100px;
}

#site-logo

{
float: left;
padding-right: 10px
}

#site-name

{
font-size: 65px;
font-weight: bold;
}

#site-name a

{
text-decoration: none
}

#site-slogan

{
font-size: 14pt;
}

#adsense

{
float: right;
margin-right: 200px;
margin-top: 20px
}

#primary-outside

{
background: url('images/primary-outside.png') top right no-repeat;
float: right;
margin-top: -27px;
min-height: 27px;
max-height: 27px;
min-width: 190px
}

#primary ul

{
list-style: none;
display: block;
background: #E0E0E0 url('images/primary.png');
padding: 5px 0 5px 0px;
margin: 0;
}

#primary ul li

{
display: inline;
margin: 0 10px 0 10px
}

#primary ul li a

{
color: #4F4F4F;
text-decoration: none;
}

#primary ul li a:hover

{
color: #303030;
text-decoration: underline;
}

#content

{
padding: 10px;
margin-right: 255px;
}

#content #breadcrumb

{
margin-bottom: 10px
}

#content #mission

{
border: 1px solid #4F4F4F;
background-color: #E0E0E0;
padding: 5px
}

#content h1.title

{
margin: 10px 0 3px 0;
text-decoration: underline
}

#content h3

{
color: #292929;
border-bottom: 1px solid #292929
}

#content h4

{
color: #666666;
border-bottom: 1px solid #666666
}

.comment h3 a

{
text-decoration: none
}

#navigation

{
width: 250px;
margin-left: -100%;
float: right;
padding: 10px 5px 5px 0
}

#navigation h2

{
background: #E0E0E0 url('primary.png');
margin: 0;
padding: 3px;
font-size: 12pt
}

#navigation ul

{
list-style: none;
margin-left: -2em;
padding-left: 2em;
ma
}

#navigation .block

{
border: 1px solid #E0E0E0;
margin-bottom: 10px
}

#navigation ul li

{
list-style: none;
margin: 0 -7px 0 0
}

#navigation ul li.collapsed, #navigation ul li.expanded

{
margin-left: 5px;
padding: 0
}

#navigation ul li ul

{
border: 1px solid #666666;
background-color: #F7F7F7;
margin: 0;
padding: 0;
margin-right: -12px
}

#navigation ul li ul li ul

{
border: 1px solid #404040;
background-color: #E0E0E0;
margin-right: 12px
}

#navigation ul ul li

{
margin-right: 12px
}

#navigation li a

{

text-decoration: none;
display: block;
padding: 3px 3px 3px 5px;
color: #303030;
}

#navigation li a:hover

{
background-color: #F5F5F5
}

#footer

{
border: solid #E0E0E0;
border-width: 0 1px 1px 1px;
padding: 3px;
background: #E0E0E0 url(primary.png);
text-align: center;
clear: both
}

I've tried looking at other fluid themes but they don't seem to help :(

Stalski’s picture

Stalski commented

Indeed i have something similar. First block in the right region is on top and the second block won't start untill the content part stopped.
clear-block with block that's overriding the css 8 lines above messes up the page layout. Display inline or float left will fix it, but the real question is why this is happening. The css hack that is used in defaults.css like

.clear-block {
display:block;
}

.clear-block {
display:inline-block;
}

is kind of weird for firefox will always use the last defined property and will omit the * html .clear-block property. What i do know is that is not caused by the content (center) part.
My guess is this only happens when wrappers are defined like this:

.narrowcolumn {
  float: left;
  padding: 0;
  margin: 0px 0 150px 0;
  width: 520px;
}
#sidebar-right{
  padding: 10px 0 0px 0;
  margin-left: 550px;
  width: 160px;
}

So what's the problem here? Well, the narrowcolumn being the #content part that needs to take the center part with a #sidebar-right next to it. The narrowcolumn floats to the left, leaving the space (total - its width) open for a sidebar. In this case the narrowcolumn is not the one filling the height of the layout, but the sidebar does. The sidebar width is (550 + 160 =) 710px and stretches out the page. So the content starts filling: first the first blok in the sidebar, then it runs into the content part because it is floating left and after that's finished, the second sidebar block can fill up the next available space.
Because they all are display blocked, they get priority in width and take the space they can get.
Sollutions imho ...

  • Use a different technique in that too float the both boxes left, next to each other in the container that allows the accumulated widths to add up.
    Example for a container with at least 710px width: 
    .narrowcolumn {
  float: left;
  width: 550px;
  margin: 0; padding: 0;
}
#sidebar-right{
  float: left;
  width: 160px;
  margin: 0; padding: 0;
}
  • Another sollution could be to make the blocks inside the sidebar inline so they don't take the width's space, but you can feel this is not ok for div blocks in general
Oiseau’s picture

Oiseau commented

Thank you, Stalski!
Your first sollution has solved my problem with white spaces