CSS how to automatically resize div size? - css

Question

Take a look on the JSFiddle. I don't know, how to display the numbers in one line and expand the div with the day 1 text ? Keep in mind that the numbers count can be different, so the div's width with the day 1 text must fit to the div's width which contains the numbers. Any ideas ?
HTML code:
<div class="day-cont left">
<div class="day-name center">day1</div>
<div class="less-n-cont">
<div class="number left center ">1</div>
<div class="number left center ">2</div>
<div class="number left center ">3</div>
<div class="number left center ">4</div>
<div class="number left center ">5</div>
<div class="number left center ">6</div>
<div class="number left center last-l-number">7</div>
<div class="clear"></div>
</div>
</div>
CSS code:
.day-cont {
width: 110px;
}
.left {
float: left;
}
.center {
text-align: center;
}
.day-name {
background: linear-gradient(to bottom, #FDFDFD 0%, #EAEAEA 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.less-n-cont {
width: 100%;
}
.day-name, .less-n-cont {
min-width: 200px;
}
.number {
background-color: #FFFFFF;
border-left: 1px solid #CCCCCC;
display: inline-block;
width: 40px;
}
.last-l-number {
border-right: 1px solid #CCCCCC;
}
.clear {
clear: both;
}
I want this as a result

Answer 1

To get your width as you require I would simply remove the width constraint on the outer container. This means that the container will expand to the total width of the objects it contains.
So from this:
.day-cont {
width: 110px;
}
To this:
.day-cont {
}
I have also fiddled with your code a little bit to improve it.
Instead of having to add a class to the last item, you can do the following:
.day-cont .number:last-child {
border-right: 1px solid #CCC;
}
Instead of having to add an extra </div> to clear things at the end you can extend the above method like so:
.day-cont .number:last-child:after {
content:" ";
display: block;
clear: both;
height: 0;
}
Fully updated fiddle here: http://jsfiddle.net/Tgyru/11/
Hope this helps.

Answer 2

You can use properties white-space and display:inline-block removing the float:
.day-cont {
display:inline-block;
width: auto;
}
.less-n-cont {
width: 100%;
white-space:nowrap;
}
The demo http://jsfiddle.net/Tgyru/8/

Answer 3

Just remove the below CSS from your code and try
.day-cont {
width: 110px;
}

Answer 4

You can remove your containers size, or set it to auto.
.day-cont {width: auto;}
either should work.

Answer 5

This approach might work for you:
.number {
background-color: #FFFFFF;
border-left: 1px solid #CCCCCC;
display: inline-block;
min-width: 32px;
padding-left: 3px;
padding-right: 4px;
}
To maintain the header "liquid", remove width: 110px; in .day-cont. Also I don't think you need min-width:200px in .day-name, .less-n-cont, as it will make the header bigger when you have less numbers.

Answer 6

try this:
<div>Day 1</div>
<div class="days">1</div>
<div class="days">2</div>
<div class="days">3</div>
<div class="days">4</div>
Now apply the CSS as
div {
min-width: 100%;
}
.days {
max-width: 18%; // just split them into pieces
display: inline; // show inline..
}
This way, the div with a class will be shown in a line and the other one will be left as it is.
And the width will be managed!
For you as mentioned by gvee: Remove the class day-count
http://jsfiddle.net/afzaal_ahmad_zeeshan/Tgyru/10/ Here is the code, I just removed the first class from the first div.