[SOLVED] CSS beginner problem-- middle column overflows

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Josh1billion
Forum Contributor
Posts: 316
Joined: Tue Sep 11, 2007 3:25 pm

[SOLVED] CSS beginner problem-- middle column overflows

Post 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]
Last edited by Josh1billion on Fri Nov 30, 2007 9:05 pm, edited 1 time in total.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
Josh1billion
Forum Contributor
Posts: 316
Joined: Tue Sep 11, 2007 3:25 pm

Post 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! :)
Post Reply