Ребенок divs, выходящий за пределы родительских divs

Итак, Ive огляделся и попробовал советы по прошлым сообщениям, связанным с этой проблемой, но не нашел одного, с которым я должен работать, будь то, что я сделал это неправильно или что он действительно не работает. Мой код: https://jsfiddle.net/k0hqzcwg/Ребенок divs, выходящий за пределы родительских divs

Я не понимаю, почему кнопка сообщения перемещается за пределы родительского div. Я попытался очистить поплавки, добавив clear: both и добавив класс clearfix, но не получив никаких результатов. Благодарю вас.

Таким образом, я пытаюсь запустить конкурирующую службу обмена видео с помощью Youtube, мои огромные навыки в CSS и Html обязательно пройдут и дадут мне это. Sarcasm

Любые советы приветствуются, я знаю, что мне есть чему поучиться.

Для тех, кто не хочет, чтобы нажать на ссылку:

Html:

<body> 

<div id="headingbarholder"> 
<div id="headingbar"> 
<div id="heading-submit-avatarholder"> 
<div id="headingmessagebutton"> 
<span id="messagebuttoncontent" style = text-align: middle;>Message</span> 
</div> 
<div id="headingavatar"> 
<img id="heading-avatar" src="Removed Link" width = 45px; height = 45px;></img> 
</div> 
</div> 
<img id="logo" src="Remove Link" width = 45px; height = 45px; display = inline-block;></img> 
</div> 
</div> 

</body>

Css:

body { 
    color: White 
    font-size: 11px; 
    font-family: arial,sans-serif; 
    line-height: 15px; 
    background-color: #F1F1F1; 
    margin: 0 -8px 0 -8px; 
} 


#headingbarholder{ 
    position:fixed; 
    left:0; 
    width: 100%; 
} 

#headingbar{ 
    position: relative; 
    background-color: #fff; 
    padding:7px 30px 8px 30px; 
    border-bottom: 1px solid #E8E8E8; 
} 


#heading-submit-avatarholder{ 
    float: right; 
    right: 0px; 
    width: 160px; 
} 

#headingmessagebutton { 
    background-color: #F8F8F8; 
    color: #333; 
    font-weight: bold; 
    font-size: 11px; 
    height: 28px; 
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05); 
    border: 1px solid #D3D3D3; 
    border-radius: 2px; 
    display:inline-block; 
    padding: 0px 13px; 
    box-sizing: border-box; 
    line-height:normal; 
} 

#headingavatar{ 
    width: 45px; 
    height: 45px; 
    display:inline-block; 
}

источник

2015-03-27 Tyler Adams

Поплавка левой кнопки.

Здесь:

#headingmessagebutton { 
    background-color: #F8F8F8; 
    color: #333; 
    font-weight: bold; 
    font-size: 11px; 
    float: left; 
    height: 28px; 
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05); 
    border: 1px solid #D3D3D3; 
    border-radius: 2px; 
    display: inline-block; 
    padding: 0px 13px; 
    box-sizing: border-box; 
    line-height: normal; 
}

источник

2015-03-27 18:41:17

собирался выкладываю>> – sbatson5

Как бы я тогда центрирования DIV в середине родительского дел. и текст внутри, кажется, не прослушивает вертикальное выравнивание: middle и text-align: center –

В div, который говорит «сообщение» в верхнем баннере? –

Я хотел бы использовать button вместо и всплывают его: Fiddle

источник

2015-03-27 18:42:23 sqe

Ребенок divs, выходящий за пределы родительских divs

ответ

Смежные вопросы