CODEWITHSUNDEEP
htmlcsstabs
The Puma
The Puma

Reputation: 1390

How do you keep horizontally aligned tabs' width consistent with browser zoom?

I have a div container that is 600px wide and 30px high, and it contains 7 "day tab" divs as well as 2 smaller "arrow" divs. I can get the arrows and tabs to be centered in the "days_panel" div, but when you zoom, there is blanket space created. Does anyone know a good technique to keeping tabs centered and horizontally aligned?

Thank you for your help!

EDIT: added the code! sorry!

Here is the HTML

      <div class ="container">
         <div class ="center">
            <div class="days_panel">
               <div class="left_day_arrow"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="right_day_arrow"></div>
            </div>
         </div>
      </div>

And the CSS:

/* -----------------MAIN CONTAINER ----------------------*/
.container{
position: relative;
top: 5px;
margin-left: auto;
margin-right: auto;
width: 1024px;
height :1000px;
}

/* ---------------- CENTER PANEL ---------------- */
.center{
float:left;
margin-left:5px;
width:600px;
height: 100%;
background-color:#C6AEC7;
}

.days_panel{
width:100%;
height:30px;
background-color: white;
}

.day{
float:left;
position:relative;
margin-left: 6px;
width: 11%;
height:100%;
background-color:black;
}

.left_day_arrow{
float:left;
position:relative;
width:5%;
height:100%;
background-color: springgreen;
}

.right_day_arrow{
float:right;
position:relative;
width:5%;
height:100%;
background-color: springgreen;
}

Upvotes: 0

Views: 653

Answers (1)

Luuk
Luuk

Reputation: 1999

why would you use percentages? you can easily set the width of each item with pixels.

If i look closer, the day element has a width of 11%. 11% x 7 = 77% Now the arrows are 5%. 5% x 2 = 10%. That totals 87%. So it is quite logical you will get open spaces between it.

If i had these elements i would set the day width to 80px and the arrows to 20px each. This way it equals 600 px.

Hope this helps.

Upvotes: 1

Related Questions