Expandable div between two divs

Discussion in 'CSS' started by rdx65, Jul 10, 2010.

0
  1. #1
    I need to have 3 divs. Left, centre, right.
    I need to put an image in left and right divs and make centre div expandable.
    I have my divs like this:

    
left-div
{
width:230px;
float:left
height:110px;
}

right-div{
width;150px;
float:right;
height:110px;
}

centre-div
{
height:110px;
background-color:green;
margin-left:230px;
margin-right:150px;
}
    Code (markup):
    The problem is, when I decrease the window size, centre div falls below the left div.
    How can I make the centre div to shrink in width until some length is reached and after that there is no change in the divs when window width is shrinkin? Thanks
     
    rdx65, Jul 10, 2010 IP
  2. ktmfreelancer

    ktmfreelancer Greenhorn

    Messages:
    76
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #2
    yes, ofcourse it will fall down, because you haven't wrapped this 3 div's by another 1 more div on the top of it.
     
    ktmfreelancer, Jul 10, 2010 IP
  3. ktmfreelancer

    ktmfreelancer Greenhorn

    Messages:
    76
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #3
    put one more div above all this, with a fixed height to not let this fall down. the middle div according to your css won't work because you have fixed the height of the element.

    height:110px; change this to "min-height:110px;" and why there are margin-left and margin-right together in third div?
    this code wont be valid.
    anyways have a nice one buddy
     
    ktmfreelancer, Jul 10, 2010 IP