Нобелевскую премию человеку, который может понять, почему второе изображение выталкивается за пределы его обернутого.
Я думал, что то, что я сделал, было довольно просто:
<div class="outerdiv" id="headerbox">
<div id="uwlogo">
<img src="uwlogo.png" height="50px"\>
</div>
<div id="JaminWEB">
<h1>JaminWEB</h1>
</div>
<div id="rainer">
<img src="rainer.jpg" height="50px"\>
</div>
</div>
с соответствующим кодом таблицы стилей
#uwlogo
{
float: left;
}
#JaminWEB
{
float: center;
}
#rainer
{
float: right;
}
h1
{
color: #FFF;
font-weight: 400;
text-align: center;
margin: auto;
padding: auto;
}
Ссылка JFiddle, так как я знаю, кто-то запросит одно: http://jsfiddle.net/u7PJj/
Чтобы ответить, почему это происходит, есть ряд вещей:
Чтобы исправить это, я предлагаю использовать абсолютное позиционирование вместо плавающего. Таким образом, ваш div JaimenWEB может быть центрирован и иметь полную ширину, и логотипы будут размещены вокруг него.
#headerbox
{
width: 80%;
height: 50px;
position: relative;
}
#uwlogo
{
position: absolute;
left: 5px;
top: 5px;
}
#JaminWEB
{
text-align: center;
}
#rainer
{
position: absolute;
right: 5px;
top: 5px;
}
Я обновил вашу скрипку: http://jsfiddle.net/u7PJj/1/
Попробуй это
<div id="uwlogo">
<img src="uwlogo.png" height="50px" />
</div>
<div id="rainer">
<img src="rainer.jpg" height="50px" />
</div>
<div id="JaminWEB">
<h1>JaminWEB</h1>
</div>