CODEWITHSUNDEEP
htmlcss
Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13998

Auto width CSS not working for my middle division

I have three divisions and try to assign the width for my first and last divisions using CSS calc property. I am trying to assign the middle division width based on calc results. But it is not assigning any width for middle division.

HTML:

 <div style="width:400px;">
<div class="first">First Division Content Goes Here.</div>
<div class="divider"></div>
<div class="last">Second Division Content Goes Here.</div>
</div>

CSS:

 .first
{
height:50px;
background-color:#ff00ff;
float:left;
width: calc(50% - 10px);
}
.divider
{
width:auto;
height:50px;
background-color:#fff000;    
float:left;
}
.last
{
height:50px;
background-color:#00ffff;
float:left;
width: calc(50% - 10px);
}

What is the problem? How can i assign the width for my middle part based on the result of calc property?

JSFIDDLE

EDIT:

I have received many answers like "Width auto won't assign a width automatically if there isn't any content inside the div". So that I have updated my jsfiddle with adding a text in my middle part. So now it has some content and need to adjust the width automatically.

Updated JSFIDDLE

Upvotes: 0

Views: 92

Answers (3)

Aboca
Aboca

Reputation: 575

Width auto won't assign a width automatically if there isn't any content inside the div as it adjusts it's width to the content length.

So assign a width manually:

.first
{
    height:50px;
    background-color:#ff00ff;
    float:left;
    width: calc(50% - 10px);
}
.divider
{
    width:20px;
    height:50px;
    background-color:#fff000;    
    float:left;
}
.last
{
    height:50px;
    background-color:#00ffff;
    float:left;
    width: calc(50% - 10px);
}

EDIT: Maybe this is what you are looking for, a 3 column grid design. Using calc isn't really the best practice for this, try assigning a percentage of width to each div, it ends being the same with less complexity.

.first
{
    height:50px;
    background-color:#ff00ff;
    float:left;
     width: 40%;
}
.divider
{
    display: inline-block; width: 20%;
    height:50px;
    background-color:#fff000;    
    float:left;
}
.last
{
    height:50px;
    background-color:#00ffff;
    float:left;
     width: 40%;
}

Check the fiddle -> http://jsfiddle.net/A94xT/5/

Upvotes: 1

ajm
ajm

Reputation: 20105

If you want to use calc, you can use a (very complicated) calc expression for its width:

.divider
{
    width: calc(100% - 2 * (50% - 50px)); 
    height:50px;
    background-color:#fff000;    
    float:left;
}

width: auto has no effect because your div is empty; this is also why the width isn't "snapping" due to the div being floated.

Edit: Yeah...the plain 20px is probably the way to go. :)

Edit 2: Here is an updated Fiddle with the expression above in the stylesheet.

Upvotes: 1

Mathias
Mathias

Reputation: 5670

You can assign the divider width: 20px, based on you removing 10px from each side.

.divider {
    width: 20px;
}

DEMO

Upvotes: 0

Related Questions