Page 1 of 1

[SOLVED] CSS beginner problem-- middle column overflows

Posted: Fri Nov 30, 2007 4:24 pm
by Josh1billion
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


I'm new to CSS, so this is probably something simple to many of you.

I have three columns, left is navigation bar, middle is main text, right is another navigation bar.

Here are the style definitions:

[syntax="css"]
#leftcolumn { 
color : #333;
background : #fff;
margin : 0 0 0 0;
padding : 10px;
min-height : 850px;
width : 200px;
float : left;
}

#middlecolumn { 
float : center;
color : #333;
background : #fff;
margin : 0 0 0 0;
padding : 0;
min-height : 870px;
width : 100%;
display : inline;
} 

#rightcolumn { 
color : #333;
background : #fff;
margin : 0 0 0 0;
padding : 10px;
min-height : 850px;
width : 200px;
float : right;
}
And they are all nested inside a wrapper:

Code: Select all

#wrapper { 
margin : 5px auto 5px auto;
width : 80%;
overflow: visible;
background:#FFFFFF none repeat scroll 0%;
display:block;
overflow:visible;
position:relative;
} 
The problem can be seen in this screenshot:
http://img132.imageshack.us/img132/9954 ... lembb9.png

The middle column overflows into the left column when the left column ends, rather than staying within its boundaries.

Is it something wrong in the stylesheet? How can I fix this?


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Fri Nov 30, 2007 4:58 pm
by matthijs
You have to give the middle col a left and right margin of at least 200px. I would do 210px or something. And leave out the width and float.

Code: Select all

		* { margin:0;padding:0;}
		#wrapper {
		color : #333;
		margin : 5px auto 5px auto;
		width : 80%;
		background:#ddd;
		position:relative;
		}
		#leftcolumn {

		background : #eee;
		margin : 0; /* is shorter */
		/* padding : 10px; */
		min-height : 850px;
		width : 200px;
		float : left;
		}

		#middlecolumn {
		/* float : center;
		width : 100%;
		display : inline; */
		color : #333;
		background : #fff;
		margin : 0 210px; /* margins */
		padding : 0;
		min-height : 870px;

		}

		#rightcolumn {
		color : #333;
		background : #eee;
		margin : 0;
		/* padding : 10px; set this on some inner element, saves some box-model trouble */
		min-height : 850px;
		width : 200px;
		float : right;
		}




Code: Select all

<body>

	<div id="wrapper">
		<div id="leftcolumn">
			<h2>Some title</h2>
			<p>Lorum ipsum</p>
		</div>
		<div id="rightcolumn">
			<h3>Sidebar</h3>
			<p>Lorum ipsum.</p>
		</div>
		
		<div id="middlecolumn">
			<h3>Content</h3>
			<p>Lorum ipsum.</p>
		</div>

	</div>

</body>
</html>
I also changed the source order in the HTML. If you want another order, you have to work with negative margins.

Posted: Fri Nov 30, 2007 5:54 pm
by Josh1billion
Thanks, this will help a lot. :)

I tried integrating your code with mine to get it to work but the problem persisted, so I created a new file from scratch and copied-and-pasted your example and it worked perfectly, so I must just be integrating it wrong.. I'll try again when I get back home later tonight. :)

Edit: Got it working! Thanks again! :)