CODEWITHSUNDEEP
htmlcss
dizel3d
dizel3d

Reputation: 3669

How to mark up a tiled layout with CSS?

How to mark up the page without javascript? enter image description here

Both HTML elements (div1, div2) must to have fixed size.

Upvotes: 2

Views: 386

Answers (2)

Kijewski
Kijewski

Reputation: 26022

You have to work with the CSS attributes position, top, bottom, left, right and height. E.g.

<div style="position:absolute; left:0; right:0; top:0; bottom:0">
    <div style="position:absolute; left:0; right:0; top:0; height:42px; background:green">div1</div>
    <div style="position:absolute; left:0; right:0; bottom:0; top:42px; background:red">div2</div>
</div>

http://jsfiddle.net/GPHEx/1/

  • position:absolute lets you determine the layout in pixels and percent (roughly speaking).
  • left:0; right:0 make it full-width.
  • top:0 aligns a div to the upper edge.
  • bottom:0 aligns a div to the lower edge.
  • height:42px and top:42px define the tiled layout.

Vertical example:

<div style="position:absolute; left:0; right:0; top:0; bottom:0">
    <div style="position:absolute; top:0; bottom:0; left:0; width:42px; background:green">d i v 1</div>
    <div style="position:absolute; top:0; bottom:0; right:0; left:42px; background:red">d i v 2</div>
</div>

Example with four tiles:

<div style="position:absolute; left:0; right:0; top:0; bottom:0">
    <div style="position:absolute; top:0; height:80px; left:0; width:42px; background:green">d i v 1</div>
    <div style="position:absolute; top:0; height:80px; right:0; left:42px; background:red">d i v 2</div>
    <div style="position:absolute; top:80px; bottom:0; left:0; width:42px; background:red">d i v 3</div>
    <div style="position:absolute; top:80px; bottom:0; right:0; left:42px; background:green">d i v 4</div>
</div>

Notice how top+height resp. left+width work together. You could have more tiles as well by adding the previous height to the next top.

With overflow you can define what should happen if there is too much content. overflow:auto adds a scrollbar to the div if needed. overflow:hidden would crop it.

Upvotes: 3

g13n
g13n

Reputation: 3246

While I have not tried a layout like the one you have mentioned, you can try the technique mentioned here (negative margins.)

http://www.alistapart.com/articles/negativemargins

Upvotes: 0

Related Questions