CSS Placement Problem

lorddonk · Apr 16, 2008

EDIT: GOT IT FIXED
Okay, I don't really know any other "communities" where I can post this, so I hope somebody here knows enough to help :smile:

Here is my fancy little homepage that's had me banging my head for 3 days. Its my first real "fully made on my own not an edit or template" website layout.

Anyway, I finally got it to work right in IE: http://lorddonk.zxq.net/

but now, I'm shocked to find that it doesn't work in Firefox!! :shock: Firefox! The one that actually obeys web standards!

Well, for some reason in Firefox, the main content thing gets pushed under the sidebar, even though it works correctly in IE, and it is floated right... Here's a screen shot of what I mean:

http://i7.photobucket.com/albums/y288/L ... titled.gif[/img]

Here's my CSS:

Code:

html {
	margin:0;
	padding:0;
	background:#000000;
	color:#000000;
	font-family: helvetica, arial, sans-serif;
}

body {
	min-width:750px;
	margin:0;
	padding:0;
	background:#363636;
	color:#000;
}

#wrap {
	background:#363636;
	margin: 0 auto;
	width:100%;
}

#header {
	background:#ddd url("../images/mid.gif") repeat-x;
	height: 141px;
	color: #FFFFFF;
}

#header h1 {
    padding:5px;
    margin:0;
}


#nav {
	background: #f4f4f4 url("../images/nav.gif") repeat-x;
	padding:5px;
}

#nav ul{
	margin:0;
	padding:0;
	list-style:none;
}

#nav li{
	display:inline;
	margin:0;
	padding:0;
}

#topcontent {
	background: #363636 url("../images/contenttop.gif") top left repeat-x;
	padding: 0px;
	margin-top: 0px;
	margin-left: 4px;
}

#main {
	background:#FFFFFF url("../images/cornerdown.gif") repeat-y;
	float: right;
}

#main h2, #main h3, #main p {
	margin-left: 50px;
	margin-top: 5px;
}

#sidebar {
	background:#363636;
	float:left;
	width:130px;
}

#sidebar ul {
	margin-bottom:0;
}

#sidebar h3, #sidebar p {
	padding:0 10px 0 0;
}

#footer {
	background:#000000;
	clear:both;
}

#footer p {
	padding:5px;
	margin:0;
	color: #FFFFFF;
    }

And here's my page's code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sz Productions Global</title>
<LINK rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="wrap">
	<div id="header"><img src="images/logo.gif">HOME ABOUT ALSO SZ</div>
	<div id="nav">
		<ul>
			<li><a href="#">Option 1</a>

			<li><a href="#">Option 2</a>

			<li><a href="#">Option 3</a>


			<li><a href="#">Option 4</a>

			<li><a href="#">Option 5</a>

		</ul>
	</div>
	<div id="sidebar">
		<h3>Column 2</h3>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
		<ul>
			<li><a href="#">Link 1</a>

			<li><a href="#">Link 2</a>


			<li><a href="#">Link 3</a>

			<li><a href="#">Link 4</a>

			<li><a href="#">Link 5</a>

			<li><a href="#">Link 6</a>

			<li><a href="#">Link 7</a>

			<li><a href="#">Link 8</a>


			<li><a href="#">Link 9</a>

			<li><a href="#">Link 10</a>

			<li><a href="#">Link 11</a>

			<li><a href="#">Link 12</a>

			<li><a href="#">Link 13</a>

			<li><a href="#">Link 14</a>


			<li><a href="#">Link 15</a>

		</ul>
	</div>
	<div id="main">
	<div id="topcontent"><img src="images/topcorner.gif"></div>
		<h2>Column 1</h2>
		<p><a href="/">456 Berea Street Home</a> | <a href="/lab/developing_with_web_standards/csslayout/2-col/">Simple 2 column CSS layout</a> | <a href="http://www.456bereastreet.com/lab/developing_with_web_standards/">Developing with web standards index</a></p>

		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
		<p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.</p>
		<p>Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam.</p>
		<h3>Consectetuer adipiscing elit</h3>
		<p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
		<p>Maecenas eu velit nec magna venenatis consequat. In neque. Vivamus pellentesque, lacus eu aliquet semper, lorem metus rhoncus metus, a ornare orci ante a diam. Nunc sem nisl, aliquet quis, elementum nec, imperdiet in, wisi. Proin in lorem. Etiam molestie diam eget ante. Morbi quis tortor id lacus mollis venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vel orci sit amet tellus mollis eleifend. Donec urna diam, viverra eget, ultricies gravida, ultrices eu, erat. Proin vel arcu. Sed diam. Cras hendrerit arcu sed augue. Sed justo felis, luctus a, accumsan in, tincidunt facilisis, libero. Phasellus eu eros.</p>

	</div>
	<div id="footer">
		<p>Footer</p>
	</div>
</div>
</body>
</html>

I'm still fairly new to this, and I'm hoping someone could please explain how to fix this? I know the CSS is kind of messy, I haven't gone through it yet to delete the extra stuff I put in there trying to resolve this.

Any help would be greatly appreciated!!

EDIT: GOT IT FIXED

Ceroscuro · Apr 17, 2008

P.S. It's not fixed

e · Apr 18, 2008

You need to float both the sidebar and the main div, and set them as display inline.

Then just put a spanner after both, set it's clear property to both and display as block; the span can be left empty. It's just to make sure the content scroll to its appropriate height.

___ · Apr 21, 2008

Yeah try what Etheon said. Your essential problem here is that the combined size of your sidebar and content elements is greater than the width of their containing element, and since at least one is floating that means they get stacked on top of eachother instead of set side by side.

If it's working in IE and not in Firefox the reason is that the way IE and Firefox handle padding and borders is different. Padding and outlines add to the total width of an element when its width is fixed according to CSS standards; IE will often choose to create padding inside the element, which does not increase the element's total size.

Etheon's solution should work because an inline element should overflow out of its containing element when floating rather than wrapping like a block element IIRC, in any case try it, or try shrinking the width of your sidebar and/or content till they float in properly.

Hopefully that will help you avoid this problem in the future, too, I do this all the time and that always is the cause.

lorddonk · Apr 23, 2008

Thanks for the help everyone!

I reported my own topic and asked a moderator to lock this though so that nobody would waste their time :down:

A few hours after I posted this and before anyone had replied, I figured out the problem was exactly what Nphyx said. Because of how I had placed the sidebar as a fixed width and the content parts as fluid width it was messing up. All I had to do was decrease the % of the content parts to leave more room for the sidebar to fit into.

Thanks for all the help, guys!

___ · Apr 25, 2008

No prob Donk. We don't lock resolved topics here but if you want you can edit your original post and change the title to have [Resolved] in it.

Envision, Create, Share

CSS Placement Problem

lorddonk

Ceroscuro

e

___

lorddonk

___

Share this page

Thank you for viewing

Discord

RPG Maker

Content