How to display two divs side by side inside a parent div?

[damir]

I have a situation as drawn above.

- Container contains undefined number of boxes.
- #container expands to entire browser width and can contain undefined number of divs
- .shifts expands to #container width
- .day-info has fixed width

The problem is that I don't know how to make that .shifts alway sticks left to the .day-info. If nested divs inside the .shifts have smaller width than .shifts everything is fine. If they have bigger then .shifts fall below the .day-info

#content
{
   margin: 40px;
   width: auto;
}
.shifts
{
   float: left;
   padding: 10px;
   width: auto;
}

.day-info
{
   background: #EEE;
   border-right: 1px solid #D9D9D9;
   float: left;
   overflow: hidden;
   width: 80px;
}

[Bryan Cheung]

If you have a online example I could help you much quicker.

Because .shift has a auto width, the width expands if the div in it because wider than it should.

If you have a online example I could check it faster with Firebug myself but now I just have to guess. Also, it would go faster if you provide all the code including the HTML, seeing you have a .content but not in the picture and in the picture you have a #container but not in the CSS.

Bryan.

[damir]

Sorry, i's my bad. I tried to simplify the structure and I mixed the container and content divs.

I managed to do it with some jquery, which is quite simple, but can't do it using pure css.

Visit http://beta.zamjene.com/ which is a jquery version what I want to achieve, and http://beta.zamjene.com/noscript.php without jquery. (Try resizing the browser window)

The site is in Croatian, but entire coding is done in English.

Thanks in advance!

P.S. it's done using HTML5 and it isn't (yet) optimised for IE.

[AutumnsDecay]

Try using percentages.

#container
     {
        width:100%
        margin:40px;
     }

.shifts
     {
        width:85%;
        float:right;
     }

.days-info
     {
       width:5%;
       float:left;
     }

This will give you a 10% separation between the two divs, which probably enough, though you can expand it if needed.

If the page is centered, make sure that #container doesn't have a float value set.

<body>
    <center>
        <div id="container">
            <div class="days-info">
                Today is Saturday!
            </div>
            <div class="shifts">
                You work today and tomorrow!
            </div>
        </div>
    </center>
</body>

Using the CSS and that code, it should work.

[damir]

Thanks guys, but I managed to do it.
What I did is that I've put position relative to .box, position absolute and height 100% to .day-info and the left margin to .shifts by the size of .day-info and that's it.
Cheers!