Site layout breaking when window resized

[wbodger]

So, I understand I have some issues with my CSS on this site (

http://www.spu.edu//depts/facman/new/).

The big one that is bugging me is if I resize the screen the main content pops down below the navigation on the left. I've tried switching the width from auto to 100%, removing the position:relative from that div and no change. Any thoughts?

 

[BillyRayPreachersSon]

If you want to give your content a minimum width, use 'min-width' instead of 'width'.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[wbodger]

Using that on ID="Main" (where the sidebar and content exist as nested DIVs) still doesn't keep the content DIV from wrapping when you make the window smaller. Perhaps I misunderstand where to use the min-width. In this code:

	<div id="container">
		<!-- #include virtual="/depts/plant/includes/plant_header.html" -->
			<div id="content">
				<div id="copy">
				<img src="/depts/facman/images/header2.jpg" width="650" height="150">
				<p><br>
				<h2>Building Maintenance</h2>

there is

<div id="main" class="clearfix">

inside of the include plant_header.html I put the min-width on that ID (locally) and it made no difference. If the basic structure is:

<div align="center">
	<div id="container">
		<div id="header" class="clearfix">
			<div class="search">
			</div>
		</div> <!-- End of the header div -->
		<div id="greybar">
			<div id="weather">
				<div id="scrollbar">
				</div>
			</div>
		</div>

		<div id="main" class="clearfix">
			<!-- Here is the sidebar -->
			<div id="sidebar">

			</div> <!-- End of the sidebar div -->
			<div id="content">
				<div id="copy">

Where Main encompasses the body of the page, is this the element that I put the min-width on if I don't want a later element (content or copy) to get wrapped?

Thansk again for your help as I try to get this figured out!

Willie

 

[Vragabond]

Since all elements inside your #main are actually restricted in width, it would be smart to restrict #main as well. It should simply be as wide as the content inside it. I noticed that's about 840px (and you could also remove the unnecessary 75px padding on the right side). Then, to reinstate the colour, I would suggest to put white background on #container. This seems to have fixed all the problems on your site and ended up looking the same as before.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]