I have some HTML which looks like this:
<body>
<div id="panel1" class="panel"> Panel 1 </div>
<div id="panel2" class="panel"> Panel 2 </div>
<div id="panel3" class="panel"> Panel 3 </div>
<div id="panel4" class="panel"> Panel 4 </div>
<div id="panel5" class="panel"> Panel 5 </div>
<div id="panel6" class="panel"> Panel 6 </div>
<div id="panel7" class="panel"> Panel 7 </div>
<div id="contentheader"> Header </div>
<div id="content"> Content </div>
</body>
What I would like is for some of the panels (let's say 1-4) to be floated on the left, the others (5-7) to be floated on the right and the header and content in between, ideally without having to wrap the left and right panels in a wrapper div.
-
Use an easy to use CSS framework like Blueprint CSS, The Golden Grid or 960. They have excellent cross-platform support for developing grid based websites like the one you are working on. You won't have to worry about the nitty gritties at all.
-
How about wrapping the #contentHeader and #content in a div and floating it like one of your panels? You'd have to put it amongst them... (div1, 2, 3, 4, content, 5, 6, 7).
Depends on what you know about the widths of the panels and content, I'd say.
-
If you know the width of your panels (left, right, header and contents) and the height of the header, you can give the header and the content a { position: absolute; } and position it between the panels.
If you don´t know the width of the content, you'll probably run into some IE problems though...
(just guessing, I haven´t tried it)
-
The answer depends entirely on if you want that middle column to be fixed-width or fluid.
If fixed width, your life is going to be much easier, and you can use one of several popular CSS grid systems: blueprint, yui, 960, etc.
If fluid, you should use the 3-column techniques outlined at alistapart.com.
Skilldrick : Or the fluid 960 grid: http://www.designinfluences.com/fluid960gs/
0 comments:
Post a Comment