Mellemrum imellem cells i display:table;
Hej EksperterJeg har et layout som grundlæggende ser således ud
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body {
margin:0px;
padding:0px;
background:#125C49;
}
#pageContainer{
display:table;
width:60%;
height:500px;
margin-left: auto;
margin-right: auto;
background:#dddddd;
padding-left:15px;
padding-right:15px;
}
.pageContainerCell{
display:table-cell;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
.cell1{
background:#123456;
}
.cell2{
background:#654321;
}
.cell3{
background:#666666;
}
</style>
</head>
<body>
<div id="pageContainer">
<div class="pageContainerCell cell1">Cell1</div>
<div class="pageContainerCell cell2">Cell2</div>
<div class="pageContainerCell cell3">Cell3</div>
</div>
</body>
</html>
Jeg har to spørgsmål. 1. Er det korrekt at bruge display:table på den måde. Grunden til at jeg gør det er fordi jeg gerne vil styre breden af hver cell uafhængig af indholdet hvilket jeg ikke umiddelbart kan hvis jeg bruger display:block; Jeg vil helst heller ikke floate elementerne. 2. Hvordan får jeg mest elegant et mellemrum imellem elementerne?
