CSS Сокращение

Hy, у меня проблема с панелью css, и я немного помог, мой код работает хорошо, но если пользователь имеет размер браузера, размер панели находится под текстом здесь. то, что я имею в виду:CSS Сокращение

Вот как это выглядит в обычном размере браузера:

enter image description here

Вот как это выглядит, если пользователь имеет браузер с уменьшенным размером:

enter image description here

Это будет хорошо, по крайней мере текст, который будет перекрыт панели CSS, мое желание было, чтобы идти в новую строку, но это не работает ...

Hero является HTML:

<div class"center" 
    <div class="story"> 
<div class="full-story"> 
    <table width="100%" cellspacing="0" padding="0" border="0"> 
    <tbody><tr> 
    <td> 
     </td> 
    </tr> 
    </tbody></table> 
    </div> 
    <div class="fullstory"> 
    <div class="imbd"><img src="{THEME}/dleimages/game.png"/></div><span class="imbdrate">[xfvalue_gamescore]</span> 
    <div class="fullstory-posterfull"> 
      <div>[full-link]<img src="{image-1}" alt="{title}" />[/full-link]</div> 
    </div> 
    <div class="pos"> 
    <div id="content" class="post_single" role="main"> 



          <div class="post_reviews theme_regular"> 
           <ul role="tablist" class="tabs theme_field"><li tabindex="0" class="ui-state-default ui-corner-top ui-tabs-active ui-state-active"><a href="http://[xfvalue_gsite]" class="theme_button">[xfvalue_author]</a></li><li aria-selected="false" aria-controls="reviews_users" tabindex="-1" role="tab"><a tabindex="-1" role="presentation" href="#reviews_users" class="theme_button ui-tabs-anchor">[xfvalue_release]</a></li></ul> 
      <div class="reviews_data"> 

       <div class="criteria_row theme_field"> 
        <input name="reviews_marks_author[]" value="4" type="hidden"> 
        <span class="criteria_label theme_strong">OS</span>[xfvalue_os] 
       </div> 

       <div class="criteria_row theme_field"> 
        <input name="reviews_marks_author[]" value="4" type="hidden"> 
        <span class="criteria_label theme_strong">Game size</span>[xfvalue_size] 
       </div> 

       <div class="criteria_row theme_field"> 
        <input name="reviews_marks_author[]" value="5" type="hidden"> 
        <span class="criteria_label theme_strong">Video Card</span>[xfvalue_vcard] 
       </div> 

       <div class="criteria_row theme_field"> 
        <input name="reviews_marks_author[]" value="4" type="hidden"> 
        <span class="criteria_label theme_strong">Genre(s)</span>[xfvalue_genre] 
       </div> 

       <div class="criteria_row theme_field"> 
        <input name="reviews_marks_author[]" value="5" type="hidden"> 
        <span class="criteria_label theme_strong">Mode(s)</span>[xfvalue_mode] 
       </div> 

      </div> 
      <div class="reviews_summary blog_reviews"> 
       <div class="criteria_summary_text criteria_row theme_field"><p class="sammorryp">[xfvalue_minisum] 
</div> 
       <div class="criteria_summary criteria_row theme_field"> 
        <span class="criteria_label theme_strong">[xfvalue_age]</span>= 
        <span class="stars_off"> 
       </span></span> 
        <span class="criteria_mark theme_accent_bg">[xfvalue_score]</span> 
       </div> 
      </div> 
     </div> 
     </div> 
<table class="tab"> 
    <tbody><tr> 
    <td><div class="fullstory-content"></div></td> 
    </tr> 
      <tr> 
      <div class="flo"> 
    <td><div class="fullstory-title"><span class="moviedesctit">Game description:</span></div></td> 
    </tr> 
      <tr> 
    <td><div class="movdiv"><span class="moviedesc">[xfvalue_gamedesc]</span></div> 
    </div> 
      </td> 
    </tr> 
    </div> 
    </tbody></table> 
    <br>

Вот CSS:

.fullstory {overflow:hidden;} 
.fullstory-title {color:#182131; font-size:14px; padding:0px 0 10px 10px; text-transform:uppercase;} 
.fullstory-posterfull {border-collapse: separate;border-spacing: 0px;float:left; overflow:hidden; max-height:600px; border:1px solid #ccc;} 
.fullstory-posterfull img {max-height:600px; max-width:600px; width:350px;z-index: 1;} 
.fullstory-posterfull-info {margin:15px 0 0 10px; line-height:22px; float: right;} 
.fullstory-info {float:left; margin:0 0 15px 25px; width:500px;} 
.fullstory-info h1 {padding:0 0 5px 9px; font-size:20px; color:#FD821F; letter-spacing:-0.04em; text-transform:uppercase; font-weight:normal;} 
.fullstory-info-fields {margin-bottom:5px;} 
.fullstory-info-fields > div {border-bottom:1px solid #ddd; color:#2C2C2C; font-weight:bold; padding:5px 6px 5px 11px; position:relative; width:315px;} 
.fullstory-info-fields > div > div {display:block; float:left; width:60px;} 
.fullstory-info-fields > div > span {display:inline-block; font-weight:normal; margin-left:20px; width:130px;} 
.fullstory-banner {width:20px; padding:10px; margin:5px 0 0 0; position:relative;} 
.fullstory-service {overflow:hidden; margin:15px 0 15px 0;} 
.imgstyle{border:1px solid #38576B;} 
.center { 
float:center; 
    margin-left: auto; 
    margin-right: auto; 
    width: 90%; 
    background-color: #b0e0e6; 
} 

.imbd{ 
display:block; 
position:absolute; 
top: 420px; 
left: 350px; 
overflow:hidden; 
z-index: 10; 
} 

.imbdrate{ 
font-size:large; 
font-weight:bold; 
text-indent:1px; 
color:#0067d9; 
display:block; 
position:absolute; 
top: 424px; 
left: 390px; 
overflow:hidden; 
z-index: 10; 
} 

.movdiv{ 
width: 500px; 
margin-bottom:-300px; 
} 

.moviedesc:first-letter{ 
       text-transform: uppercase; 
      } 
     .moviedesc { 
     position: relative; 
     top: -290px; 
     white-space: pre-wrap; 
     color: #424242; 
     font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif; 
    letter-spacing:0.1em; 
    text-align:center; 
    margin:50px auto; 
    text-transform: lowercase; 
    line-height: 135%; 
    font-size: 11pt; 
    font-variant: small-caps; 
     } 

     .moviedesctit:first-letter{ 
       text-transform: uppercase; 
      } 
     .moviedesctit { 
     position: relative; 
     top: -300px; 
     white-space: pre-wrap; 
     font-weight:bold; 
     color: #424242; 
     font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif; 
    letter-spacing:0.1em; 
    text-align:center; 
    margin:50px auto; 
    text-transform: lowercase; 
    line-height: 145%; 
    font-size: 12pt; 
    font-variant: small-caps; 
     } 



.sammorryp{ 
padding: 5px 0 5px 0; 
width:270px; 
line-height: 13px; 
text-indent: 13px; 
margin: 0; 
font-family: helvetica,sans-serif; 
color: #9C9C9C; 
font-size: 12px; 
font-weight: bold; 
font-style: italic; 
text-align: center; 
letter-spacing: 0.4pt; 
word-spacing: 0.2pt; 
line-height: 2.2; 
} 

/* Tabs */ 
.tabs, 
.widget ul.tabs { 
    position:relative; 
    margin:0; 
    padding:0; 
    list-style:none; 
} 
.tabs li, 
.widget .tabs li { 
    display:inline-block; 
    margin:0 1px 0 0; 
    padding:0; 
} 
.tabs li:before, 
.widget .tabs li:before { 
    display:none; 
} 
.tabs li a, 
.widget .tabs li a { 
    height:40px; 
    line-height:40px; 
    padding:0 10px; 
    display:inline-block; 
    text-align:center; 
    text-transform:uppercase; 
} 


/* Page navigation*/ 
#nav_pages, 
#nav_pages_parts { 
    overflow: hidden; 
    clear: both; 
    margin-top: 1px; 
    padding:30px 20px; 
} 
#nav_pages ul { 
    margin: 0; 
    overflow: hidden; 
} 
#nav_pages li { 
    margin-right: 5px; 
    list-style: none; 
    float: left; 
} 
#nav_pages li a, 
#nav_pages li span, 
.nav_pages_parts a, 
.nav_pages_parts > span, 
.nav_comments a, 
.nav_comments > span { 
    -webkit-transition: all ease .2s; 
    -moz-transition: all ease .2s; 
    -ms-transition: all ease .2s; 
    -o-transition: all ease .2s; 
    transition: all ease .2s; 
    text-decoration: none; 
    text-align:center; 
    display: inline-block; 
    width:36px; 
    height:36px; 
    line-height:36px; 
} 
.nav_pages_parts { 
    margin: 10px 0; 
} 
.nav_pages_parts > span.pages { 
    text-align:left; 
    width:auto; 
} 
#nav_pages .pager_pages span { 
    width:90px; 
    text-align:left; 
} 
#nav_pages .pager_first a, 
#nav_pages .pager_last a { 
    width:60px; 
} 
.nav_pages_parts.nav_pages_attachment { 
    text-align:center; 
    margin:1px 0 0 0; 
} 
.nav_pages_parts.nav_pages_attachment > span { 
    margin-right:1px; 
} 
.nav_pages_parts.nav_pages_attachment a,.nav_pages_parts.nav_pages_attachment > span { 
    vertical-align:top; 
    width:100px; 
} 


/* View more button */ 
#viewmore { 
    clear:both; 
    margin:0 auto; 
    padding-top:20px; 
    padding-bottom:20px; 
    width: 310px; 
    overflow:hidden; 
} 
#viewmore.pagination_infinite { 
    visibility:hidden; 
    padding:0; 
    height:0; 
    position:relative; 
} 
#viewmore_link { 
    display:block; 
    width:100%; 
    height:54px; 
    line-height:54px; 
    text-align:center; 
    text-transform:uppercase; 
} 
#viewmore_link span { 
    display:inline-block; 
} 
#viewmore_link .viewmore_loading {   display:none; margin-right:10px; } 
#viewmore_link .viewmore_loading:before { font-size: 16px; } 
#viewmore_link.loading .viewmore_loading { display:inline-block; } 
#viewmore_link.loading .viewmore_text_1 { display:none; } 
#viewmore_link .viewmore_text_2 {   display:none; } 
#viewmore_link.loading .viewmore_text_2 { display:inline-block; } 

#content article.viewmore { 
    animation: zoomin .5s; 
} 


/* Tabs */ 
.theme_regular .ui-tabs-active .theme_button { 
border-collapse: separate; 
border-spacing: 0px; 
    background:#00bcff; 
    color:#ffffff; 
} 
.theme_regular .sc_tabs .content { 
    background: #fff; 
    border-color: #e0e0e0; 
} 

/* Team */ 
.theme_regular .sc_team .sc_team_item { 
    background: #f0f0f0; 
} 

/* Testimonials */ 
.theme_regular .sc_testimonials .sc_testimonials_position { 
    color:#aaaaaa; 
} 
.theme_regular .sc_testimonials.sc_testimonials_style_flat .sc_testimonials_content { 
    background:#f0f0f0; 
} 
.theme_regular .sc_testimonials.sc_testimonials_style_callout .sc_testimonials_content { 
    background:#9b9b9b; 
    color:#ffffff; 
} 
.theme_regular .sc_testimonials.sc_testimonials_style_callout .sc_testimonials_extra { 
    background: #565656; 
} 
.theme_regular .sc_testimonials.sc_testimonials_style_callout .sc_testimonials_extra .sc_testimonials_extra_inner { 
    border-color:transparent transparent #ffffff #ffffff; 
} 

/* Title */ 
.theme_regular .sc_title_bubble_top .sc_title_bubble_icon, 
.theme_regular .sc_title_bubble_left .sc_title_bubble_icon { 
    background-color:#00bcff; 
    color:#ffffff; 
} 
.theme_regular .sc_title_underline:after { 
    border-bottom-color:#00bcff; 
} 

/* Toggles */ 
.theme_regular .sc_toggles .sc_toggles_item .sc_toggles_title a span.sc_toggles_icon { 
    background: #666666; 
    color:#ffffff; 
} 
.theme_regular .sc_toggles .sc_toggles_item .sc_toggles_title.ui-state-active a span.sc_toggles_icon { 
    background: #00bcff; 
} 
.theme_regular .sc_toggles .sc_toggles_item .sc_toggles_title.ui-state-active a { 
    color:#00bcff; 
} 
.theme_regular .sc_toggles .sc_toggles_item .sc_toggles_title a:hover { 
    color:#bbbbbb; 
} 
.theme_regular .sc_toggles .sc_toggles_item .sc_toggles_title a:hover span.sc_toggles_icon { 
    background: #bbbbbb; 
    color:#666666; 
} 


/* Form fields 
---------------------------------------------------*/ 
.theme_regular #buddypress .button, 
.theme_regular #buddypress .generic-button a, 
.theme_regular #buddypress form input[type="button"], 
.theme_regular #buddypress form input[type="reset"], 
.theme_regular #buddypress form input[type="submit"], 
.theme_regular.bbpress #bbpress-forums form input[type="button"], 
.theme_regular.bbpress #bbpress-forums form input[type="submit"], 
.theme_regular.bbpress #bbpress-forums form input[type="reset"], 
.theme_regular button, 
.theme_regular html input[type="button"], 
.theme_regular input[type="reset"], 
.theme_regular input[type="submit"] { 
    border-color:transparent; 
    border-width:0; 
    background:#666666; 
    color:#ffffff; 
    -webkit-transition: all ease .2s; 
    -moz-transition: all ease .2s; 
    -ms-transition: all ease .2s; 
    -o-transition: all ease .2s; 
    transition: all ease .2s; 
    cursor: pointer; 
} 
.theme_regular #buddypress .button:hover, 
.theme_regular #buddypress .generic-button a:hover, 
.theme_regular #buddypress form input[type="button"]:hover, 
.theme_regular #buddypress form input[type="reset"]:hover, 
.theme_regular #buddypress form input[type="submit"]:hover, 
.theme_regular.bbpress #bbpress-forums form input[type="button"]:hover, 
.theme_regular.bbpress #bbpress-forums form input[type="submit"]:hover, 
.theme_regular.bbpress #bbpress-forums form input[type="reset"]:hover, 
.theme_regular button:hover, 
.theme_regular html input[type="button"]:hover, 
.theme_regular input[type="reset"]:hover, 
.theme_regular input[type="submit"]:hover { 
    background:#bbbbbb; 
    color:#ffffff; 
} 
.theme_regular #buddypress .button:focus, 
.theme_regular #buddypress .generic-button a:focus, 
.theme_regular #buddypress form input[type="button"]:focus, 
.theme_regular #buddypress form input[type="reset"]:focus, 
.theme_regular #buddypress form input[type="submit"]:focus, 
.theme_regular.bbpress #bbpress-forums form input[type="button"]:focus, 
.theme_regular.bbpress #bbpress-forums form input[type="submit"]:focus, 
.theme_regular.bbpress #bbpress-forums form input[type="reset"]:focus, 
.theme_regular button:focus, 
.theme_regular html input[type="button"]:focus, 
.theme_regular input[type="reset"]:focus, 
.theme_regular input[type="submit"]:focus, 
.theme_regular button:active, 
.theme_regular html input[type="button"]:active, 
.theme_regular input[type="reset"]:active, 
.theme_regular input[type="submit"]:active { 
    background:#bbbbbb; 
    color:#ffffff; 
} 
.theme_regular #buddypress form textarea, 
.theme_regular #buddypress form#whats-new-form textarea, 
.theme_regular #buddypress form select, 
.theme_regular #buddypress form input[type="file"], 
.theme_regular #buddypress form input[type="text"], 
.theme_regular #buddypress form input[type="search"], 
.theme_regular #buddypress form input[type="email"], 
.theme_regular #buddypress form input[type="number"], 
.theme_regular #buddypress form input[type="checkbox"], 
.theme_regular #buddypress form input[type="radio"], 
.theme_regular #buddypress form input[type="password"], 
.theme_regular .theme_field, 
.theme_regular blockquote, 
.theme_regular input[type="text"], 
.theme_regular input[type="number"], 
.theme_regular input[type="email"], 
.theme_regular input[type="password"], 
.theme_regular input[type="search"], 
.theme_regular select, 
.theme_regular textarea { 
    background: #dddddd; 
    border-width:0; 
    color: #666666; 
} 
.theme_regular #buddypress form textarea:focus, 
.theme_regular #buddypress form#whats-new-form textarea:focus, 
.theme_regular #buddypress form select:focus, 
.theme_regular #buddypress form input[type="file"]:focus, 
.theme_regular #buddypress form input[type="text"]:focus, 
.theme_regular #buddypress form input[type="search"]:focus, 
.theme_regular #buddypress form input[type="email"]:focus, 
.theme_regular #buddypress form input[type="number"]:focus, 
.theme_regular #buddypress form input[type="checkbox"]:focus, 
.theme_regular #buddypress form input[type="radio"]:focus, 
.theme_regular #buddypress form input[type="password"]:focus, 
.theme_regular .theme_field:focus, 
.theme_regular input[type="text"]:focus, 
.theme_regular input[type="number"]:focus, 
.theme_regular input[type="email"]:focus, 
.theme_regular input[type="password"]:focus, 
.theme_regular input[type="search"]:focus, 
.theme_regular select:focus, 
.theme_regular textarea:focus { 
    background: #cccccc; 
    color: #666666; 
} 

/* Color theme: 'Regular' */ 

/* Page Body background */ 
.theme_regular.theme_body, .theme_regular .theme_body { 
    background:#f0f0f0; 
} 

/* Article background */ 
.theme_regular.theme_article, .theme_regular .theme_article { 
    color:#666666; 
    background:#ffffff; 
} 

/* Text color */ 
.theme_regular p, .theme_regular td, .theme_regular th, .theme_regular input, .theme_regular textarea, .theme_regular div, 
.theme_regular .theme_text { 
    color:#666666; 
} 

/* Headers color */ 
.theme_regular h1, .theme_regular h2, .theme_regular h3, 
.theme_regular .theme_title, .theme_regular .theme_header { 
    color:#222222; 
} 

/* SubHeaders color */ 
.theme_regular h4, .theme_regular h5, .theme_regular h6, 
.theme_regular .theme_subtitle, .theme_regular .theme_subheader { 
    color:#222222; 
} 

/* Strong text */ 
.theme_regular .theme_strong { 
    color:#222222; 
} 

/* Info text - post date, author, comments etc. */ 
.theme_regular .theme_info { 
    color:#aaaaaa; 
} 

/* Links (as text) */ 
.theme_regular a, 
.theme_regular .theme_link { 
    color:#00bcff; 
} 

/* Links (as text) hover */ 
.theme_regular a:hover, 
.theme_regular .theme_link:hover { 
    color:#bbbbbb; 
} 

/* Links (as button) */ 
.theme_regular a.more-link, 
.theme_regular a.comment-reply-link, 
.theme_regular .theme_button { 
    background:#666666; 
    color:#ffffff; 
    -webkit-transition: all ease .2s; 
    -moz-transition: all ease .2s; 
    -ms-transition: all ease .2s; 
    -o-transition: all ease .2s; 
    transition: all ease .2s; 
} 

/* Links (as button) hover */ 
.theme_regular a.more-link:hover, 
.theme_regular a.comment-reply-link:hover, 
.theme_regular a.theme_button:hover, 
.theme_regular a.theme_accent_bg:hover, 
.theme_regular .theme_hover { 
    background:#bbbbbb; 
    color:#ffffff; 
} 

/* Border color */ 
.theme_regular fieldset, 
.theme_regular .theme_border { 
    border-color:#e0e0e0 !important; 
} 

/* Accent color */ 
.theme_regular .theme_accent_bg { 
    background:#00a0db; 
    color:#ffffff; 
} 
.theme_regular .theme_accent { 
    color:#00a0db; 
} 
.theme_regular .theme_accent_border { 
    border-color:#00a0db; 
} 

/* Reviews area */ 
.post_reviews { 
border-collapse: separate; 
border-spacing: 0px; 
    width: 310px; 
    float:right; 
    position:relative; 
    margin:24px -16px 10px 20px; 
    overflow:hidden; 
    font-size:14px; 
    z-index:1; 
} 
.post_reviews .tabs { 
    padding:15px 15px 0 15px; 
} 
.post_reviews #reviews_users { 
    display:none; 
} 

.post_reviews .criteria_row { 
    overflow: hidden; 
    margin-bottom:1px; 
    padding:12px 0 12px 12px; 
    position:relative; 
} 
    .criteria_row .criteria_label { 
     display:inline-block; 
     width:150px; 
     margin-right:10px; 
     overflow:hidden; 
    } 
    .reviews_100 .criteria_row .criteria_label { 
     width: 130px; 
     margin-right:6px; 
    } 
    .blog_reviews .criteria_row .criteria_stars { 
     display: inline-block; 
     width: 120px; 
     height: 28px; 
     overflow: hidden; 
    } 
    .reviews_10 .blog_reviews .criteria_row .criteria_stars { 
     width:124px; 
     height:20px; 
    } 
    .criteria_row .criteria_stars { 
     display:inline-block; 
     font-size:22px; 
     white-space:nowrap; 
     position:relative; 
     vertical-align:top; 
    } 
    .reviews_users .criteria_row .criteria_stars { 
     cursor:pointer; 
    } 
    .criteria_row .criteria_stars .theme_stars:before { 
     content:'\e801'; 
     font-family:Fontello; 
     -webkit-font-smoothing: antialiased; 
     display:inline-block; 
     margin-right:5px; 
    } 
    .reviews_10 .criteria_row .criteria_stars .theme_stars:before { 
     margin-right:0; 
     font-size:14px; 
     vertical-align:top; 
    } 
    .reviews_100 .criteria_row .criteria_stars { 
     min-height:0; 
     height:10px; 
     width:86px; 
     vertical-align:text-top; 
     line-height:10px; 
     font-size:10px; 
    } 
    .criteria_row .criteria_dragger { 
     display:block; 
     position:absolute; 
     left:0; 
     top:0; 
     bottom:0; 
     width:10px; 
     background-color:#69F; 
    } 
    #reviews_author .criteria_row .criteria_dragger { 
     display:none; 
    } 
    .criteria_row .criteria_bar { 
     display:inline-block; 
     width:80px; 
     height:4px; 
     margin-left:3px; 
     margin-top:-2px; 
     vertical-align:middle; 
     text-align: left; 
    } 
    .criteria_row .criteria_level { 
     display:inline-block; 
     height:4px; 
     width:0; 
     vertical-align:top; 
    } 
    .criteria_row .criteria_mark, 
    .reviews_summary .criteria_summary .criteria_word { 
     display:block; 
     position:absolute; 
     right:0; 
     top:0; 
     bottom:0; 
     width:50px; 
     text-align:center; 
     font-weight:bold; 
     font-size:18px; 
     padding-top:12px; 
     color:#ffffff; 
    } 
    .reviews_5 .criteria_row .criteria_mark, 
    .reviews_10 .criteria_row .criteria_mark { 
     display:none; 
    } 
    .reviews_100 .post_reviews .reviews_summary .criteria_summary > .theme_stars_on { 
     display:none; 
    } 



/* Reviews Summary */ 
.reviews_summary.blog_reviews { 
    overflow:hidden; 
    margin:5px 0 0 0; 
} 
#content.post_single .reviews_summary.blog_reviews { 
    margin:0px 0px 0 0; 
    float:center; 
} 
.reviews_10 .reviews_summary .criteria_label { 
    margin-right:6px; 
} 

.reviews_summary .criteria_summary { 
    position:relative; 
} 
.reviews_summary .criteria_summary_text.criteria_row { 
    height:auto; 
    font-size:12px; 
    line-height:16px; 
    padding-top:12px; 
    padding-bottom:12px; 
} 
.reviews_summary .criteria_label { 
    text-transform:uppercase; 
    display:inline-block; 
    height:28px; 
    line-height:32px; 
} 
.reviews_summary .criteria_stars { 
    top:4px; 
} 
.reviews_10 .reviews_summary .criteria_stars { 
    top:0; 
} 
.reviews_summary .criteria_stars .stars_on, 
.reviews_summary .criteria_stars .stars_off { 
    position:absolute; 
    display:block; 
    left:0; 
    top:0; 
    min-height:20px; 
    line-height:20px; 
    white-space:nowrap; 
    overflow:hidden; 
} 
.reviews_summary .criteria_stars .stars_on { 
    width:0; 
} 
.reviews_summary .criteria_stars .stars_off .theme_stars { /* Override color themes settings */ 
    color: rgba(128,128,128,0.8); 
} 
.reviews_summary .criteria_summary .criteria_mark, 
.reviews_summary .criteria_summary .criteria_word { 
    width:150px; 
    font-size:32px; 
    line-height:32px; 
} 
.reviews_5 .reviews_summary .criteria_summary .criteria_mark, 
.reviews_5 .reviews_summary .criteria_summary .criteria_word, 
.reviews_10 .reviews_summary .criteria_summary .criteria_mark, 
.reviews_10 .reviews_summary .criteria_summary .criteria_word { 
    display:block; 
    left:0; 
    right:auto; 
} 
.reviews_5 .reviews_summary .criteria_summary .criteria_word, 
.reviews_10 .reviews_summary .criteria_summary .criteria_word, 
.reviews_summary .criteria_summary .criteria_word { 
    display:none; 
} 
.reviews_author .reviews_summary .criteria_bar, 
.reviews_users .reviews_summary .criteria_bar { 
    display:none; 
} 
.reviews_summary .criteria_summary.show_word .criteria_word { 
    display:block; 
} 
.reviews_summary .reviews_users_accept { 
    display:none; 
    padding:8px 10px; 
    text-transform:uppercase; 
} 
.reviews_users .criteria_summary_text.show_button { 
    text-align:center; 
    padding:15px 0; 
} 
.reviews_users .criteria_summary_text.show_button .criteria_summary_descr { 
    display:none; 
} 
.reviews_users .criteria_summary_text.show_button .reviews_users_accept { 
    display:inline-block; 
} 


/* Tabs */ 
.tabs, 
.widget ul.tabs { 
    position:relative; 
    margin:0; 
    padding:0; 
    list-style:none; 
} 
.tabs li, 
.widget .tabs li { 
    display:inline-block; 
    margin:0 1px 0 0; 
    padding:0; 
} 
.tabs li:before, 
.widget .tabs li:before { 
    display:none; 
} 
.tabs li a, 
.widget .tabs li a { 
    height:40px; 
    line-height:40px; 
    padding:0 10px; 
    display:inline-block; 
    text-align:center; 
    text-transform:uppercase; 
}

источник

2015-05-29 Nicolaus

Посмотрите на использование ''% вместо 'px' для ширины содержимого в вашем css –

Также посмотрите на отзывчивый дизайн –

Я хорошо пробуюсь с% и отзывчивым дизайном. Я считаю, что это нормально, потому что у меня есть некоторые другие разделы, использующие аналогичный дизайн кода и отзывчивый ... – Nicolaus

вы можете структурировать CSS стиль так:

в основном создавая контейнер с содержимым может решить проблему таким образом, что ваше содержание зависит от размера и ширины контейнера с помощью%, так как ширина и высота ..

<html> 

<style> 
#container{ 
    border:solid blue; 
    width:500px; 
    height:500px; 
    min-height:300px; 
    min-width:300px; 
} 
#text_content{ 
    border:solid blue 1px; 
    width:30%; 
    float:left; 
    height:60%; 
    font-size:70%; 


} 
#side_nav{ 
    border:solid blue 1px; 
    width:40%; 
    height:90%; 
    float:left; 

} 
</style> 
<body> 
<div id="container" > 
<div id="text_content"> 
the quick brown fox jumps over the lazy dog near the riverbank 
the quick brown fox jumps over the lazy dog near the riverbank 
the quick brown fox jumps over the lazy dog near the riverbank 
the quick brown fox jumps over the lazy dog near the riverbank 
the quick brown fox jumps over the lazy dog near the riverbank 

</div> 
<div id="side_nav"></div> 
</div> 

</body> 
</html>

надеюсь, что это может помочь

источник

2015-05-29 02:53:16

Я не могу использовать inline css '

CSS Сокращение

ответ