By Eluzion on

This is probably such a newbie question but I can't figure it out for the life of me.

I have created three columns on the front page under the header section. This is what my page-frontpage.tpl.php looks like:

<body class="<?php print $body_classes; ?>">

  <div id="page"><div id="page-inner">

    <div id="header"><div id="header-inner" class="clear-block">

      <?php if ($primary_links || $secondary_links): ?>

          <?php if ($primary_links): ?>
            <div id="primary">
              <?php print theme('links', $primary_links); ?>
            </div> <!-- /#primary -->
          <?php endif; ?>

          <?php if ($secondary_links): ?>
            <div id="secondary">
              <?php print theme('links', $secondary_links); ?>
            </div> <!-- /#secondary -->
          <?php endif; ?>

      <?php endif; ?>

      <?php if ($logo): ?>
        <div id="logo-title">

          <?php if ($logo): ?>
            <div id="logo"><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" id="logo-image" /></div>
          <?php endif; ?>

        </div> <!-- /#logo-title -->
      <?php endif; ?>

      <?php if ($header): ?>
        <div id="header-blocks">
          <?php print $header; ?>
        </div> <!-- /#header-blocks -->
      <?php endif; ?>

    </div></div> <!-- /#header-inner, /#header -->

    <div id="main"><div id="main-inner" class="clear-block<?php if ($search_box || $primary_links || $secondary_links || $navbar) { print ' with-navbar'; } ?>">

      <div id="content"><div id="content-inner">

        <?php if ($content_top): ?>
          <div id="content-top">
            <?php print $content_top; ?>
          </div> <!-- /#content-top -->
        <?php endif; ?>


		
          <div id="frontpage-left">
          <?php print $frontpage_left; ?>
          </div>
          <div id="frontpage-middle">
          <?php print $frontpage_middle; ?>
          </div>
          <div id="frontpage-right">
          <?php print $frontpage_right; ?>
          </div>
          


        <?php if ($feed_icons): ?>
          <div class="feed-icons"><?php print $feed_icons; ?></div>
        <?php endif; ?>
        
        <?php if ($title or $tabs or $help or $messages): ?>
          <div id="content-header">
            <?php if ($title): ?>
              <h1 class="title"><?php print $title; ?></h1>
            <?php endif; ?>
            <?php print $messages; ?>
            <?php if ($tabs): ?>
              <div class="tabs"><?php print $tabs; ?></div>
            <?php endif; ?>
            <?php print $help; ?>
          </div> <!-- /#content-header -->
        <?php endif; ?>

        <?php if ($content_bottom): ?>
          <div id="content-bottom">
            <?php print $content_bottom; ?>
          </div> <!-- /#content-bottom -->
        <?php endif; ?>

      </div></div> <!-- /#content-inner, /#content -->

    </div></div> <!-- /#main-inner, /#main -->

    <div id="footer"><div id="footer-inner">

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

    </div></div> <!-- /#footer-inner, /#footer -->

    <?php if ($closure_region): ?>
      <div id="closure-blocks"><?php print $closure_region; ?></div>
    <?php endif; ?>

    <?php print $closure; ?>

  </div></div> <!-- /#page-inner, /#page -->

</body>

My CSS stylesheet for those frontpage blocks is as follows:

  #frontpage-left
  {
    width: 230px;
    height: 100%:
    display: block;
    position: absolute;
    padding: 8px;
    padding-right: 12px;
    padding-top: 0px;
    border-right: 1px silver solid;
    
  }
  
  #frontpage-middle
  {
    width: 230px; 
    height: 100%:
    display: block;
    position: absolute;
    left: 263px;
    padding: 8px;
    padding-right: 13px;
    padding-top: 0px;
    border-right: 1px silver solid;
  }
  
  #frontpage-right
  {
    width: 230px; 
    height: 100%:
    display: block;
    position: absolute;
    left: 520px;
    padding: 8px;
    padding-top: 0px;
  }

The problem is all my blocks that go under these frontpage columns overlap them. So every block that goes in the footer (actually, everything that comes after those frontpage columns), is simply overlapping the frontpage columns I created. Is there any way to make those frontpage blocks have "boundaries" or so the content below it won't overlap it?

⋅ Categories: Drupal 5.x

Comments

Mark Theunissen’s picture

Mark Theunissen commented

I'm not a CSS guru but I do know a fair bit, and I'd say the problem is that you're using absolute positioning instead of floating your divs.

It's tough to work out from the limited code you have provided. Do you have the site online somewhere so I can check it out?

You should also look into installing the excellent Firebug extension which will allow you to effortlessly debug your CSS in Firefox.

http://getfirebug.com

Hope that helps!

Cheers
Mark

Code Baboon
Drupal based services

Eluzion’s picture

Eluzion commented

Hey Mark,

I had the hardest time trying to line up the 3 columns with anything other than using absolute positioning. I'm a rookie when it comes to CSS. =(

You can check out the site here: http://www.ebitspclaptop.com/web

The three columns I'm talking about are "who we are, what we do, what customers say"

Mark Theunissen’s picture

Mark Theunissen commented

In your layout.css file, on line 105, change this part:

#frontpage-blocks {
	clear:both;
	height:100%;
}

Change the value for "height" from 100% to 272px

That fixed it for me on Firefox browser, should work on yours too... ;)

Cheers
Mark

Code Baboon
Drupal based services

Eluzion’s picture

Eluzion commented

I actually had it this way to begin with but was hoping I could figure out a way to make it work using 100% height tags. The reason being is if someone changes the content in the frontpage column blocks, I'd like the footer blocks to automatically readjust.

Anyways, not a big deal but I guess I can use the fixed height method. Thanks for looking into it for me though! Appreciate it.

Mark Theunissen’s picture

Mark Theunissen commented

Ahh, yes of course, that would be a problem.

Try then adding the class "clear-block" to the frontpage-blocks div...

The CSS is defined in Drupal's core CSS files... an explanation for what it does is over here:

http://www.positioniseverything.net/easyclearing.html

So now it will look like this:

<div class="clear-block" id="frontpage-blocks">

This also works nicely for me.

Cheers
Mark

Code Baboon
Drupal based services

throk’s picture

throk commented

Ah I see, your footer is creeping up there.

Um, im not CSS expert either. But you should def float everything. Absolute positioning always seems to mess things up.

Also I would put your 3 div blocks into one div with a set width.

Try using clear:both for your large horizontal sections. For example:

#threeblocks {
 float: left;
 clear: both;
 width: 780px;
}

Don't be afraid of using more divs.

__________________________________________________________
work in progress www.TheHappyHourHero.com