• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 326
  • Last Modified:

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

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?

<style>
.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;
}
</style>

<div class="Box_Container">

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

</div>
0
drupal_100
Asked:
drupal_100
  • 2
  • 2
1 Solution
 
David S.Commented:
If I fully understand your question, this should work:
.Box_Container {
position: fixed;
width: 100%;
left: 0;
bottom: 200px;
}

Open in new window

0
 
drupal_100Author Commented:
somehow not working
width: 100%
but it is not the 100% width of content region.
See attachment.
0
 
drupal_100Author Commented:
attachment
a1.ppt
0
 
David S.Commented:
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.
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now