css - Flowing box layout with different height -


I am using MVC 1.0 on one site (but will be upgraded soon to 2.0).
A top header on the site and several boxes (UL elements) that contain information included.
I want to use the full width of the browser to take advantage of widescreen monitors, so that the number of boxes in each row depends on the browser window width.
The problem is that there is no fixed height of the box, the height depends on the content in each box.
The height of each row should be determined by the largest box on that line

What is the best way to do this?
I hope my question gets a sensation, it is a bit difficult to understand =)

I'm not sure it is possible using CSS only. However you can use this javascript.

class = "box wrapper" & gt; & Lt; Div id = "box1" class = "a-box" & gt; & Lt ;! - content - & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "box-wrapper" & gt; & Lt; Div id = "box2" class = "a-box" & gt; & Lt ;! - content - & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "box-wrapper" & gt; & Lt; Div id = "box3" class = "a-box" & gt; & Lt ;! - content - & gt; & Lt; / Div & gt; & Lt; / Div & gt; After that, prepare the following document:

  var maxheight = $ (".a-box"). Eq (0) height (); $ (". A-box"). Each (function () (if (maxheight  

Comments

Popular posts from this blog

c# - How to capture HTTP packet with SharpPcap -

php - Multiple Select with Explode: only returns the word "Array" -

php - jQuery AJAX Post not working -