How can I arrange 2-column divs in ContentPlaceholder to STAY 2-columns?
I have an ASP.NET site that I am developing. The layout is pretty simple. The home page has a header with a horizontal menu below the banner that uses the full width. On the left is a 150 pixel wide navigation bar with an image and several xrefs. The rest of the width is ContentPlaceholder. Below is the footer.
On the default page, the content of the master page has multiple sections. One for "News", one for "Frequently Asked Questions", one for "Timelines" and another for "Diagram of the Day". They are each 450px wide and I would set them with the appropriate "float: left;" and "float: right;" so the left "column" of content was "News", then "FAQ" below it, and the right column was deadlines and timelines. If the user narrows the browser down too much, the timeline and chart will be pushed under the news and FAQ.
Now I need to change the behavior. Now, if the user narrows down the browser, the deadlines and chart should "hold their place" and remain as the second column when the user has to use the horizontal scroll bar to see them correctly.
I thought using "min-width: 950px;" on the general content div will do it, but the "float: right" on the content div ends up clicking the entire content section below the nav bar when I narrow down the browser, and when I narrow it down further, the Deadlines and Chart divisions - STILL are pushed under the news and FAQ questions.
I know that I am missing something simple - like the "stay in any position" property - and an anchor or something like that. Google doesn't help much for finding examples because I don't think I am inserting the correct words into the search.
Thanks in advance for any advice.
source to share
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>
source to share
As heretical as it sounds, the simplest way is to throw out the div and use the table structure.
Below is a complete example. Just save it as html file and preview it in browser. By the way, you can play with different doctrines to see how they affect the outcome.
<!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>
source to share
If I don't understand, you want the page to be just constant no matter what happens to the browser height / width. If so, you can just use absolute position and set absolute top and left pixel settings in your css. So, your css news will be something like
position: absolute;
top: 0px;
left: 0px;
...
Then your timing is:
position: absolute;
top: 0px;
left: 450px;
...
Etc. You may need to use relative position, or adjust the top offset based on your title and left offset based on your div links (which you already said is 150), but if you want your page to stay constant then your best bet. Let me know do you have any problem with this.
source to share
The simplest answer is to wrap everything in a container and give the container a width so 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 of any height at all.
source to share