469,336 Members | 5,846 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,336 developers. It's quick & easy.

CSS variable width divs

4
Hi everyone, I'm new to the community but looking forward to answering questions myself. I've got the horizontal menu bar going across the top of my page. There is some stuff above it but it's not important. On the left of this menu sits a background-jpeg and then there are several "tabs" (links) after it. I placed each link inside a menuLink div, and floated them left, which works great.

My problem is I cannot set the widths for these tabs. The number of links will change depending on the page, so setting it to a % will not work. I obviously cannot set it to a px or other hard value because the customer will be using many different resolutions. I want this to be flush on the right, but it currently is not. Here is the code.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <link href="style2.css" rel="stylesheet" type="text/css">
  4.     </head>
  5.     <body>
  6.         <div name="menu" class="menu">
  7.             <div name="menuLinkDesktop" class="menuLink">
  8.                 <a href="" class="on">Desktop</a>
  9.             </div>
  10.             <div name="menuLinkFiles" class="menuLink">
  11.                 <a href="">Files</a>
  12.             </div>
  13.             <div name="menuLinkContacts" class="menuLink">
  14.                 <a href="">Contacts</a>
  15.             </div>
  16.             <div name="menuLinkCalendar" class="menuLink">
  17.                 <a href="">Calendar</a>
  18.             </div>
  19.             <div name="menuLinkEmail" class="menuLink">
  20.                 <a href="">Email</a>
  21.             </div>
  22.             <div name="menuLinkTasks" class="menuLink">
  23.                 <a href="">Tasks</a>
  24.             </div>
  25.             <div name="menuLinkMembership" class="menuLink">
  26.                 <a href="">Membership</a>
  27.             </div>
  28.         </div>
  29.     </body>
  30. </html>
  31.  
Expand|Select|Wrap|Line Numbers
  1. div.menu {
  2.     background-image: url('menuCorner.png');
  3.     background-repeat: no-repeat;
  4.     height: 19px;
  5.     padding-left: 297px;
  6. }
  7.  
  8. div.menu div.menuLink {
  9.     background-color: #003399;
  10.     float: left;
  11.     width: 13%;
  12.     height: 100%;
  13.     text-align: center;
  14.     vertical-align: middle;
  15.     border-right: 1px solid black;
  16. }
  17.  
  18. div.menu div.menuLink a {
  19.     font-family: Verdana, Helvetica;
  20.     font-size: x-small;
  21.     font-weight: bold;
  22.     text-decoration: none;
  23.     color: #F6F5F5;
  24. }
  25.  
Sep 1 '06 #1
1 5244
Stucco
4
Here's an easier example...

Expand|Select|Wrap|Line Numbers
  1. <style>
  2.  
  3. body {
  4.     margin: 0;
  5. }
  6.  
  7. div.parent {
  8.     border: 1px solid green;
  9.     height: 50px;
  10. }
  11.  
  12. div.parent div.child {
  13.     border: 1px solid blue;
  14.     float:left;
  15.     height: 100%;
  16.     width: 24%;
  17.     vertical-align: middle;
  18. }
  19.  
  20. </style>
  21.  
  22.  
  23. <div class="parent">
  24.     <div class="child">1</div>
  25.     <div class="child">2</div>
  26.     <div class="child">3</div>
  27.     <div class="child">4</div>
  28. </div>
  29.  
Sep 1 '06 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

25 posts views Thread by Sune A | last post: by
5 posts views Thread by Josh Renaud | last post: by
11 posts views Thread by yawnmoth | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by Marylou17 | last post: by
1 post views Thread by Marylou17 | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.