Skip to main content
A
Anonymous
April 21, 2009
Answered

Dynamically Size a <div>?

  • April 21, 2009
  • 2 replies
  • 802 views

Hello~

I have a CSS-based navigation bar that is populated from a database. Right now, I am hard-coding the width of each button (using a 1-image as a repeating background) in the CSS file, but I was wondering if anyone had an idea of how to set that div width for each button based on how many links are found in the database? FOr example, the containing div is 710 pixels wide, and right now I have 6 divs that contain a nav button and link, but they are each hard-coded to be 116 pixels wide. If I change the number of links in the database, I will have to change the CSS code as well. I would love to find a way around this! Thanks for any suggestions!

KC

    This topic has been closed for replies.
    Correct answer bigbrain28

    Your query for the nav items will have a recordcount so there's your total. If you want all the buttons equal in size do like so;

    <cfset buttonWidth=710/#navQuery.recordcount#>

    (where 710 is your container width)

    So if you had 10 links, they's each be 71px wide.

    You may need to use CEILING or ROUND to get a whole number as a value, look those up too if need be...

    In your CSS for the DIV the buttons occupy set a default width, or leave it blank (should auto size to contents that way). Then on the page that actually generates the nav menu do this;

    *assuming the nav button div is called "myButton"

    <style>

         #myButton {width:<cfoutput>#buttonWidth#px</cfoutput>;}

    </style>

    Thus adding an attribute to the myButton DIV you have in the CSS.

    Remember, though, if you have padding on the buttons div you'll need a more complex equation to extapolate the actual button width. For example if you have 5px padding on Left and Right - that's 10px you dont get to use inside the 71px!

    Good luck, hope this helps.

    2 replies

    B
    bigbrain28Correct answer
    Inspiring
    April 21, 2009

    Your query for the nav items will have a recordcount so there's your total. If you want all the buttons equal in size do like so;

    <cfset buttonWidth=710/#navQuery.recordcount#>

    (where 710 is your container width)

    So if you had 10 links, they's each be 71px wide.

    You may need to use CEILING or ROUND to get a whole number as a value, look those up too if need be...

    In your CSS for the DIV the buttons occupy set a default width, or leave it blank (should auto size to contents that way). Then on the page that actually generates the nav menu do this;

    *assuming the nav button div is called "myButton"

    <style>

         #myButton {width:<cfoutput>#buttonWidth#px</cfoutput>;}

    </style>

    Thus adding an attribute to the myButton DIV you have in the CSS.

    Remember, though, if you have padding on the buttons div you'll need a more complex equation to extapolate the actual button width. For example if you have 5px padding on Left and Right - that's 10px you dont get to use inside the 71px!

    Good luck, hope this helps.

    A
    Anonymous
    April 21, 2009

    I ended up doing something like this, thanks!

    ilssac
    ilssac
    Inspiring
    April 21, 2009

    Ummm...  Use a CFML variable to define the desired width of the div.  Use whatever logic you want to calculate the value of that variable?

    This is no different then dynamically generating any other content to send to a client browser.

    The only gotcha there maybe here is if you have all your CSS seperated into a css file.  This is, of course, because a CSS file is not normally passed to ColdFusion by a web browser for processing of dynamic content.

    You have several choices on how to handle this.

    1) Include a small portion of the CSS in the regular CFM file.  You do not need to include all your css, just the part you want to make dynamic.

    2) Make your CSS file a CFM file.  There is nothing illeagal about naming your css file something like 'myCSS.cfm'.  And then linking to that in your HTML content.  This file will then be process by ColdFusion.  This can cause issues where a browser may or may not cache a dynamic cfm file the same as it would a static css file loosing some of the benifit of seperating the style content.  This can be mitigated by providing the proper headers to the css content with <cfheader...> tags so that the browser will cache the content as desired.

    3) Configure your system to pass css files to ColdFusion for processing.  This has the same caching issues with nameing your file with a cfm extension with the same solution.  It also has the added benifit that your files will have a normal css extension so that many editors will knwo how to propelry highlight and code hint the file that often does not work correctly with files ending in cfm.  But it can lead to uncessary server load if little of the CSS is dynamic as well as will not be allowed with most shared hosting providers.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices