CODEWITHSUNDEEP
htmlcssuser-interface
user2542461
user2542461

Reputation: 59

HTML/CSS layout - dynamic width

I'am quite new in web developement and I'm facing the following problem:

I have a parent div whose width and height is unknown and I'd like to divide this div into four parts as follows:


    +-------------------------------------------------------------------------+
    |+---------------+ +--------------------+ +------------+ +---------------+|
    ||DIV 1          | |DIV 2               | |DIV 3       | |DIV 4          ||
    ||width: n px    | |widht: n px         | |width: 50px | |width: n px    ||
    |+---------------+ +--------------------+ +------------+ +---------------+|
    +-------------------------------------------------------------------------+

So div1, div2 and div4 need to have the same width whereas div3 has a static width of 50px.

Until now I have achieved this using some helper containers:


    divA = "position:absolute; width:66.6%"
       divB = "position:absolute;left:0px;right:50px"
           div1 = "width:50%"
           div2 = "width:50%"
       div3 = "position:absolute;right:0px;width:50px"
    div4 = "width:33.3%;right:0px"

First of all, this solution does not completly fit my needs since div1, div2 and div4 do not have the same width. Div1/div2 will have a width of (66.6%-50px)/2 < 33.3% wheras div4 has a width of exactly 33.3%

Second, the width of div3 has to be defined on two places which I feel to be a bit cumbersome.

So my question:

Is there a way to solve this usecase with pure html/css (without using tables)?

Thanks in advance,

Greez,

Harald

Upvotes: 1

Views: 12009

Answers (3)

Arup Senapati
Arup Senapati

Reputation: 11

I think it can be managed through margin property.

CSS:

.main{
    width: 100%;
    float: left;
}

.div1{
width: 33%;
height: 250px;
background-color:#aaa;
float:left;
margin-right: -20px;
}


.div2{
width: 33%;
height: 250px;
background-color:#bbb;
float:left;
margin-right: -20px;
}

.div3{
width: 50px;
height: 250px;
background-color:#ccc;
float:left;
}

.div4{
width: 33%;
height: 250px;
background-color:#ddd;
float:left;
margin-right: -10px;
}

HTML:

<div class="main">
<div class="div1"><!-- --></div>
<div class="div2"><!-- --></div>
<div class="div3"><!-- --></div>
<div class="div4"><!-- --></div>
</div>

Upvotes: 0

Sam
Sam

Reputation: 139

I guess this is what you need, not the best way to handle widths but i guess this covers more browsers as compared to calc()

http://jsfiddle.net/HD2ng/

HTML

<div id="container">
    <div id="twothird">
        <div id="div1">(66%-50px)/2</div><!--
     --><div id="div2">(66%-50px)/2</div><!--
     --><div id="div3">50px</div>
    </div><!--
 --><div id="onethird">33.3%</div>
</div>

CSS

#twothird, #onethird, #div1, #div2, #div3{ display:inline-block; height:100px; padding:0; margin:0;}

#container{
    margin:0 auto;
}

#twothird{
    width:66.6666%;
    overflow:hidden;
}

#div1{
    float:left;
    background:#e5e6e8;
    overflow:hidden;
}

#div2{
    float:left;
    background:#efefef;
}

#div3{
    width:50px;
    float:left;
    background:#e5e6e8;
}

#onethird{
    width:33.3333%;
    float:right;
    background:#efefef;
}

JS

$(document).ready(function(){
var cw = ($('#twothird').width()-51)/2;
$("#div1, #div2").width(cw);
});

$(window).resize(function() {
var cw = ($('#twothird').width()-51)/2;
$("#div1, #div2").width(cw);
});

Upvotes: 0

James Bruckner
James Bruckner

Reputation: 909

Although a bit unsupported in older browsers, I would recommend using calc(). Your 3 div widths could be equal to width:calc(33% - 50px / 3) and the 50 pixel wide div can still be set to width:50px.

Upvotes: 2

Related Questions