user1532208
user1532208

Reputation: 305

How to implement this in pure CSS?

I have 13 div elements and need it to look like this:

table-like layout

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

Answers (2)

Ranjit Singh
Ranjit Singh

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">&nbsp;</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 :

enter image description here

**Update : **

check this updated fiddle

screenshot : enter image description here

Upvotes: 1

Jirka Kopřiva
Jirka Kopřiva

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

Related Questions