This layout just seems not to be suited for the usual CSS techniques

Question

Just check this fiddle:

http://jsfiddle.net/9EJpu/25/

How can I stretch the blue div 100% horizontally so it docks to the purple right div?

If I set width:100% its just doing what a div is used for to "line-break" down the purple div.

I also tried display:inline(-block) nothing helped to make the purple div stay on the same

line as the blue div.

The solution must work on IE9. Please no CSS3 hacks.

i think your goal is to overlay blue div so it reaches purple div. yes? — Behnam Esmaili, Jun 11 '12 at 18:48
The blue, green and purple div *are* on the same line, as far as I can see. I don't understand what you're asking. — bfavaretto, Jun 11 '12 at 18:48

score 1 · Answer 1 · answered Jun 11 '12 at 18:54

1

If I interpret your question correctly you need to change a couple of things...

#wrap {
   width:100%;
    height:100%;
   background-color:green;
   position: relative;
}
#left_col {  
    overflow:auto;
   float:left;
   height:100%;
   margin-right: 100px;
    background-color:blue;
}
#right_col {   
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width:100px;
   background-color:purple;
}

You could add position: fixed to #right_col, but it would cover your footer.

Here is a demo:

http://jsfiddle.net/xuBfe/

answered Jun 11 '12 at 18:54

methodofaction

70,885
21
151
164

I always thought position absolute is a bad thing. Therefore I tried to avoid it. – Pascal Jun 11 '12 at 19:17
Yours seem to work best. Seems the margin-right:100px did the trick. There is still one thing I want to get rid of. The outer scrollbar, how can I remove it? http://s15.postimage.org/9h421h6wr/divscrollbar.png – Pascal Jun 11 '12 at 19:31
You need to implement a sticky footer on top of this solution, http://www.cssstickyfooter.com/ – methodofaction Jun 11 '12 at 19:45
I dont know why (maybe someone changed the code) but the code jsfiddle does not work anymore. There is never a vertical scroller visible in the left_col. I just checked this in my companies IE9. Could you please recheck the code? or why the scroller is not visible? – Pascal Jun 12 '12 at 10:02
ok I found the problem: When the right col has a width:200px then its not enough to give the left col a margin-right:200px (same size) I have to make it margin-right:220px else the scroller is hidden. This destroys all flexibility/dynamic and needs javascript to fix. I dont want that or I did something wrong? – Pascal Jun 12 '12 at 11:55

score 0 · Answer 2 · answered Jun 11 '12 at 18:49

0

Using CSS3's relatively safe calc property. -> http://jsfiddle.net/joplomacedo/9EJpu/27/

You can use safer properties though, that just seemed the quickest way to do it with your existing markup.

answered Jun 11 '12 at 18:49

João Paulo Macedo

15,297
4
31
41

Please no CSS3 stuff. IE8/9 cant handle it. – Pascal Jun 11 '12 at 19:20
IE8 can't. IE9 seems to be able to. -> http://caniuse.com/#search=calc Either way, if you need IE8 support then yeah, it doesn't work. – João Paulo Macedo Jun 11 '12 at 19:32

score 0 · Answer 3 · answered Jun 11 '12 at 18:56

Example:

http://jsfiddle.net/hunter/9EJpu/37/

To get the content of the main panel to have the proper width you can add a wrapping element within left-col

#left_col
{      
    overflow:auto;
    float:left;
    height:100%;
    width:100%;
    background-color:blue;
}

#left_col > *
{
    margin-right: 100px;
}

#right_col 
{
    right: 0;
    top: 0;
    position:fixed;
    z-index: 1000;
    height:100%;
    float:right;
    width:100px;
    background-color:purple;
}

#footer
{
    width: 100%;
    bottom: 0;
    left: 0;
    position: fixed;
    background-color:yellow;
    z-index: 2000;
}

the vertical scrollbar does not work anymore on the blue left div. — Pascal, Jun 11 '12 at 19:16

score 0 · Answer 4 · answered Jun 11 '12 at 19:00

0

Another possible solution that makes use of the safer box-sizing property.

http://tinkerbin.com/Vi1Rtt1T

answered Jun 11 '12 at 19:00

João Paulo Macedo

15,297
4
31
41

This does not work when the menu static is on the right side. – Pascal Jun 11 '12 at 19:20
That's just a question of changing the float from left to right, and changing background position. Take a look -> http://tinkerbin.com/PHvZnBvb – João Paulo Macedo Jun 11 '12 at 19:35
this solution with all the background stuff need is terrible. – Pascal Jun 12 '12 at 10:14
I don't think so. You'll need that a background-image if you don't know which of the two columns is going to be the highest. That 'background stuff' prevents you from having to use an actual image, making the page load faster. You're terrible Pascal. – João Paulo Macedo Jun 28 '12 at 11:42

score -1 · Answer 5 · answered Jun 11 '12 at 18:52

-1

make blue width 100% and pad the right side with the width of the purple, purple should have fixed on the right

Edit:

yes I forgot, ok then just float a div to the right side with the width of the purple (inside of the blue). Just need a space holder so things don't run underneathe

answered Jun 11 '12 at 18:52

Huangism

16,278
7
48
74

can't do padding with 100% width w/o it sucking – hunter Jun 11 '12 at 18:52

This layout just seems not to be suited for the usual CSS techniques

5 Answers5