Div fixed to bottom of wrapper spoiling otther css effect

HTML & CSS
1

I have a wrapper div and 2 divs that I wont to appear top and bottom of the page.
The top one is fine, and the bottom one works fine, appart from the fact that it stops the other effect working which is that the 4 divs placed in each of the divs spread appart equally across the page.

http://www.lorhnm.co.uk/liverpoolst/main.php#

Can someone help me so that I can keep the divs effect so they space equally, and also allow the div to fix itself to the bottom of the page.


<div id="button_Container_1">
<div class="box1"><a href="#" title="Moorgate Ticket Hall"><div class="circle">Moorgate Ticket Hall</div></a></div>
<div class="box2"><a href="#" title="Tunnels"><div class="circle">Tunnels</div></a></div>
<div class="box3"><a href="#" title="Welfare"><div class="circle">Welfare</div></a></div>
<div class="box4"><a href="#" title="Broadgate Ticket Hall"><div class="circle">Broadgate Ticket Hall</div></a></div>
<span class="stretch"></span>
</div>
<div id="button_Container_2">
<div class="box1"><a href="#" title="Moorhouse Shaft"><div class="circle">Moorhouse Shaft</div></a></div>
<div class="box2"><a href="#" title="Moorgate Shaft"><div class="circle">Moorgate Shaft</div></a></div>
<div class="box3"><a href="#" title="Finsbury Shaft"><div class="circle">Finsbury Shaft</div></a></div>
<div class="box4"><a href="#" title="Blomfield Box"><div class="circle">Blomfield Box</div></a></div>
<span class="stretch"></span>
</div>




.circle
{
  height: 115px;
  width: 115px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 140px;
  background: yellow;
  padding:5px;
}
#button_Container_1{
 margin-top:20px;
 border: 0px dashed #444;
    height: 140px;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}
#button_Container_1 a:link{
color:#000000;
text-decoration:none; 
}
#button_Container_1 a:visited{
color:#000000;
text-decoration:none; 
}
#button_Container_1 a:hover{
color:#06C;
text-decoration:none; 
}
#button_Container_2{
 position: fixed;
    bottom: 0;
 border: 0px dashed #444;
    height: 140px;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}
.box1, .box2, .box3, .box4 {
    width: 140px;
    height: 140px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}
2

To add to this, is it possible that the circle divs above change their height according to the screen resolution.

For instance it looks fine on a pc monitor, as the space is plenty, but when viewed on my lap top the circles are the same size but almost sit on top of each other.

3

The difference between the two div is for the second one on the bottom I added position:fixed, and bottom:0; and that stopped the rest of the css that allows the internal divs to spread equally across the page.

Also I sorted the sizing issue out by using a new responsive css file.

4

Got it sorted thanks guys, just added width:100%; to it and its sorted now.

Cheers

5

Hi,

You need to add left:0 and right:0 to make the fixed positioned element have the required width otherwise it is a shrink to fit element (just like absolute positioning) so effectively those elements are already justified.


#button_Container_2 {
    border: 0 dashed #444444;
    bottom: 0;
    height: 140px;
[B]    left: 0;[/B]
    position: fixed;
   [B] right:0;[/B]
    text-align: justify;
}

You could instead use width:100% but that means you couldn’t add padding if needed.

Be careful width fixed positioning because it will overlap any content in the way.

To add to this, is it possible that the circle divs above change their height according to the screen resolution.

You could probably size them in percentages with a bit of fiddling around but you would be better off using media queries and setting the circles smaller for smaller screen widths and possibly losing the fixed positioning on the bottom ones as mobiles hate fixed positioning at the best of times especially at the bottom.

If you need help with media queries then shout and we’ll make suggestions.