Два divs бок-о-бок-один в центре, другой справа

Я создаю веб-сайт на Weebly (я чувствую, что это будет неодобрительно, но у меня не так много времени для этого) , Я хочу, чтобы логотип организации находился в центре, с социальными кнопками в правом верхнем углу с краем 5 пикселей вверху и внизу. В HTML, у меня есть это:Два divs бок-о-бок-один в центре, другой справа

<div id="header"> 
    <div id="social">{social}</div> 
    <div id="sitename">{logo}</div> 
</div>

Вот как заголовок и SITENAME идентификаторы определяются

#header { 
    text-align: center; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    width: 100%; 
} 

#sitename a, 
#sitename a:link, 
#sitename a:visited { 
    color: #484848; 
    font-family: 'Raleway', sans-serif; 
    font-size: 36px; 
    text-transform: uppercase; 
    background: url('teal_icons.png') -9999px -9999px no-repeat; 
    margin: auto; 
} 

#social { 
    float: right; 
}

Я попробовал следующее предложение here, но это не помогло.

Любая помощь будет оценена по достоинству.

источник

2014-11-24 MiKenning

Попробуйте использовать этот

#social { 
    float: left; 
    width: 200px; /*Your width here*/ 
} 

#sitename { 
    margin-left: 200px; /*Your width here*/ 
    margin-top: 5px; 
    margin-bottom: 5px; 
} 

#header { 
    overflow: hidden; /*If not do this margin top will not work*/ 
}

источник

2014-11-24 13:10:29

Почему это работает? – MiKenning

float left говорит, что элемент должен быть сдвинут влево и в другую сторону. http://www.w3schools.com/css/css_float.asp –

@ agu-f поймал хороший момент, ясность нужна, потому что другие элементы после заголовка могут обернуть социальный тоже, если sitename недостаточно ширины –

Это может помочь.

CSS:

#header { 
    text-align: center; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    width: 100%; 
} 
#sitename { 
    color: #484848; 
    font-family:'Raleway', sans-serif; 
    font-size: 36px; 
    text-transform: uppercase; 
    margin: auto; 
    text-align:center; 
} 
#social { 
    float: right; 
    text-align-right; 
} 
.clear { clear:both }

HTML:

<div id="header"> 
    <div id="social">[FB] [TW] [IN] [..]</div> 
    <div id="sitename">LOGO OF <br/> YOUR COMPANY</div> 
    <div class="clear"></div> 
</div>

источник

2014-11-24 13:17:24

CSS

#header { 
    text-align: center; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    width: 100%; 
} 

#sitename a, 
#sitename a:link, 
#sitename a:visited { 
    color: #484848; 
    font-family: 'Raleway', sans-serif; 
    font-size: 36px; 
    text-transform: uppercase; 
    background: url('teal_icons.png') -9999px -9999px no-repeat; 
    margin: auto; 
} 

#sitename:before { 
    content:""; 
    display:block; 
    clear:both; 
} 

#social { 
    float:right; 
    margin:5px 0; 
}

Codepen example

источник

2014-11-24 13:24:13 Roughtron

Два divs бок-о-бок-один в центре, другой справа

ответ

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