Question

I’m using an HTML/CSS template to create a web app. For some reason the elements are not sliding back on the template when I resize the window which I need them to do. For example, if I float a button on the right it would position itself to the leftmost portion of the full screen. If I then contract the window horizontally the button does not move back but is simply ‘hidden by the window’. I’ve been looking at the template CSS code for days now and googling everywhere but I still don’t know what’s causing this.

Here is the CSS code for the template:

body, html {
    padding:0;
    margin:0;
    font-family: BBAlpha Sans;
    font-size: 15pt;
    overflow:visible;
}

body {
    background-image: url('../images/stripes.png');
    overflow:hidden;
}


.listSeparator
{
    border-bottom: solid 1px Silver;
}

.label 
{
    display:inline; 
    float:left;
    line-height:40px;
    margin-left: 5px;
}

.row
{
    height: 40px;
    width:100%;
    vertical-align: middle;
}

.tab
{
    position:absolute;
    top:70px;   
    padding: 10px;
}

.main-panel 
{
    position:relative;
}

.panel-top-left {
    margin-right: 4px; 
    height: 4px; 
    background-image: url('../images/panel.png');
}
.panel-top-right {
    margin-top: -4px; 
    margin-left: 4px; 
    background-position: 100% 0; 
    height: 4px; 
    font-size: 2px;
    background-image: url('../images/panel.png');
}
.panel-bottom-left {
    margin-right: 9px; 
    background-position: 0 -7px; 
    height: 9px;
    font-size: 2px;
    background-image: url('../images/panel.png');
}
.panel-bottom-right {
    margin-top: -9px; 
    margin-left: 9px; 
    background-position: 100% -7px; 
    height: 9px; 
    font-size: 2px; 
    background-image: url('../images/panel.png');
}
.panel-inside {
    border-left: 2px solid #D6D3D6;
    border-right: 2px solid #D6D3D6;
    background: White;
    padding-left: 0px;
    padding-right: 0px;
    overflow:auto;
}
.panel-nogap {
    margin-top: -3;
    margin-bottom: -3;
}

.panel-nogap input 
{
    display:inline; 
    float:left;
    font-family: BBAlpha Sans;
    font-size: 16pt;
    border: none;
    padding-top: 0px;
    width: 10px;
    margin-top: 7px;
}

.buttonPanel
{
    margin-top: 5px;
    margin-left: 8px;
    margin-bottom: 0px;
    text-align:center;
    position:relative;

}

a.tabButton {
    background: transparent url('../images/tabs/tabRight.png') no-repeat scroll top right;
    color: White;
    display: block;
    float: left;
    height: 64px;
    margin-right: 5px;
    padding-right: 10px;  
    text-decoration: none;
    width: 28%;  
}

a.tabButton div {
    background: url('../images/tabs/tab.png') no-repeat top left;
    display: block;
    height: 64px;
    padding: 0px 0px 0px 10px;
    line-height: 0px;
}

a.tabButton p 
{
    font-size: 10pt;
    margin-top: 0px;    
    padding: 0px;
}

a.tabButton img 
{
    position:relative;
    height:35px;
    width:35px;
    margin-top: 5px;
    margin-bottom: 0px;
    padding: 0px;
}


.tabSeparator
{
    position: absolute;
    top:69px;
    background-color:#014EBE;
    height:5px; 
    width: 100%;
    z-index: -1;    
}

and what the template looks like:

If anyone knows what is causing this or at least what I should look for, any help at all would be appreciated. Thanks in advance!

Answer 1

How about changing the position properties… fixed would be your best bet: positioning it fixed @ 5em from the browser sides or something:

http://www.w3schools.com/cssref/pr_class_position.asp

play around on w3schools, it’s a great site 🙂