Home/ Questions/Q 91851
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T23:05:41+00:00

I have an ASP.NET site that I’m developing. The layout is pretty basic. The

  • 0

I have an ASP.NET site that I’m developing. The layout is pretty basic. The master page has a header with a horizontal menu beneath the banner taking the entire width. On the left is a Navigation pane, 150 pixels wide with a picture and a few external links. The remainder of the width is the ContentPlaceholder. Beneath that is the footer.

In the default page, the master page’s content has a few divs. One for ‘News’, one for ‘FAQs’, one for ‘deadlines’ and another for a ‘Chart of the Day’. Each of these is 450 pixels wide and I’d set them up with the appropriate ‘float: left;’ and ‘float: right;’ so that the left ‘column’ of content was the News, then FAQ under it and the right column was the deadlines and chart. If the user narrowed the browser too much, the deadlines and chart would get pushed under the News and FAQs.

Now I’m directed to change the behavior. Now, if the user narrows the browser, the deadlines and chart should ‘hold their ground’ and remain as a second column with the user having to use the horizontal scroll bar to see them properly.

I thought that using ‘min-width: 950px;’ on the overall content div would do that, but the ‘float: right’ on the content div ends up pushing the whole content section under the navigation pane when I narrow the browser and when I narrow it further, the Deadlines and Chart divs are STILL getting pushed under the News and FAQs.

I know I’m missing something simple – like a property to ‘stay to the right regardless’ – and anchor or something. Googling around for examples isn’t helping much because I don’t think I’m putting the right words into searching.

Thanks in advance for any advice.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. 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>
    • 0