No replies
victorymoon
Offline
newbie
Last seen: 12 years 34 weeks ago
Joined: 2008-11-12
Posts: 4
Points: 0

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 Document code below

Here is the HTML code::

========= Code Starts Here ============

Auto Resizing

#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%;}

CSS

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.

============= Code Ends Here ==========================