CODEWITHSUNDEEP
htmlcss
James Radford
James Radford

Reputation: 423

using css to allow a div to grow in width to a certain predetermined limit

Is it possible using CSS to have a panel that can grow in width as the content grows up to a certain predetermined limit? Many thanks, James

see here: http://jamesradford.net/me.htm

I need the 'LEFT COLUMN' to fill 50% of the 600px panel when there's sufficient content to fill the 50%. So in this example, the left column with much more content would grow to width=300px before vertically wrapping. thanks

Upvotes: 2

Views: 5594

Answers (3)

clairesuzy
clairesuzy

Reputation: 27624

based on the new information and link here's a suggestion.. use max-width as suggested on the left column, then set the column "gap" as a right margin to this div too.. then by setting overflow: hidden on the right column it will automatically take up whatever space is left over for it once other restrictions have been taken care of

working example : HERE

uncomment some of the text in left column to make the left div grow

Code: HTML

<div id="Container">

    <div class="leftCol">
        <h3>Left Column</h3>  
        <p>Pellentesque habitant morbi</p>
        <!--
        tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        -->
    </div>

    <div class="ColumnGap">
        <h3>RIGHT COLUMN</h3>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </div>

</div>

CSS

#Container {
    border: 1px solid #000;
    float: left;
    width: 600px;
}

.leftCol {
    float: left;
    background-color: #444;
    color: #fff;
    border: 1px solid #000;
    max-width: 298px;  /* took off 2px for border - optional */
    margin-right: 10px; /* this is the "column gap" */
}

.ColumnGap {
    overflow: hidden; /* this column will auto adjust to space left  */
    background: #eee;
    border: 1px solid #000;
}

Added jQuery IE6 solution:

<!--[if lte IE 6]>aded jQuery solution for IE6
<script type="text/javascript">
$(document).ready(function() {

          $(".leftCol").each(function() {

           //Get the width of the left column
           var width = $(this).width();

           // if it's width is greater than 298px, fix it at 298px
           if (width > 298) {
             $(this).css("width", "298px");
           }

         });

});
</script>
<![endif]-->

Upvotes: 1

David Thomas
David Thomas

Reputation: 253318

You can use max-width to determine the maximum width to which the div (or other block or inline-block element) can stretch.

You can also specify a min-width to define the minimum width a block (or inline-block) element can have:

p, div {
    min-width: 20em;
    max-width: 50%;
}

My personal usage is to specify one of the attributes as an absolute value (px, em, pt) and the other as a percentage of the screen (%) or parent element.

Upvotes: 3

My Head Hurts
My Head Hurts

Reputation: 37665

You can set a max-width property within the style

Upvotes: 1

Related Questions