Drupal 7 make 2 boxes in content region fixed distance to the bottom of browser

Posted on 2014-08-03
Last Modified: 2014-08-22
In a Drupal 7 Omega based theme, want to have 2 boxes in content region as followings:
1. The 2 boxes have fixed distance to the bottom of browser.
2. One box is at the left side to the left side of content region.
3. The other box is at the right side to the right side of content region.

In following code, put 2 boxes within Box_Container.
The container is 100% width of content region, and is 200px from top.
How to make the container is 200px above the bottom of browser?

.Box_Container {
position: absolute;
width: 100%;
top: 200px;
.Left_Background {
  background-color: green;
  position: relative;
  bottom: 100px;  
  height: 200px;
  width: 30%;
  float: left;
.Right_Background {
  background-color: blue;  
  position: relative;
  bottom: 100px;
  height: 200px;
  width: 50%;
  float : right;

<div class="Box_Container">

<div class="Left_Background">
This is left side box.
<div class="Right_Background">
This is right side box.

Question by:drupal_100
    LVL 42

    Expert Comment

    by:David S.
    If I fully understand your question, this should work:
    .Box_Container {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 200px;

    Open in new window


    Author Comment

    somehow not working
    width: 100%
    but it is not the 100% width of content region.
    See attachment.

    Author Comment

    LVL 42

    Accepted Solution

    Oh, I see. The container is not the full width of the viewport. You'll need to set the width to whatever the "width of content region" happens to be.

    For the record, not everyone uses MS Office. It's better to show examples in PNG or PDF format.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
    In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now