0
Welcome Guest! Login
0 items Join Now

Uniform Module Height

Last Post
Search Topic

  • Uniform Module Height

    Posted 13 years 4 months ago
    • Can someone tell me how to make the modules all the same height? For example If I have 4 feature modules with varied content length active on a page (like here ), what do I need to add to the CSS to make sure they remain uniform in height?

      Thank you in advance for your help.
    • Last Edit: 9 years 4 months ago by Kat05.
    #749813
    • Adamck's Avatar
    • Adamck
    • Elite Rocketeer
    • Posts: 546
    • Thanks: 2
    • Web Developer, IT Assistant, Graphics design, App Developer

    Re: Uniform Module Height

    Posted 13 years 4 months ago
    • We cant see your website as youve set it to offline mode lol.

      But... i guess what you are needing is a min-height css.

      If every box has a
      <div style="min-height:400px;">
Some Stuff In Here....
</div>

      then they will all be 400px in height, or whatever height you need :)
    • Kiss my RSS
    #749819

  • Re: Uniform Module Height

    Posted 13 years 4 months ago
    • Sorry about the offline mode... I just put it back online :)

      Thanks for the tip.

      Is there a way to set it so that height is relative to the "tallest" module rather than hard coding a specific height?
    #749825
    • Adamck's Avatar
    • Adamck
    • Elite Rocketeer
    • Posts: 546
    • Thanks: 2
    • Web Developer, IT Assistant, Graphics design, App Developer

    Re: Uniform Module Height

    Posted 13 years 4 months ago
    • I dont think you can, as the tallest one would be set to Auto or 100% the actual height isnt generated until the page loads.
      You would have to use Javascript to find the height of one module and set the height of the others.

      min-height would be your best bet, but it is hardcoded.
    • Kiss my RSS
    #749828

  • Re: Uniform Module Height

    Posted 13 years 4 months ago
    • Thank you. I will use the min-height. If you think of anything else please let me know.
    #749830
    • Adamck's Avatar
    • Adamck
    • Elite Rocketeer
    • Posts: 546
    • Thanks: 2
    • Web Developer, IT Assistant, Graphics design, App Developer

    Re: Uniform Module Height

    Posted 13 years 4 months ago
    • You could try this (no guarantees)
       
<script language="javascript">
var divh = document.getElementById('parentdivheight').offsetHeight;
document.write ('<style type="text/css">div.sameasparent { min-height: ' + divh  + 'px;} </style>');
</script>
 

      The tallest column/box would need to be
       
<div class="parentdivheight" style="height:100%;">
this is the tallest column
</div>
 

      And all the others need to be
       
<div class="sameasparent">
This column gets its height from "parentdivheight"</div>
 

      Might not work, but worth a shot.

      Ad.
    • Kiss my RSS
    #749832

  • Re: Uniform Module Height

    Posted 13 years 4 months ago
    • Thanks I will give it a try!
    #749839

Time to create page: 0.050 seconds