Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Matching Height\width of two elemnts

    Hello guys, I'm new here

    I'm trieng to match two DIV elemnts height, that the first div will be at a height depending on the contents of the sertain DIV, and the second DIV will be automaticly matched in height, as you would axpect in a table row and two cells in the same row to behave.

    Thanks

  • #2
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This could be done in a variety of ways depending on your page.
    One problem that people often have is getting columns of a 2- or 3-column layout to be the same height. One easy way to sort this out is to fake it by using background images. Here's an example:
    http://bonrouge.com/3c-hf-fluid-lc.php

    If that's not what you mean, maybe this might help...

    http://bonrouge.com/br.php?page=equalheightcss

    Failing that, you could fall back on javascript...

    http://bonrouge.com/br.php?page=fixH

  • #3
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    assuming that you want the two divs side by side, you could put the 2 divs inside an outer div and set the two inside divs to 100% height??

    havent tried it, but sounds like a plan! lol
    "You only live once, play it right, and once is enough" - me :)
    "When i die only god can take my soul" - me again! :P

  • #4
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jonnybinthemix
    assuming that you want the two divs side by side, you could put the 2 divs inside an outer div and set the two inside divs to 100% height??
    That would work if the outer div had a fixed height, but that doesn't seem to be the case...

  • #5
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    good point!
    "You only live once, play it right, and once is enough" - me :)
    "When i die only god can take my soul" - me again! :P

  • #6
    New Coder
    Join Date
    May 2006
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by BonRouge
    This could be done in a variety of ways depending on your page.
    One problem that people often have is getting columns of a 2- or 3-column layout to be the same height. One easy way to sort this out is to fake it by using background images. Here's an example:
    http://bonrouge.com/3c-hf-fluid-lc.php

    If that's not what you mean, maybe this might help...

    http://bonrouge.com/br.php?page=equalheightcss

    Failing that, you could fall back on javascript...

    http://bonrouge.com/br.php?page=fixH
    Thanks, but that's not what I was looking for.
    The background hack is kinda cheap, isn't?
    I'm looking for a solution that will make two DIVs inside a parent DIV to behave like two cells inside a perant row of a table, and preferbly not with JS and background that makes it look good, but it not IT, and I hope you know what I mean

    P.S.
    Loved your site and the layouts, will defenetly use it
    and what is this code:
    Code:
     #wrap {
    position:relative;{
    width:780px;{
    min-height:100%;{
    margin:auto;{
    background:#fff url(bg.gif) repeat-y;{
    border:1px solid gray;{
    border-width:0 1px;{
    }{
    ?
    why there are so many opening curly brackets? (on this page: http://bonrouge.com/2c-hf-content1st.php )

  • #7
    New Coder
    Join Date
    May 2006
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

    Quote Originally Posted by BonRouge
    That would work if the outer div had a fixed height, but that doesn't seem to be the case...
    Yeap, tried that one, no go for me

    hope that There is a solution out there for CSS2 without JS...

  • #8
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by The Ace
    Thanks, but that's not what I was looking for.
    The background hack is kinda cheap, isn't?
    I'm looking for a solution that will make two DIVs inside a parent DIV to behave like two cells inside a perant row of a table, and preferbly not with JS and background that makes it look good, but it not IT, and I hope you know what I mean

    P.S.
    Loved your site and the layouts, will defenetly use it
    and what is this code:
    Code:
     #wrap {
    position:relative;{
    width:780px;{
    min-height:100%;{
    margin:auto;{
    background:#fff url(bg.gif) repeat-y;{
    border:1px solid gray;{
    border-width:0 1px;{
    }{
    ?
    why there are so many opening curly brackets? (on this page: http://bonrouge.com/2c-hf-content1st.php )
    Ah! That's a mistake. Thanks for pointing it out. I didn't notice...

    Quote Originally Posted by The Ace
    The background hack is kinda cheap, isn't?
    It's actually very common. Do a search on 'faux columns' and you'll see.
    Last edited by BonRouge; 05-10-2006 at 01:50 AM.

  • #9
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    I don't know if this is exactly what your trying to achieve but it sounds similar. The issue on this trial was to make the top 2 divs stay the same height no matter which one had more content. It took a while but tested in the end alright in IE6 FF and Opera. It's a little code heavy and I haven't seen it in a while but a little looking at the code and you should probally be able to make heads or tails of it. i think i kept a pretty good log of the progression in the threadthough.

    Keeping two floating divs aligned.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #10
    New Coder
    Join Date
    May 2006
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I donno, I still don't like this thing, currently using tables (now this is cheap :P),
    But still hoping for a css trick...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •