CSS: four divs, third has to take the rest of the space

Question

I tried several resources (SO as well) on the internet but I simply can't solve this one.

There are just four floated divs on a web page.

divs 1, 2 and 4 have fixed width
div 3 has to take up the rest of the width
div 2 and 3 have to have a padding in between
all divs MUST have padding=0 (requirement for Sly scrolling library)

Here is the schematic diagram of what I'm trying to do in my page:

 +-----------+--+   +---------------------------+--+
 | 1         |2 |   | 3                         |4 |
 |           |  |   |                           |  |
 |           |  |   |                           |  |
 |           |  |   |                           |  |
 |           |  |   |                           |  |
 |           |  |   |                           |  |
 |           |  |   |                           |  |
 |           |  |   |                           |  |
 +-----------+--+   +---------------------------+--+

No matter what I try, I can't get div 3 to take up rest of the width, while maintaining padding between div 2 and div 3. This was my last attempt:

HTML

<div id="slyFrame_parent">
    P
</div>
<div id="slyScrollbar_parent">
    S
</div>
<div id="slyScrollbar_child">
    S
</div>
<div id="slyFrame_child">
    P
</div>

CSS

#slyFrame_parent {
    padding: 0px;
    float: left;
    height: 500px;
    width: 60px;
    border: 1px solid #333;
}

div#slyScrollbar_parent {
    padding: 0px;
    float: left;
    height: 500px;
    width: 16px;
    border: 1px solid #333;
    border-left: 0px none;
}

#slyFrame_child {
    padding: 0px;
    overflow: hidden;
    height: 500px;
    width: auto;
    margin-left: 5px;
    border: 1px solid #333;
}

div#slyScrollbar_child {
    padding: 0px;
    float: right;
    height: 500px;
    width: 16px;
    border: 1px solid #333;
    border-left: 0px none;
}

FIDDLE

http://jsfiddle.net/ozrentk/jw73j/

Is there a solution to it?

imperfectinfinity · Accepted Answer · 2013-07-26T10:07:55.147

div#slyScrollbar_parent {
    padding: 0px;
    float: left;
    height: 500px;
    width: 16px;
    border: 1px solid #333;
    border-left: 0px none;
    /* Add margin-right to the second element instead 
       of margin-left to the third */
    margin-right: 10px;
}

This seems to do the trick.

jsFiddle: http://jsfiddle.net/jPdbK/

If you're okay with changing markup, I'd suggest this approach. Put all the divs in a container, let 2 float left and 1 float right. In the background I'd put the 3 column, with margin left and right.

Still not very good looking, but it works without any overflow hacks.

The HTML

<section>
    <div class='container'>
        <div id="a">1</div><!--
        --><div id="b">2</div><!--
        --><div id="d">4</div>
    </div>
    <div id="c">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam era.</div>
</section>

and the CSS

* {
    margin:0;
    padding:0;
}
section {
    width: 100%;
}
.container {
    position: absolute;
    width: 100%;
}
#a {
    padding: 0px;
    display: inline-block;
    height: 500px;
    width: 60px;
    background-color: #bbb;
}
#b {
    padding: 0px;
    display: inline-block;
    height: 500px;
    width: 16px;
    background-color: #ccc;
    border-left: 0px none;
}
#c {
    padding: 0px;
    display: inline-block;
    height: 500px;
    width: auto;
    background-color: #ddd;
    margin: 0px 16px 0px 76px;
}
#d {
    padding: 0px;
    float: right;
    height: 500px;
    width: 16px;
    background-color: #eee;
}

jsFiddle: http://jsfiddle.net/PTAk5/

Also a js Version: http://jsfiddle.net/ASnSJ/ which I think is the best approach if you want to use all the floats and have a proper markup.

What the... why does it work using margin-right, but not using margin-left? I mean, it works but... ? — OzrenTkalcecKrznaric, Jul 26 '13 at 08:50
If you look in the developer tools you can see that the margin is there, it's just not pushing the other boxes away. Also the boxes are mixed up it's not PSSP as in the markdown but PSPS or 1243. If you delete the overflow:hidden then the margin will work, but of course the div then spans over the full width. So it has probably something to do with the overflow, but I'm not really sure about the whole construction either, seems not really maintainable to me. I'd suggest either using javascript to get the width or as @kougiland suggested css calc. — imperfectinfinity, Jul 26 '13 at 09:13
Yes, I'm examining the layout in Chrome right now. However, I can't use css3 experimental technology due to the nature of my site (cross-browser; calc() doesn't work in Opera for example) — OzrenTkalcecKrznaric, Jul 26 '13 at 09:17
Ozren, found the answer here: http://stackoverflow.com/questions/4631765/how-come-the-floated-elements-cant-set-their-left-and-right-margins http://jsfiddle.net/jPdbK/1/ ;-) — Stano, Jul 26 '13 at 09:40

LandonSchropp · Answer 2 · 2013-07-26T09:08:53.107

Since the widths and heights of the containers are fixed, you can accomplish this using absolute positioning. Here's the fiddle. Just be sure the parent of the elements has position: relative set so the containers are positioned relative to it.

Here's the HTML:

<div id="first">
    1
</div>
<div id="second">
    2
</div>
<div id="third">
    3
</div>
<div id="fourth">
    4
</div>

and the CSS:

#first, #second, #third, #fourth {
    position: absolute;
    top: 0;
    bottom: 0;
}

#first {
    background-color: rgba(255, 0, 0, 0.25);
    width: 50px;
}

div#second {
    background-color: rgba(0, 255, 0, 0.25);
    width: 50px;
    left: 50px;
}

#third {
    background-color: rgba(0, 0, 255, 0.25);
    left: 125px;
    right: 50px;
}

div#fourth {
    background-color: rgba(255, 0, 255, 0.25);
    width: 50px;
    right: 0;
}

This is also a good solution, but in my case I qwould like to avoid absolute positioning. I will use header and footer, liquid layout etc, and I remember some problems with absolute positioning on my last project. So... — OzrenTkalcecKrznaric, Jul 26 '13 at 09:07

score 3 · Answer 3 · answered Jul 26 '13 at 08:49

3

Done!

instead of giving margin left to the auto-width container.

provide a margin-right to the second div.

div#slyScrollbar_parent 
{  
   padding: 0px;float: left;    
   height: 100px;
   width: 16px;    
   border: 1px solid #333;    
   border-left: 0px none; 
   margin-right: 20px;
}

Hope that solves it.

answered Jul 26 '13 at 08:49

SHANK

2,978
23
31

2

As I already said, this solves the problem but what is wrong with left margin? – OzrenTkalcecKrznaric Jul 26 '13 at 09:00

score 2 · Answer 4 · answered Jul 26 '13 at 09:00

2

hi your solution is behind css calc you can apply it like this:

#slyFrame_child {
 padding: 0px;
float: right;
overflow: hidden;
height: 500px;
width: -webkit-calc(100% - 128px);
width: -moz-calc(100% - 128px);
width: calc(100% - 128px);
border: 1px solid #333;
}

demo http://jsfiddle.net/jw73j/4/

hope this help

answered Jul 26 '13 at 09:00

Gildas.Tambo

22,173
7
50
78

This part of CSS3 is experimental. I have to find a cross-browser solution for a public website, so - no calc(). – OzrenTkalcecKrznaric Jul 26 '13 at 09:10

score 1 · Answer 5 · answered Jul 26 '13 at 09:06

CSS

#slyFrame_child {
padding: 0px;
overflow: hidden;
height: 500px;
width: calc( 100% - 148px);
margin-left: 50px;
border: 1px solid #333;
float: left;
}

HTML

<div id="slyFrame_parent">
    P
</div>
<div id="slyScrollbar_parent">
    S
</div>
<div id="slyFrame_child">
    P
</div>
<div id="slyScrollbar_child">
    S
</div>

CSS: four divs, third has to take the rest of the space

5 Answers5

Linked