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.
Put the #Panel
div first, and then simply use this for #Content
:
#Content {
margin-right: 250px;
}
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;
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.