Правильный размер div без использования значений пикселей

Question

Мое дело в следующем. У меня есть div с двумя детьми divs. Я бы хотел, чтобы «event» div был 300px ширины и высоты. Первое требование состоит в том, чтобы сохранить размер div «event», когда элементы «content» и «bar» используют 100% ширины родительского элемента. Во-вторых, на данный момент границы элемента «контент» не видны. Можно ли встраивать все внутри без использования жестко заданных значений и правильно отображать этот дисплей в большинстве современных браузеров (FF, Chrome, Opera, IE7 +)?

Это то, что я хотел бы достичь (обратите внимание на левую красную полосу, которая принимает высоту 100% и не конфликтует с серой рамкой вокруг элемента события):

И это это то, что у меня есть. Html:

<div id="wrapper"> 
    <div id="scheduler"> 
     <div class="event" style="top: 30px; height: 300px; width: 300px"> 
      <div class="bar"></div> 
      <div class="content"> 
       <div class="inner-content">Some text</div> 
      </div> 
     </div> 
    </div> 
</div> 

, CSS:

#wrapper { 
    width: 600px; 
    height: 600px; 
} 
#scheduler { 
    background-color: #E1FFFE; 
    display: block; 
    height: 100%; 
    width: 100%; 
    padding: 0 10px; 
    position: relative; 
} 
#scheduler .event { 
    display: block; 
    float: left; 
    position: relative; 
    width:100%; 
    overflow:hidden; 
} 
#scheduler .event .bar { 
    background-color: red; 
    display: inline; 
    float: left; 
    height: 100%; 
    position: relative; 
    width: 5px; 
} 
#scheduler .event .content { 
    background-color: white; 
    border: 1px solid #CCCCCC; 
    border-left: none; 
    display: inline; 
    float: left; 
    height: 100%; 
    position: absolute; 
    width: 100%; 
} 

и работоспособной демо:

http://jsfiddle.net/6nTvD/1/

Answer 1

Я не думаю, что я полностью понимаю ваше затруднительное положение, однако, с той лишь разницей, что я могу шпионить между вашим желаемым результатом, а ваша текущая работа - наличие границ - переключение overflow:hidden; на #scheduler .event на overflow:visible; производит что-то, что визуально смотрит на меня так, как будто оно достигает желаемого эффекта.

Answer 2

Попробуйте это. Вынуть bar DIV, а затем изменить .content CSS для:

#scheduler .event .content { 
    background-color: white; 
    border: 1px solid #CCCCCC; 
    border-left: 5px solid red; // replaces the bar 
    display: inline; 
    float: left; 
    height: 99%; // a bit of a hack to fit the border in 
    position: relative; 
    width: 98%; // hack 
} 

http://jsfiddle.net/Dp3yz/

EDIT: Код с .bar еще на месте:

#scheduler .event .bar { 
    background-color: red; 
    display: inline; 
    float: left; 
    height: 99.9%; /* Small offset at bottom */ 
    position: relative; 
    width: 5px; 
} 
#scheduler .event .content { 
    background-color: white; 

    /* revised border */ 
    border-top: 1px solid #CCCCCC; 
    border-right: 1px solid #CCCCCC; 
    border-bottom: 1px solid #CCCCCC; 

    display: inline; 
    float: left; 
    height: 99%; 
    position: absolute; 
    width: 98%; 
} 

Новая версия: http://jsfiddle.net/JJrC9/1/