0

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>
Community
  • 1
  • 1
user1532208
  • 305
  • 1
  • 4
  • 13
  • What about using table? – Jirka Kopřiva Aug 07 '14 at 20:32
  • @JirkaKopřiva No!! Tables are bad!! /s He may have to, but it's definitely doable with CSS 3 – General_Twyckenham Aug 07 '14 at 20:33
  • Long story, but I'm refactoring a web project and trying to remove waaaaaaaaaay too many table elements. I can get rid of all of them except for this particular problem. – user1532208 Aug 07 '14 at 20:34
  • 1
    If a table layout would work, then use the `table` and `table-*` values of [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) on non-`table` markup elements. [It works with IE8 too.](http://caniuse.com/css-table) – ajp15243 Aug 07 '14 at 20:34
  • 1
    @General_Twyckenham bad is simulation of table grid with a ton of code only to think that it is a modern solution. There are bad ways of using tables, but there is no reason to be tables bad. – Jirka Kopřiva Aug 07 '14 at 20:40
  • I have it working with a table element, but must move to to divs and CSS if at all possible. This is part of a web application, so I'm a bit more limited than just writing a simple table and calling it a day :-) – user1532208 Aug 07 '14 at 20:41
  • 1
    @JirkaKopřiva Tables are not bad - if what you want is actually a table. If you're just using the table for a grid layout, that IS bad. http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – General_Twyckenham Aug 07 '14 at 20:44
  • 1
    @user1532208 That's precisely what my suggestion is: using `display: table;`, `display: table-cell`, etc. on elements like `
    ` will give you what you want by simulating a table layout in CSS (which is a *display* concern, so should live in the CSS), while keeping non-table and semantically correct markup (which is a *content* concern, and is satisfied by not having tables in markup).
     – ajp15243 Aug 07 '14 at 20:45
  • 1
    http://stackoverflow.com/questions/2403990/html-colspan-in-css might be relevant – JayC Aug 07 '14 at 20:48
  • 1
    I agree with the accepted answer in that question. @user1532208 If you're using this to display a matrix of data, then a table is not only helpful, but probably semantically correct. Just make sure you have thought about your content and what makes semantic sense for the markup, since you haven't included any details about your content in your question. – ajp15243 Aug 07 '14 at 20:56
  • I added an image of what it needs to look like. @ajp15243 It looks like table cells can't be sized properly so that may be out :-( – user1532208 Aug 07 '14 at 22:07
  • @user1532208 Ah, that makes it a little more clear. I haven't played around with `display:table` enough to see if it can do different cell sizing like that. – ajp15243 Aug 08 '14 at 04:20

2 Answers2

1
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

Jirka Kopřiva
  • 2,939
  • 25
  • 28
  • This *almost* does what I need except that I can not have the wrapper "row" divs. I must keep the sibling div elements as is, but I can apply classes and/or attribute tags. – user1532208 Aug 07 '14 at 20:51
1

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

Ranjit Singh
  • 3,715
  • 1
  • 21
  • 35