ansaurus

Question

How to arrange 2-columns of divs in a ContentPlaceholder that STAY 2-columns?

Answer 1

A:

As heretical as it sounds, by far the simplest way is to throw out the divs and use a table structure.

Below is a complete example. Just save it as an html file and preview in a browser. BTW, you might play with different doctypes to see how they affect the output.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
<style>
.box { width:250px;float:left;border: solid 1px green;}
.outer{width:600px;}
</style>    
</head>

<body>
<div class="outer">
<div class="box" style="height: 200px">Hello World!</div>
<div class="box" style="height: 300px">Hello World!</div>
<div class="box" style="height: 100px">Hello World! asd asdfasfd asdjasd hyasydufuasydf auysdfaysdfuaysdfu yasdufy ausdyf aiusdyf aiusydfuasdfasdf asf</div>
<div class="box" style="height: 50px">Hello World!</div>
</div>
</html>

Chris Lively 2008-12-23 14:53:22

Heh. Yeah, I thought of that but each div of content is variable when it comes to height - the FAQ section even uses an Accordion. Was hoping there was a stylesheet tag I've overlooked as I'm relatively new at this.

David 2008-12-23 14:58:08

Answer 2

A:

Unless I'm misunderstanding, you want the page to simply be constant no matter what happens with the browser height/width. If this is the case, you can simply use absolute position and set an absolute top and left pixel setting in your css. So your News css would be something like

position: absolute;
top: 0px;
left: 0px;
...

Then your Deadlines would be:

position: absolute;
top: 0px;
left: 450px;
...

And so on. You may have to use relative as position or set up a top offset based on your header and a left offset based on your links div (which you already said is 150), but if you want your page to stay constant, that's your best bet. Let me know if you have any issues with this.

AdamB 2008-12-23 15:11:00

Answer 3

A:

This works for me, in FF3 and IE6.

 <html>
 <head>
     <title></title>
 <style>
 .content_section{width:450px;border: solid 1px green;}
 .nav{width:150px; border: solid 1px yellow; float: left;}
 .content_container{width: 950px; border: solid 1px blue; float: left;}

 </style>    
 </head>

 <body>
 <div style="width: 1104px;">
  <div class="nav">
    Navigation here<br />Navigation here<br />Navigation here<br />Navigation here<br />Navigation here<br />Navigation here<br />Navigation here<br />Navigation here<br />
  </div>
  <div class="content_container">
   <div style="float: left;">
    <div id="news" class="content_section">news<br />news<br />news<br />news<br />news<br />news<br />news<br />news<br /></div><br />
    <div id="faq" class="content_section">faq<br />faq<br />faq<br />faq<br />faq<br />faq<br />faq<br />faq<br />faq<br /></div>
   </div>
   <div style="float: right;">
    <div id="deadlines" class="content_section">deadlines<br /></div><br />
    <div id="chart" class="content_section">chart<br />chart<br />chart<br />chart<br />chart<br />chart<br />chart<br />chart<br />chart<br /></div>
   </div>
  </div>
 </div>
 </html>

Matt Dawdy 2008-12-23 15:52:27

Having a wrapper DIV with a fixed length ended up working best for this particular situation. As usual, the requirements changed while I was testing solutions..

David 2009-01-07 19:37:03

Answer 4

A:

When you get tired of managing this all yourself, you should check out a decent CSS grid system.

Here are two:

These systems make it trivial to do the sort of thing you're talking about.

Triptych 2008-12-23 16:42:34

Answer 5

A:

The simplest answer is to wrap everything in a container and give the container a width so that it never shrinks. Example

<div id="container">
  <div id="header"></div>
  <div id="nav"></div>
  <div id="leftContent"></div>
  <div id="rightContent"></div>
  <div id="footer"></div>
</div>

This allows the left and right content to be any height at all.

Bruno43 2008-12-24 13:53:26

That turned out to be the easiest solution. My boss asked that the site act like others and that we could 'optimize' for 1024x768. The 'wrapper' style was given a width of 1024 with margin-right:auto; and margin-left:auto; added to center all of the divs.

David 2008-12-24 16:07:19

For IE 6 you might want to style your body with body{text-align:center;} then align your text left again in the wrapper #wrapper{text-align:left;} This will center the div for IE 6, otherwise it doesn't recognize the margin left and right auto.

Bruno43 2008-12-24 16:44:03

ansaurus

tags:

views:

answers:

How to arrange 2-columns of divs in a ContentPlaceholder that STAY 2-columns?

related questions