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 do I get rid of this little green box on my HTML/CSS page [closed]

    With Watin, how do I wait until an element gets a certain CSS class?

    How to convert 1 column records of dynamic table into hyperlink

    IcoMoon App icon fonts are shown as 

    How to make a multi step header

    How to hide a nested table?

    How to center an image in an img tag using CSS background position

    How do I align 2 divs (each has its own padding) next to each other?

    How to get div so it always reaches the bottom?

    How to visually indicate current page in ASP.NET MVC?

    How to export only the used css from a site?

    How to use a divider in a navigation with list elements?

    So I have an HTML file with a paragraph and I need to break into three lines BUT i can only modify the CSS. How do I pull this off? (code below)

    Chrome DevTools Converts All HEX Colors to RGB: how to stop?

    How to control the layout in JSF?

    Angularjs - bind value from directive to ng-show/hide anywhere in document

    how to remove elements in document fragment after append

    How can I change CSS Class of a textbox on failed Validation and then again change it back on successful validation?

    How does one target IE7 and IE8 with valid CSS?

    float css only menu - how to modify on section2

    How to move CSS classes to the right html elements

    How to activate a CSS property according to a variation in PHP code or URL direction?

    How do I make a class/div behave like it were floating?

    How to indicate that an LI with a link was pressed.

    How can I apply a custom css rule to small helping arrows that appears on column reordering in Kendo UI grid

    How to display a div over other content and in the center of webpage using CSS?

    sidebar is under the openlayers map how to set css

    How to merge CSS classes?

    How to toggle overlay with no body scroll using the same button / div

    How to make navigation follow when scrolled down? [duplicate]