Tee G. Peng wrote:
Hi, I am doing a layout that requires equal height for each column and
row, however the contents inside of each column and row are different
and in some pages, in certain sections, the length of the content will
be decided by end users' data feed. Each column, each row has its own
background color (gradient image). I don't want to set 'height'
attribute; I maybe able to play with pixel perfect with precise
calculation to obtain equal height but when a user resize font size,
the integrity will be lost.
Here is a mockup screen shot, client got everything precisely line up:
http://project.lotusseedsdesign.com/ss.png
an untidy layout I just did
http://project.lotusseedsdesign.com/ss02.png
my markup is such:
<div class="left_col">First row, first column </div>
<div class="right_col">First row, second column </div>
<div class="left_col">second row, first column </div>
<div class="right_col">second row, second column </div>
I was thinking if I insert a wrapper for each row so it looks like so
<div class="wrapper">
<div class="left_col">First row, first column </div>
<div class="right_col">First row, second column </div>
</div>
<div class="wrapper">
<div class="left_col">second row, first column </div>
<div class="right_col">second row, second column </div>
</div>
However with different background colors that are controlled by
gradient images, it seems pointless to do so.
Your suggestion deeply appreciated!
Thanks!
tee
Hi Tee,
If those blocks always contain similar output you could float your
blocks left to stack them up and set the height in ems. Seems to me the
easiest way to do a layout like that.
e.g.
<div id="container">
<div class="left" id="bookmarks"></div>
<div class="right" id="people"></div>
<div class="left" id="sites"></div>
<div class="right" id="tags"></div>
</div>
and then CSS like:
#container { width: 830px; } /* to leave a 30px gap in the middle e.g.
|400px| 30px |400px| */
.left, .right { height: 60em; width: 400px; margin-bottom: 30px; } /*
whatever your dimensions need to be */
.left { float: left; clear: left; }
.right { float: right; clear: right; }
That way your blocks have equal height and width, will stack as per the
image and you have a nice semantic unique id on each to apply styles
with. Might need some tweaking for cross-browser goodness but in a fixed
width layout that code should be safe to work from.
Hope that gives you some ideas.
Rob O
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
