Witam, mam problem z wyśrodkowaniem div-a.
Jak widać poniżej moje menu składa się z czterech innych div-ów. Problem leży w tym, że jak mam wypełnione div-a pierwszego oraz czwartego to wyśrodkować idzie bez problemu, ale jeżeli usunę całą treść z pierwszego i czwartego div-a to automatycznie drugi i trzeci "przyklejają się" do lewej strony. Chcę uzyskać taki efekt, aby div pierwszy i czwarty nie był widoczny, a drugi i trzeci ma być wyśrodkowany w poziomie. Pomoże ktoś?
CSS:
body
{
background-image: url(123.jpg)
}
#container
{
width: 100%;
margin-left: auto;
margin-right: auto;
}
#menu
{
width: 100%;
color: #ffffff;
margin-top: 30px;
font-size: 25px;
padding: 7px 20px 5px;
word-spacing: 35pt;
font-family: serif-web-pro, Georgia, serif;
text-shadow: 0 1px 0 #999;
}
#menuN1
{
float: left;
width: 30%;
background-color: blue;
}
#menuB2
{
float: left;
width: 20%;
border-top: 1px solid #D8D8D8;
border-bottom: 1px solid #D8D8D8;
padding-left: 50px;
text-align: left;
}
#menuB3
{
float: left;
width: 20%;
border-top: 1px solid #D8D8D8;
border-bottom: 1px solid #D8D8D8;
padding-right: 50px;
text-align: right;
}
#menuN4
{
float: left;
width: 24%;
margin: 0 auto;
background-color: orange;
}
HTML:
<body>
<div id="container">
<div id="menu">
<div id="menuN1">1</div>
<div id="menuB2">ABOUT SKILLS</div>
<div id="menuB3">PROJECTS CONTACT</div>
<div id="menuN4">4</div>
<div style="clear:both;"></div>
</div>
</div>
Pozdrawiam.