CODEWITHSUNDEEP
css
Tony
Tony

Reputation: 12695

CSS how to automatically resize div size?

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

enter image description here

Upvotes: 1

Views: 203

Answers (6)

gvee
gvee

Reputation: 17161

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.

Upvotes: 1

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

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.

Upvotes: 1

ArturBalestro
ArturBalestro

Reputation: 134

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.

Upvotes: 1

Thomas Cheney
Thomas Cheney

Reputation: 388

You can remove your containers size, or set it to auto.

.day-cont {width: auto;}

either should work.

Upvotes: 1

Prasanth K C
Prasanth K C

Reputation: 7332

Just remove the below CSS from your code and try

.day-cont {
    width: 110px;
}

Upvotes: 1

DaniP
DaniP

Reputation: 38252

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/

Upvotes: 1

Related Questions