CODEWITHSUNDEEP
csslayout
Ilja
Ilja

Reputation: 46537

Issue with percentage width

I have a main div which contains another 3 divs, inner divs are each separated into widths of 20% 50% and 30%. I encountered an issue, when resizing window to smaller sizes I get that squeezed effect ass all elements resize, however I want to keep element 1 and 3 at certain sizes (40px and 75px respectively). I tried setting element 1 to 40px, element 2 to 100% and element 3 to 75px widths, but eneded up with getting element 2 to occupy all space and push other elements out. I'll include image of normal state, resized state and desired state (on resize) that I wan't to achieve. How could I achieve it?

enter image description here

As you can see I only want middle section (element 2) to resize as windows is resized.

Upvotes: 1

Views: 93

Answers (4)

btevfik
btevfik

Reputation: 3431

i don't know if this works for you but basically i made all three inner divs absolute positioned. and had to use calc to calculate the middle div's width. there might be a better solution without using calc, but this is what came to my mind at this point.

http://jsfiddle.net/btevfik/VRU8V/

body{
    margin:0;
}

.container {
    height:20px;
    position:relative;
}

.div1 {
   width: 40px;
   position:absolute;
   left:0;
   border:1px solid blue;
}


.div2 {
   width: calc(100% - 120px);
   position:absolute;
   left:40px;    
   border:1px solid red;
}

.div3 {
   width: 75px;
   position:absolute;
   right:0;
   border:1px solid yellow;
}

Upvotes: 1

ASGM
ASGM

Reputation: 11391

The easiest way might be to do away with element 2 altogether and just put its contents directly within the parent div. Then you can float elements 1 and 2, and when the page is resized only the space between them will change:

<style type="text/css">
    #parent {position:relative;width:100%;height:100%;}
    #parent div {position:relative;height:100%;}
    #element1 {width:40px;float:left;}
    #element3 {width:75px;float:right;}
</style>

<div id="parent">
    <div id="element1"></div>
    <div id="element3"></div>
    <!-- Place the contents of element 2 here -->
</div>

Upvotes: 1

Mark
Mark

Reputation: 1093

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{
    margin:0;
    padding:0;
}

.wrapper{
    width:100%;
    height:400px;
    display:table;
}

#n1{
    width:20%;
    min-width:40px;
    background:red;
    display:table-cell;
}

#n2{
    width:50%;
    background:green;
    display:table-cell;
}

#n3{
    width:30%;
    min-width:75px;
    background:blue;
    display:table-cell;
}
</style>
<script type="text/javascript">
window.onload = function()
{
    document.getElementById('n1i').value = document.getElementById('n1').offsetWidth;
    document.getElementById('n2i').value = document.getElementById('n2').offsetWidth;
    document.getElementById('n3i').value = document.getElementById('n3').offsetWidth;
}

window.onresize = function()
{
    document.getElementById('n1i').value = document.getElementById('n1').offsetWidth;
    document.getElementById('n2i').value = document.getElementById('n2').offsetWidth;
    document.getElementById('n3i').value = document.getElementById('n3').offsetWidth;
}
</script>
</head>

<body>

<div class="wrapper">

    <div id="n1">
        &nbsp;
    </div>

    <div id="n2">
        &nbsp;
    </div>

    <div id="n3">
        &nbsp;
    </div>

</div>

First div width:<br />
<input type="text" id="n1i" readonly="true" /><br />

<br />

Second div width:<br />
<input type="text" id="n2i" readonly="true" /><br />

<br />

Third div width:<br />
<input type="text" id="n3i" readonly="true" />

</body>
</html>

Upvotes: 1

Ray
Ray

Reputation: 884

     <div class="div-contain"> 
       <div class="div-1"><div>
       <div class="div-2"><div>
       <div class="div-3"><div>
     <div>




.div-contain {
     position: relative;
}

.div-1 {
   width: 20%;
   min-width: 40px;
   float: left;
}

.div-2 {
    width: 50%;
    position: abosolute;
    margin: 0 auto;
}


.div-3 {
      width: 30%;
      min-width:75px;
      float: right;
}

You could also use a media query and directly specify widths when it reaches a break point. add a margin to the center div the size of the left div

Upvotes: 1

Related Questions