为什么浮动不起作用？

Question

I have the problem, that the "1"-Form isn't and don't have the width of 100% next to the "Tickets".

Here is a picture what I mean (The "1" should be the "orange" but it doesn't work) :

and here is the link how it looks like.

html:

<section id="main_content">
            <div class="left inner">            
            <div class="grid_5 left tickets">
                    <div class="header">
                        <i class="icon-pushpin"></i>
                        Neue Tickets
                        <div class="count right"><span>6</span></div>
                    </div>
                    <div class="messages">
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                        <div class="msg">
                            <div class="dreieck prio_a"></div>
                            <div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
                            <div class="autor">Lars</div>
                            <small class="subject">Test</small>
                        </div>
                    </div>
                </div>
                <div class="grid_100 preview">1</div>
            </div>
            <article class="cal right">
                <div class="calender"><?php include('lib/actions/get/calender.php'); ?></div>
            </article>
        </section>

custom.css

.container_100 { width:100%; min-width:600px; }
.grid_13 { width:13%; min-width:250px; }
.grid_100 { width:100%; }

styles.css

body { background:#eaedf1; }

a { color:#fff; text-decoration:none; }

.right { float:right !important; }
.left { float:left !important; }

.hide { display:none !important; }
.show { display:block !important; }

.sep_10 { height:10px; }
.sep_15 { height:15px; }
.sep_20 { height:20px; }
.sep_30 { height:30px; }
.sep_40 { height:40px; }
.sep_50 { height:50px; }
.sep_76 { height:1px; width:76px; float:left; }

#content { width:100%; margin:0; }

nav.tnav { height:51px; width:100%; background:#EB5A47; }
nav .tickets, nav .team, nav .support { margin:10px; height:30px; color:#972216; border:1px solid #972216; width:150px; border-radius:5px; float:left; }
nav div { margin:5px; }

aside { color:#95A1A9; background:#33393D; }
aside a { color:#95A1A9; padding:5px 0; }
aside .nav { padding:5px; height:100%; }
aside .nav ul li { font-size:15px; padding:5px; font-weight:bold; }

.cal { float:left; }
.calender .header { height:51px !important; color:#972216; background:#EB5A47 !important; font-size:24px; line-height:50px !important; vertical-align:middle ; text-align:center; }
.calender table { width:100%; color:#972216; }
.calender i { color:#972216; }
.calender table thead tr th { padding:5px; }
.calender table thead { padding:5px; background:#EB5A47; }
.calender table tbody { padding:5px; background:#EB5A47; }
.calender table tbody tr td { padding:5px; }
.calender table tbody tr td.before { color:#ccc !important; }
.calender table tbody tr td.today { font-weight:bold; }

section .inner { background:#fff; }
article.cal { margin:0 !important; }

.circle img { margin:0; background:transparent; z-index:100; width:35px; height:35px; border-radius:40px; }

#main_content { color:#95A1A9; }
#main_content .grid_5 { margin:0px !important; }
#main_content .header { height:27px; background:#33393D; padding:5px; line-height:28px; vertical-align:center; position:relative; z-index:200; cursor:pointer; }
#main_content i.icon-pushpin { transform:rotate(90deg); }
#main_content .count { width:25px; height:25px; border-radius:50px; background:#EB5A47; color:#972216; position:relative; top:1px; }
#main_content .count span { position:relative; left:4px; bottom:2px; }
#main_content .messages { position:relative; z-index:200; background:#fff; border:1px soild #ccc; cursor:pointer; }
#main_content .messages .msg { color:#33393D !important; border:1px solid #CBCFD6; padding:5px; }
#main_content .messages .msg .autor { color:#33393D !important; }

Answer 1

The Containing div have class="left inner" but it's width is not 100%. When you set width to 100% it spreads to the containing div's width.

Set the containing div with the desirable width, and it should work.