Arquivo Discussoes de Programacao e Tecnologia Estou tentando deixar a seguinte estrutura ocupando toda a largura do browser (width: 100%):
<div id="menu">
<div id="logo"></div>
<div id="nome-marca"></div>
</div>
Deixei a #logo e #nome-marca com width de 100px e deixei o #menu com width de 100%.
Deixei um padding-left de 50px no #menu, mas ao fazer isso as Div’s ficam quebradas.
Se eu estivesse usando px ao invés de % era só compensar no width esses 50px mas como é % eu não sei como compensar.
Como faço isso?
Veja se você consegue tirar algumas idéias com esse exemplo:
<html>
<head>
<style>
html, body {
height: 100%;
}
body {
display: table;
margin: 0 auto;
}
.container {
height: 100%;
display: table-cell;
vertical-align: middle;
}
.cent {
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="cent">
MEU CONTEUDO CENTRALIZADO!
</div>
</div>
</body>
</html>
Abs
Não era pra ficar quebrado. Qual o conteúdo de logo e nome-marca? Você injeta elemento dinâmico ali?
Quando isso acontece, provavelmente alguma coisa dentro das divs, ou a imagem do logo ou qualquer outra coisa está ocupando mais que o 100% do menu em pixels.