Divs & height

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • UnderTaker

    Divs & height

    Hi guys, I got a small problem which is driving me mad.
    I don't know if what I want to do is impossible or I am just overlooking
    something stupid, in both cases I hope you will answer me.

    I got a tableless 3 colums layout, container div is set to 100% height.
    First column (id="newsbox") too is 100% height and it as 2 div inside; first
    one(id="graphic "), is set with height on 350 pixel, second one (id="news")
    contains an iframe.

    The matter is: how can I manage to have the iframe taking all the remaing
    height? If I give 100% height page became awfully long. I've tried some
    hack too but with no success, and #graphic div has to be necessarily
    350pixel high.


    This is the page code:
    <div id="newsbox">
    <div id="graphic" ><img src="files/image.jpeg" width="230"
    height="300"></div>
    <div id="news" ><iframe src="news.php"> </iframe>
    </div>
    </div>
    This is the CSS code:
    #newsbox {
    height: 100%;
    width: 230px;
    float: left;
    border: none;
    margin: 0px;
    padding: 0px;
    }
    #graphic {
    margin: 0px;
    padding: 0px;
    border: none;
    width: 230px;
    clear: both;
    height: 350px;
    float: left;
    }
    #news {
    width: 230px;
    float: right;
    margin: 0px;
    padding: 0px;
    height: 100%;
    }

    At start both image and Iframe were inside #newsbox div, with just the same
    result.
    Please help me.
    UT


  • Gus Richter

    #2
    Re: Divs &amp; height

    UnderTaker wrote:[color=blue]
    > The matter is: how can I manage to have the iframe taking all the remaing
    > height?[/color]

    Comments on your provided code:
    You define the Height of the image to be 300 pixels for the image
    itself, yet for the "graphic" container, you define its Height to be
    350px. If you give the "graphic" also to be 300px, this should resolve
    your problem regarding the iframe taking the remaining height of the column.

    It seems that you have to give the Width Attribute directly to iframe.
    I have no idea as to why you apply float:right to "news" if you want it
    to be in the same column.

    --
    Gus

    Comment

    Working...