CODEWITHSUNDEEP
css
Dancer
Dancer

Reputation: 17651

Fixed width Div and expandable floated side by side?

Is it possible to have a fixed width div floated alongside a variable width div?

I would like to have a 80px image sit alongside a div that stretches to 100% of the remining width using dynamic content - the html would be a repeated version of below -

for example - 

    <div class="mediaImg">
       <img src="#"/>
    </div>
    <div class="textArea">
    blah blah blah
    </div>

Thanks Paul

Upvotes: 2

Views: 1161

Answers (3)

sandeep
sandeep

Reputation: 92803

you have to write like 

#divleft
{
    background-color:red;
    width:80px;
    height:80px;
    float:left;
}

#divright
{
    background-color:blue;   
    overflow:hidden;
    height:80px;
}

In this example of you give padding & margin to #divright. there is not effect in the layout structure.

check this http://jsfiddle.net/sandeep/u2sQD/1/

Upvotes: 1

Christopher
Christopher

Reputation: 13147

Yes. I would put them inside a container type div with position:absolute then the two div's having relative positioning with float left.

<div class='container' width='100%'>
    <div class='imgDiv'>
         <img src='...'></img>
    </div>
    <div class='content'>

       ...content goes here

    </div>
</div>

Then the css...

    .container{
          position:absolute
          width:100%
          height:100%

            }
     .imgDiv{

        position:relative
        float:left
        width:80px
         }
      .content{
        position:relative
        float:left

        }

Upvotes: 0

JNDPNT
JNDPNT

Reputation: 7465

Just apply float and an width on your fixed div:

div.fixed{
    float: left;
    width: 70px;
    padding: 0 5px;
}

Live example: http://jsfiddle.net/nvgBm/

Upvotes: 1

Related Questions