CSS variable width divs

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

 
<html>

    <head>

        <link href="style2.css" rel="stylesheet" type="text/css">

    </head>

    <body>

        <div name="menu" class="menu">

            <div name="menuLinkDesktop" class="menuLink">

                <a href="" class="on">Desktop</a>

            </div>

            <div name="menuLinkFiles" class="menuLink">

                <a href="">Files</a>

            </div>

            <div name="menuLinkContacts" class="menuLink">

                <a href="">Contacts</a>

            </div>

            <div name="menuLinkCalendar" class="menuLink">

                <a href="">Calendar</a>

            </div>

            <div name="menuLinkEmail" class="menuLink">

                <a href="">Email</a>

            </div>

            <div name="menuLinkTasks" class="menuLink">

                <a href="">Tasks</a>

            </div>

            <div name="menuLinkMembership" class="menuLink">

                <a href="">Membership</a>

            </div>

        </div>

    </body>

</html>

Expand|Select|Wrap|Line Numbers

 
div.menu {

    background-image: url('menuCorner.png');

    background-repeat: no-repeat;

    height: 19px;

    padding-left: 297px;

}
 
div.menu div.menuLink {

    background-color: #003399;

    float: left;

    width: 13%;

    height: 100%;

    text-align: center;

    vertical-align: middle;

    border-right: 1px solid black;

}
 
div.menu div.menuLink a {

    font-family: Verdana, Helvetica;

    font-size: x-small;

    font-weight: bold;

    text-decoration: none;

    color: #F6F5F5;

}

Sep 1 '06 #1

Subscribe Post Reply

5350

Stucco

Here's an easier example...

Expand|Select|Wrap|Line Numbers

 
<style>
 
body {

    margin: 0;

}
 
div.parent {

    border: 1px solid green;

    height: 50px;

}
 
div.parent div.child {

    border: 1px solid blue;

    float:left;

    height: 100%;

    width: 24%;

    vertical-align: middle;

}
 
</style>
 
<div class="parent">

    <div class="child">1</div>

    <div class="child">2</div>

    <div class="child">3</div>

    <div class="child">4</div>

</div>

Sep 1 '06 #2

by: Jason Bassford | last post by:

Okay, What I'm trying to do is create two boxes, one on top of the other. The first is a static height, the 2nd, underneath it, should take up the remaining amount of screen space and overflow...

HTML / CSS

Problem with the width of DIV in IE6 using CSS and width:auto

by: Glabbeek | last post by:

I'm changing the layout of my site. Instead of using tables, I will use DIVs. It's working fine, except for 1 thing: In IE6 some DIVs are not the correct width. Mozilla and Opera are showing the...

HTML / CSS

Lock the page-width

by: Sune A | last post by:

Hi All! I'm having problems with www.suneworld.com The thing is that I'd like to lock the width of the page, so that it won't adjust dynamically. Any CSS people out there that can help me? ...

HTML / CSS

More on Safari table width problem

by: Josh Renaud | last post by:

I'm still trying to solve a problem I have experienced in Safari. This is my third post on the subject. I'm hoping someone can shed some light. The problem is that, in Safari, a table with no...

HTML / CSS

floating div with width:auto looks "wrong" in gecko browsers

by: day | last post by:

I know I've seen this issue described before, but I can't find it, or the solution now that I need it. I have some css-specified floating divs that contain images or text. The text divs have a...

HTML / CSS

Trying to access a JavaScript variable in one frame from another frame.

by: Rob | last post by:

I know, I know, don't use frames. Well, I'm stuck with these frames and I'm trying to add functionality without a complete redsign. You can look at this as a nostalgic journey. Anyway, I've got...

Javascript

Problem getting margin-bottom to work witha DIV of variable height

by: JamesBong | last post by:

So I am building something with divs that will be filled with dynamic data... so I dont know how tall the divs will be, but I want to make sure that div has a margin so the next div is 25px below the...

HTML / CSS

Problem getting margin-bottom to work with DIV of variable height

by: JamesBong | last post by:

I am building something with divs that will be filled with dynamic data... so I dont know how tall the divs will be, but I want to make sure that div has a margin so the next div is 25px below the...

HTML / CSS

floating divs and 100% width

by: yawnmoth | last post by:

How do you get both of these div's to have a 100% width? (1): <div style="float: left; background: black; color: white">Hello, world! </div> <div style="clear: both; background: blue; color:...

HTML / CSS

Divs - Extend to variable height

by: daniel2335 | last post by:

This problem is everywhere! I have read all forums available, spent about 40+ hours on it and lost a bit of hair. I was going to explain what its ment to look like but I just realised removing the...

HTML / CSS

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

CSS variable width divs

Similar topics