By pennywit on

I'm nearly at wit's end here. Using PHPTemplate and a custom theme, I want to set up a block region at the top of the main window, just before the main content. I'm trying to make the left block wider than the right. Right now, I have two view blocks in the area, which is called "content-top". The CSS looks like something like this:

#content-top {
}

#content-top .block {
}

#block-views-RecentBlogs {
width: 600px;
float: left;
}

#block-views-FeaturedBlogs {
background-color: pink;
}

Meanwhile, my page.tpl.php file (based off the Drupal bluemarine theme) looks something like this:

    <td valign="top">
      <?php if ($mission) { ?><div id="mission"><?php print $mission ?></div><?php } ?>
    <?php if ($content_top) { ?><div id="content-top">
      <?php print $content_top ?>
       </div>
        <?php } ?> 
      <div id="main">

and so forth.

The problem is that when this thing goes to render, either one of the top blocks overflows the content-top area into the main area, where the main then wraps around it ... or else the block I intend for the right renders below the block I intend for the left. I've tried a few things -- setting percents for the widths, setting specific widths, and playing with clear tags, but nothing gets me what I'm looking for. Any ideas how I can make this work?

--|PW|--

⋅ Categories: Drupal 4.7.x

Comments

coplan’s picture

coplan commented

A simpler way to handle this would be to create two areas (top and bottom) and use the tables to control side-by-side cells. I do this with my own site.

I would maybe set my DIVs like this:

.top {
   margin: 0px;
   width:  100%;
   height:  auto;
}

.bottom {
  margin: 0px;
  width: 100%;
  height: auto;
}

#layout {
  // whatever settings you want for the table.
  // recommend setting a width, border of 0, etc.
}

Then your html segment would look like this:


<div class="top">
  <!-- This is the top part -->
</div>
<div> class="bottom">
  <table id="layout">
    <tr>
    <td width="340px">
      <!-- This is the left cell -->
    </td>
    <td width="*">
      <!-- Star autosizes as necessary -->
    </td>
    </tr>
</div>

That should give you three cells. One across the top, and two side-by-side across the bottom.

I appologize, however...I'm at work so I can't really test this. Let me know how it works.

-- Coplan

pennywit’s picture

pennywit commented

I'll give it a go. I had a feeling it would come to using tables, but I always feel vaguely dirty when I use tables for layout.

--|PW|--

pennywit’s picture

pennywit commented

Probably a mix of the .tpl file and the CSS file. If I set the width in the CSS file, I should probably be able to put in the td tags just fine ...

--|PW|--