Hej, mam problem z wyśrodkowaniem dwóch divów, które mają zajmować 96% szerokości strony. (Nie mam problemu ze zrobieniem tego w momencie gdy zajmują one 100% szerokości np. 70%+30%)
Pierwszy div ma szerokość 67.2%, a drugi 28.8%. Nie działa "margin: auto;", "margin- left/right;" również nie działa w żadnej konfiguracji.
Jedyne co wymyśliłem i działa to wsadzenie tych dwóch divów do osobnego diva o szerokości 96% i wtedy nadanie im pożądanych wartości szerokości i użycie "margin: auto;" w nowopowstałym divie. Jednak chciałbym tego uniknąc, gdyż mam wrażenie, że niepotrzebnie robi to zamieszanie w strukturze strony, później byłoby trudno się w tym połapać.
PS. Nie patrzcie na kolory divów i tło strony i ogólny wygląd, to na razie faza testów :D
HTML:
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<title>Systemy</title>
<meta name="description" content="Opis zawartości strony dla wyszukiwarek">
<meta name="keywords" content="słowa, kluczowe, opisujące, zawartość">
<meta name="author" content="Jan Programista">
<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1> Title </h1>
</header>
<div id="tile1">
<img src="">
tile1
</div>
<div id="pojemniknateskurwysyny">
<div id="tile2">
<img src="">
tile2
</div>
<div id="tile3">
<img src="">
tile3
</div>
</div>
<div id="tile4">
<img src="">
tile4
</div>
<div id="tile5">
<img src="">
tile5
</div>
<div id="tile6">
<img src="">
tile6
</div>
</body>
</html>
CSS:
body
{
background-image: url("prism.png");
}
header
{
margin: 0 0 0 0;
width:100%;
height:50px;
margin-bottom: 20px;
text-align: center;
}
#tile1
{
background-color:#002868;
width:96%;
margin:auto;
height: 300px;
border-radius: 5px 5px 5px 5px;
}
#tile2
{
background-color: #045fef;
width: 67.2%;
height: 300px;
float: left;
border-radius: 5px 5px 5px 5px;
}
#tile3
{
background-color: #f20448;
width:28.8%;
height: 300px;
float:left;
border-radius: 5px 5px 5px 5px;
}
#tile4
{
background-color: #ef648c;
width:28.8%;
height: 300px;
clear:both;
float:left;
border-radius: 5px 5px 5px 5px;
}
#tile5
{
background-color:#48379b;
width:67.2%;
height: 300px;
float:left;
border-radius: 5px 5px 5px 5px;
}
#tile6
{
background-color:#59e0c3;
width:96%;
height: 300px;
clear:both;
border-radius: 5px 5px 5px 5px;
margin:auto;
}