Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Problem Width Autoresizing in DIV [HTML Code Attached]

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • May 26, 2009 at 12:21 pm #24954
    victorymoon
    Member

    Hi Friend,

    Concept ::
    I have a main container(a fixed width had been specified to this) and two sub containers named (left_container) and (right_container).
    left container has an Image/heading that will be dynamically generated. so we cant predefine the width of left container. likewise on right container content related to the heading/image will be populated so right container has to automatically resize the width according to the width of left container.

    Issue::

    Right now i had used width:auto for left container and width 100% for right container. But right container is wrapping down because of insufficient width. I need a solution for this, Please help me out of this

    I had attached HTML code below

    Here is the HTML code::

    ========= Code Starts Here ============
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <title> Auto Resizing </title>
    <style>
    #main_container{float:left; width:600px}
    .left_container{float:left; width: auto}
    .left_container h1{font-size:5em; margin-right:20px}
    .right_container{float:left; width: 100%;}
    </style>
    </head>

    <body>
    <div id="main_container">
    <div class="left_container">
    <h1>CSS</h1>
    </div>
    <div class="right_container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia dui porttitor lorem scelerisque hendrerit. Nam laoreet mollis justo, vitae convallis velit sagittis at. Curabitur eget velit erat, vel pellentesque ante. Donec id nunc orci. Nulla facilisi. Integer magna orci, gravida eu facilisis quis, porta vitae sem. Aliquam sodales ipsum non nulla varius quis imperdiet dolor tristique. Vivamus dapibus ante ac neque mattis vitae euismod lorem mollis. Curabitur ut elit nulla, et vulputate libero. Phasellus libero tellus, rutrum a accumsan a, dictum non ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec lobortis dolor eget arcu vehicula congue. Morbi quis libero eget quam pretium suscipit. Mauris facilisis eleifend consequat. Vivamus interdum, nibh in sagittis ullamcorper, elit lorem gravida tortor, ac tincidunt libero leo eu velit. Nulla eleifend pellentesque odio, in pharetra orci condimentum vitae. Aenean cursus scelerisque orci, eget sagittis arcu semper nec. Sed malesuada elit quis nisl sodales commodo. Vivamus tristique orci et lectus placerat auctor.
    </div>
    </div>
    </body>
    </html>
    ============= Code Ends Here ==========================

    May 26, 2009 at 3:15 pm #58208
    TheDoc
    Member

    I tried a few options and came up empty handed. I got close with one, but the content of one of the divs would wrap under the other one if it had longer content.

    You’re just going to have to define one of the divs.

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.