Adjusting Height (CSS templates)

Discussion in 'HTML' started by lejason@gmail.com, Apr 2, 2007.

  1. Guest

    I am working on creating a localization template for my company. We
    are looking to make these templates cross-browser, cross-device
    compatible...so we're going all CSS. The template is done but there
    is one small issue.

    Part of the design includes numerous floating boxes that will hold
    various dynamic info. To place and float the boxes is simple enough.
    However, I want these boxes to act as a single unit (similar to a
    table) in regards to their dimensions. In other words, I want them to
    groups of them (specifically, rows) to have the same height and I want
    that height to be based on which ever box has the most content (again,
    if you're having trouble understanding what im asking -- think of how
    a table works, the dimensions of the cells adjust to the cell with the
    most info).

    So, I obviously cant set the height (because it will be dynamic) and
    more, I want this to be compatible with IE so I cant use quick-fix'
    like "min-height"

    so CSS kids...any ideas?

    Here's what I got for code. The first part is the relevant


    ------ Relevant ---------

    #imagespot {
    float:left;
    margin: 5px 0 0 10px;
    }
    #contentspot {
    float: left;
    margin: 5px 0 0 10px;
    width: 240px;
    background:#f2ecde url(../images/b_bottom_right.gif) bottom right no-
    repeat;
    height: 280px;
    }
    #contentspot p{
    padding: 10px;
    }
    #menuarea{
    clear:both;
    margin-left: 140px;
    margin-right: 0px;
    height: 24em;
    }
    #menu {
    float: left;
    margin: 10px 0 0 10px;
    background:#f2ecde url(../images/b_bottom_right.gif) bottom right no-
    repeat;
    width:195px;
    height: 18em;
    }
    #menu p {
    padding: 10px;
    }

    ------ End of Relevant ---------

    /* Main Content */


    #content-container {
    width:770px;
    }
    #leftmenu{
    float:left;
    width:150px;
    margin-left: 0px;
    margin-top: 5px;
    background:#f2ecde url(../images/b_bottom_right.gif) bottom right no-
    repeat;
    }
    #leftmenu p{
    font-weight:bold;
    padding: 10px;
    }
    #rightcontent{
    float:right;
    margin-top: 5px;
    width:575px;
    padding:15px;
    background:#FFF;
    }


    And here is what I got for the relevant HTML

    <div id="content-container">
    <div id="leftmenu">
    <p>Links<br />
    and more links<br />
    Another link<br />
    More links still<br />
    Last link</p>
    </div>

    <div id="imagespot">
    <img src="images/sechead.jpg" />
    </div>
    <div id="contentspot">
    <p>Vestibulum iaculis commodo mi. Nunc ipsum ligula, tincidunt
    commodo, luctus id, ultricies in, mauris. Pellentesque habitant morbi
    tristique senectus et netus et malesuada fames ac turpis egestas.
    Fusce consectetuer lacinia lacus. Nullam nunc orci, ultrices at,
    dignissim ac, condimentum ac, magna. Sed iaculis metus quis pede.
    Nullam consequat.</p>
    </div>
    <div id="menuarea">
    <div id="menu"><p>Vestibulum iaculis commodo mi. Nunc ipsum ligula,
    tincidunt commodo, luctus id, ultricies in, mauris. Pellentesque
    habitant morbiSed iaculis metus quis pede. Nullam consequat.</p>
    </div>
    <div id="menu"><p>Vestibulum iaculis commodo mi.</p>
    </div>
    <div id="menu"><p>Vestibulum iaculis commodo mi. Nunc ipsum ligula,
    tincidunt commodo, luctus id.</p>
    </div>
    </div>
    </div>


    And I want it to look like this page <a href="http://terex.com/
    main.php?obj=spot&action=SPLASH&nav=spot">Click Here</a>
    , Apr 2, 2007
    #1
    1. Advertising

  2. Scripsit :

    > The template is done but there is one small issue.


    Where's the URL?

    > Part of the design includes numerous floating boxes that will hold
    > various dynamic info.


    You need to identify, preferably both by visual appearance and by HTML
    element structure, what the [censored] boxes you are talking about.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Apr 2, 2007
    #2
    1. Advertising

  3. Ben C Guest

    On 2007-04-02, <> wrote:
    > I am working on creating a localization template for my company. We
    > are looking to make these templates cross-browser, cross-device
    > compatible...so we're going all CSS. The template is done but there
    > is one small issue.
    >
    > Part of the design includes numerous floating boxes that will hold
    > various dynamic info. To place and float the boxes is simple enough.
    > However, I want these boxes to act as a single unit (similar to a
    > table) in regards to their dimensions. In other words, I want them to
    > groups of them (specifically, rows) to have the same height and I want
    > that height to be based on which ever box has the most content (again,
    > if you're having trouble understanding what im asking -- think of how
    > a table works, the dimensions of the cells adjust to the cell with the
    > most info).


    Yes, and table-cells are the only things that work like that.

    > So, I obviously cant set the height (because it will be dynamic) and
    > more, I want this to be compatible with IE so I cant use quick-fix'
    > like "min-height"
    >
    > so CSS kids...any ideas?


    There is no alternative to table-cells to do exactly what you want.

    If the individual floating boxes don't have to have distinct borders or
    background colours, then you can try something like the example below.
    They are different heights, but each "row" takes on the height required
    for the tallest float so they can be made to line up horizontally, just
    not to appear in individual pigeon-holes.

    <head>
    <style type="text/css">
    div.cell
    {
    float: left;
    margin-right: 2em;
    /*
    * If you add a border to these you will see that they aren't
    * the same height along the row, of course.
    */
    }
    div.row
    {
    /*
    * We set overflow hidden to make this a BFC root and therefore
    * include floating descendents in its height
    */
    overflow: hidden;
    padding: 1em;
    border: 1px solid black;
    margin-top: 0.5em;
    }
    </style>
    </head>

    <body>
    <div class="row">
    <div class="cell">
    a couple<br>
    of lines
    </div>
    <div class="cell">
    one line
    </div>
    <div class="cell">
    one<br>
    two<br>
    three lines
    </div>
    </div>
    <div class="row">
    <div class="cell">
    a couple<br>
    of lines
    </div>
    <div class="cell">
    one<br>
    two<br>
    three lines
    </div>
    <div class="cell">
    one line
    </div>
    </div>
    </body>
    Ben C, Apr 2, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Adam Smith

    Adjusting Input field size (height)

    Adam Smith, Sep 9, 2006, in forum: HTML
    Replies:
    3
    Views:
    12,916
    Jukka K. Korpela
    Sep 9, 2006
  2. Cal Who
    Replies:
    2
    Views:
    409
    Cal Who
    Jun 1, 2010
  3. Jesse Joseph Acosta

    Adjusting the width and height of a popup window

    Jesse Joseph Acosta, Nov 18, 2003, in forum: Javascript
    Replies:
    1
    Views:
    101
  4. Fredyy
    Replies:
    3
    Views:
    131
    Fredyy
    Jul 14, 2006
  5. newbie
    Replies:
    0
    Views:
    116
    newbie
    May 16, 2007
Loading...

Share This Page