Reputation: 305
I have 13 div elements and need it to look like this:
I am restricted from using a table, even though this looks like a job for a table (long story, job requirements, just take it as it is)
I can not add or remove any html elements -- the only modifications that I can make to the elements adding attribute tags such as class name.
Here is what I have so far (sorry for any formatting errors)
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
width: 100%;
margin: 0px;
text-align:center;
vertical-align:middle;
}
body div {
background-color: gray;
height: 24%;
width: 24%;
display: inline-block;
text-align: center;
vertical-align: middle;
margin: 1px;
}
body div:first-child + div + div + div + div + div {
background-color: gray;
height: 48%;
width: 48%;
display: inline-block;
text-align: center;
vertical-align: middle;
margin: 1px;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
</body>
</html>
Upvotes: 0
Views: 136
Reputation: 3735
Using float property you can achieve this.
Html
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div class="w-50">6</div>
<div>7</div>
<div>8</div>
<div class="w-50"> </div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
Css
div
{
display: inline-block;
width: 25%;
text-align:center;
float:left;
}
div.w-50
{
width:50%;
}
Check the fiddle here
Screenshot :
**Update : **
check this updated fiddle
screenshot :
Upvotes: 1
Reputation: 3089
div { float: left; width: 25%; height: 100%; }
div.double { width: 50% }
div.triple { width: 75% }
div.center { text-align: center; }
6th div has class="double"
8th div has class="triple"
inline-block prioperty add small margin if there are spaces or newlines between elements. Must be overtaken with negative left margin what is a little bit unpredicable in manners across browsers.
One more solution if the sixth has to be over two rows:
css
div { float: left; width: 25%; height: 1em; }
div.double { width: 50% }
div.triple { width: 75% }
div.center { text-align: center; }
div#six { position: absolute; height: 2em; left: 25%; top: 2em; }
html
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="triple">5</div>
<div id="six" class="double center">6</div>
<div>7</div>
<div class="triple">8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
Borders and margins:
div {
float: left;
width: 24%;
height: 2em;
margin: 0.1em;
border: 0.1em solid #000;
}
div.double { width: 47.8% }
div.triple { margin-right: 48.8% }
div.center { text-align: center; }
div#six {
position: absolute;
height: 4.4em;
left: 24.6%;
top: 2.8em;
line-height: 400%;
border: 1px solid #185;
color: #185;
}
http://codepen.io/anon/pen/xLHwy
Upvotes: 1