Расположить блок слева по ширине родительского блока

[verfaa]

Есть код:

<div id="mail_yes">
    <div id="m_ic">
       <i class="demo-icon" style="font-size: 30px;"></i>
    </div>
Астрономам удалось определить ближайший из известных пролетов звезды мимо нашей Солнечной системы:...
</div>

css:

#mail_yes {
            border: 5px solid #f0a43d;
            border-radius:25px;
            -moz-border-radius:25px;
            -webkit-border-radius:25px
        }

        #m_ic {
            background-color: #f0a43d;
            border-radius:15px 15px 0 0;
            -moz-border-radius:15px 15px 0 0;
            -webkit-border-radius:15px 15px 0 0;
        }

Сейчас он выглядит следующим образом:

Мне необходимо сделать, чтобы оранжевый блок m_ic с иконкой письма прижимался к левой стороне родительского блока mail_yes и занимал 100% высоты этого блока. Подскажите как это сделать пожалуйста, лучше всего максимально кроссбраузерно, я в верстке не силен.

 

[zALEHANz]

Не совсем понятно ТЗ, вам конвертик сдвинуть влево? А насчет 100% высоты блока родителя, это как? Вы хотите повесить на него ссылку, что бы по клику в любом месте mail_yes реагировала?
Или имелось ввиду вот так Для просмотра ссылки Войди или Зарегистрируйся

 

[guru31337]

Через display:flex думаю будет проще всего. Если правильно понял задание, то вот готовое решение: Для просмотра ссылки Войди или Зарегистрируйся

 

[EuRo1985]

Через display:flex думаю будет проще всего. Если правильно понял задание, то вот готовое решение: Для просмотра ссылки Войди или Зарегистрируйся

Через flex совсем некроссбраузерно получается.

 

[guru31337]

Через flex совсем некроссбраузерно получается.

Да, есть такое... тогда вот еще проще. Просто делаем широкий левый бордер и отрицательный маржин и всё...) Для просмотра ссылки Войди или Зарегистрируйся

 

[EuRo1985]

Это ближе к правде

 

[perfectartyshock]

Навскидку как-то так Для просмотра ссылки Войди или Зарегистрируйся . Но я добавил <p> к тексту. Любой текст на сайте должен быть завернут в параграф. Как реализовать чтобы иконка занимал 100% блока автоматически нужно подумать

 

[guru31337]

Навскидку как-то так Для просмотра ссылки Войди или Зарегистрируйся . Но я добавил <p> к тексту. Любой текст на сайте должен быть завернут в параграф. Как реализовать чтобы иконка занимал 100% блока автоматически нужно подумать

Вы тут задаете фиксированную высотку блока и если у нас будет несколько больше теста, то получаются страшные вещи - Для просмотра ссылки Войди или Зарегистрируйся

 

[perfectartyshock]

Вы тут задаете фиксированную высотку блока и если у нас будет несколько больше теста, то получаются страшные вещи - Для просмотра ссылки Войди или Зарегистрируйся

Ага, выдал решение по быстрому, чтобы показать возможность центрирования элемента по высоте. но спасибо что указали. большинство способов завязаны именно при указании высоты блока( Но эта задачка показалась мне интересной и я еще думаю над ответом)

 

[guru31337]

Как насчёт этого Для просмотра ссылки Войди или Зарегистрируйся ? На мой взгляд очень универсально, я уже давал эту ссылку чуть выше.