Css: Four Divs, Third Has To Take The Rest Of The Space

June 22, 2024 Post a Comment

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 ha

Solution 1:

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><divclass='container'><divid="a">1</div><!--
        --><divid="b">2</div><!--
        --><divid="d">4</div></div><divid="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: 0px16px0px76px;
}
#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.

Solution 2:

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

Solution 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.

Solution 4:

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

Solution 5:

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>

Html5 Manual