4

I am hoping to achieve the following layout:

enter image description here

However, I cannot seem to get the text to align vertically properly.

I tried floating divs, but could not get it to work.

What is the simplest, most semantic way using the fewest elements of creating the above, not using tables?

4
  • 1
    Use table with rowspan and colspan
    – hjpotter92
    Jun 22, 2012 at 20:12
  • Hmm - I want to avoid that though. People tell me tables are evil for SEO, and should not be used for other markup Jun 22, 2012 at 20:15
  • @T-ShirtDude +1 for suggesting my code
    – ZnArK
    Jun 22, 2012 at 20:21
  • @jacktheripper tables are not evil for SEO. They're considered 'inelegant' if you're not using them for tabular data, but SEO has nothing to do there.
    – Rodolfo
    Jun 22, 2012 at 20:31

4 Answers 4

1

if you really want to use divs, do the following:

<div style="overflow:auto">
    <div style="float:left">left stuff</div>
    <div style="float:right">
        <div>right top stuff</div>
        <div>right bottom stuff</div>
    </div>
</div>

give widths/heights as appropriate if needed

4
  • But the whole question is centred around vertical alignment, and so this answer is irrelevant Jun 22, 2012 at 20:41
  • well, in that case you can add a 'display:table-cell' to the <div>s though I think that's only compatible IE8 and above, or just use a table and be done with it :)
    – Rodolfo
    Jun 22, 2012 at 20:43
  • How? That should be your answer then! Jun 22, 2012 at 20:49
  • @jacktheripper you can check here for other ways of vertically centering stuff student.oulu.fi/~laurirai/www/css/middle
    – Rodolfo
    Jun 22, 2012 at 20:49
0

I think it's align="center" on the element itself that you're looking for.

This works:

<table border="1px" width="100px" height="100px">
   <tbody>
          <tr>
             <td align="center" width="50px" rowspan="2">HI</td>
             <td align="center" style="vertical-align:center;" width="100"> test </td>
          </tr>
          <tr>
             <td align="center" style="align:center;vertical-align:center;" width="100"> test2 </td>
        </tr>
    </tbody>
</table>
1
  • 1
    Tables are not a good options with the recent updates in html5
    – Neji
    Jun 22, 2012 at 20:23
0

.wrapper { border: 1px solid red; overflow: hidden; width: 740px; }

.box { height:300px; width: 400px; border: 1px solid blue; position: relative; float: left; }

.box2 { width: 300px; height: 200px; position: relative;
border: 1px solid red; overflow: hidden; }

.inside { position: absolute; left: 93px; top: 21px; width: 135px; height: 84px; display: table;
}

.inside p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

html

<div class="box">wererewrwe
</div>

 <div class="box2">
    <div class="inside">
      <p>inside</p>
  </div>
<div>

0

The following solution works in all modern browsers and IE8+. If you need compatibility with IE6 and IE7 then I suggest using tables.

<div class="block">
    <div class="left">Left</div>
    <div class="right" style="background: red"><p>Text</p></div>
    <div class="right" style="background: blue"><p>Text</p></div>
</div>

and

div.block { width: 640px; height: 480px; border: solid 2px black; padding: 4px; }
div.left { float: left; width: 320px; height: 480px; background: green; }
div.right { float: right; width: 320px; height: 240px; display: table;}
div.right p { display: table-cell; vertical-align: middle; text-align: center; }

You can see this example on jsfiddle.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.