How to do this: A fluid-width parent element, with a fixed-width and a fluid-width child element?

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.

CSS Tricks has an awesome solution, thought I should share: http://css-tricks.com/the-perfect-fluid-width-layout/ — its_me, Apr 04 '12 at 07:56

kapa · Accepted Answer · 2012-03-14T08:16:29.293

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;~~

edited Mar 14 '12 at 08:16

answered Mar 14 '12 at 07:39

kapa

77,694
21
158
175

Excellecto! But just asking, should it be `margin` or `padding`? – its_me Mar 14 '12 at 07:41
@badlearner Certainly margin. Padding might work in a scenario when you put Panel inside Content and make it `position: absolute;`. But here, the margin-based scenario sounds better. – kapa Mar 14 '12 at 07:44
@badlearner I will check it. Meanwhile, see my jsFiddle Demo and compare it to your solution. – kapa Mar 14 '12 at 08:02
@badlearner Well, you should NOT put a `width` and `float: left;` on Content. That messes up the whole logic. Also, put `overflow: hidden` on Body to clear the floatright. If you are in doubt, just play with the jsFiddle Demo I created, it works. – kapa Mar 14 '12 at 08:03
I am still unable to get it to work. Can you kindly take a look at my website? (and if possible provide the necessary CSS via pastebin?) Please. Thanks for understanding. – its_me Mar 14 '12 at 08:09
I am sorry. Adding overflow: hidden got things to work as they should! :) I will report back if I see any issues (mostly not). – its_me Mar 14 '12 at 08:14
@badlearner I added some guidelines on how to make this work for your site. – kapa Mar 14 '12 at 08:17
There's one small issue. I see white space in the post body now. Any idea why? [Screenshot here.](http://i.imgur.com/pNObo.png) I am extremely sorry if I am missing something again. – its_me Mar 14 '12 at 08:18
@badlearner If you provide a working example I can play with, I will look at it. – kapa Mar 14 '12 at 08:23
Yes, please go [here](http://groups.boygeek.in/discussion/3/a-test-discussion/p1). – its_me Mar 14 '12 at 08:28
Also, is there a way to avoid using `overflow: hidden;` for #Body div? It's hiding the counter to the left of #Content div. :( Man, this is tricky! – its_me Mar 14 '12 at 08:29
@badlearner Tricky for sure :). I don't know yet what causes your whitespace in the post. The test page you linked still shows the old layout. – kapa Mar 14 '12 at 08:31
probably cache. I will take a look. Please rrrrefffresh the page multiple times - Ctrl + F5. – its_me Mar 14 '12 at 08:33
I think I found it's this: `.Preview .Message, .MessageList .Message {clear: both;}`. Like I asked earlier, is there a way to avoid using overflow: hidden; for #Body div? It's hiding the counter to the left of #Content div. – its_me Mar 14 '12 at 08:49
@barlearner Putting `overflow: hidden` on Comment seems to solve it. Maybe there is an easier solution, but I am too drunk now to see it. Instead of `overflow: hidden`, you might use some other clearing techniques or move that counter somewhere else. – kapa Mar 14 '12 at 08:50
1

just wanted to let you know that using `clear:both;` instead of `overflow:hidden;` solved it. Thanks again for helping me out today! – its_me Mar 14 '12 at 09:11

score 0 · Answer 2 · answered Mar 14 '12 at 07:52

0

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.

answered Mar 14 '12 at 07:52

Alaa Badran

1,848
15
19

1

There's a problem. When I resize the screen the 'Panel' div is getting under 'Content' div. – its_me Mar 14 '12 at 08:05
badlearner is right, this is not very reliable. There will also be a problem when Panel is higher than Content. [jsFiddle Demo of this solution](http://jsfiddle.net/zmw5P/). – kapa Mar 14 '12 at 08:10
I agree with you, but there is a solution for that.. see this: http://stackoverflow.com/questions/5359574/resize-parent-div-to-match-absolutly-positioned-child-div-height – Alaa Badran Mar 14 '12 at 08:36

How to do this: A fluid-width parent element, with a fixed-width and a fluid-width child element?

2 Answers2