如何执行此操作：可变宽度的父元素，具有固定宽度的子元素和可变宽度的子元素？

Question

Before I explain, consider the following...

EXAMPLE HTML CODE:

<div id="Body">
    <div id="Content">...</div>
    <div id="Panel">...</div
</div>

CSS CODE:

#Body {
    min-width: 865px;
    width: 93%;
    max-width: 1785px;
}

#Panel {
    width: 250px;
    float: right;
}

#Content {
    float: left;
    min-width: 595px;
    width: /* This one needs to be fluid. So, what should I do? */;
    max-width: 1510px;
}

As you can see, 'Body' div is the fluid-width parent I was referring to, with fixed-width child element 'Panel' div and fluid-width 'Content' div — and that's exactly where I am stuck.

How should I define the width of 'Content' div? Any ideas are welcome. Thanks.

Answer 1

Put the #Panel div first, and then simply use this for #Content :

#Content {
    margin-right: 250px;
}

jsFiddle Demo

---

Here are some simple guidelines to make this work on your site. I used Chrome Developer Tools to do these and it works fine.

• #Body @ style.css
  • overflow: hidden;
• #Content @ custom.css
  • min-width: 595px;
  • width: 68%;
  • max-width: 1510px;
  • margin-right: 270px;
• #Content @ style.css
  • width: 680px;
  • float: left;

Answer 2

The fix for this issue is:

#Body {
    min-width: 865px;
    width: 93%;
    max-width: 1785px;
    position:relative; /* Added by me */
}

#Panel {
    width: 250px;
    /*float: right;*/
    position:absolute; /* Added */
    top:0; /* Added */
    right:0; /* Added */
}

#Content {
    float: left;
    min-width: 595px;
    width: 100%; /* Value added */
    max-width: 1510px;
    margin-right:250px; /* Added */
}

It worked fine for me.