CSS how to automatically resize div size?


Tags: css

Problem :

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



Solution :

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.


    CSS Howto..

    How to get cards with his content perfectly alligned

    How to make the content div scrollable without using javascript

    CSS: Double-Border, how to [duplicate]

    How can I get my hyperlink in HTML result in same page or window with or without using iframe tag or JavaScript?

    CSS Speech bubbles: How to update the tip position based on where the bubble is

    How can I make sure that the footer will always be on the bottom of the last page when printing out?

    How to create an HTML CSS Page with Header, Footer and Content

    How to add multiple style rules to css pseudo elements using js?

    How can I make a textfield highlight in red only after its input is proven as incorrect?

    How to define dynamic height in css (or html)?

    How to reload or rerender CSS for a single HTML element? [duplicate]

    How to properly set the 100% DIV height to match document/window height?

    How to change font color inside nav element?

    How to apply a CSS class to another element when an object is hovered?

    Show/hide rows based on class in HTML

    How to set the overall Grid thumbnail height to be equal?

    CSS: how can I make this table fit the border when resized?

    How to make tabs with pure HTML/CSS

    How would you design the css and html to divide up this rounded widget?

    How can you hide the title tag using CSS?

    Can't Figure Out How to Fix CSS Width

    css - how to fix first td in table on top if the second td has multiline?

    When using WebFont loader, how to hardcode the css?

    How to reverse font percentages

    How to override CSS to change of bootstrap

    How to show/hide delete button with CSS?

    How to integrate CSS