Web Design Forums

INS321 · 22-06-2007, 07:07

Here is my problem...

I have a menu and content section in my web page. When i fill the content section with content, and it takes up more than 500px in height (this is what i have set the menu ehight to be), the content goes underneath the menu.

The menu is 200px wide, and the content is auto, so it adjusts to different screen sizes. I do not want to make it a % because it would be hard to place the stuff int he menu correctly.

Does anyone know how to keep the content from going underneath the menu?

attached a Picture to show you what i mean:

Any help would be greatly appreciated.

forwardtrends · 22-06-2007, 14:03

Do they both have float:left applied? What is the position: attribute set as?

cjgraphix · 22-06-2007, 14:06

place a margin-left on the main content area so it doesn't wrap. margin-left: 210px;

pgo · 22-06-2007, 15:07

Don't set heights at all - there's no need. I suspect you're going about this in an inefficient manner.

I'd float both with specified widths. Easier than the buggy margin method in my exprience.

Yoyi · 22-06-2007, 16:08

I am a noob at this so this might not be effective but it works for what you are trying to to do.

CSS:

Code:

#c0{
width:700;
}

#c1{
width:200px;
float:left;
}


#c2{
width:500px;
float:left;
}

HTML

Code:

<body>
<div id="c0">
	<div id="c1"></div>
	<div id="c2"></div>
</div>
</body>
</html>

herkalees · 22-06-2007, 16:56

Quote:

Originally Posted by cjgraphix

place a margin-left on the main content area so it doesn't wrap. margin-left: 210px;

This is how you fix it.

pgo · 22-06-2007, 17:25

Quote:

Originally Posted by Yoyi

I am a noob at this so this might not be effective but it works for what you are trying to to do.

Yeah, that's how I'd do it.

Larixk · 22-06-2007, 17:45

yep, me too.
Get to know your css-floats.

INS321 · 23-06-2007, 05:27

Thank you sooo much everyone. I'm using the margin method because it's so simple, but thanks to the other people aswell.

You just made my day

Jayx · 24-06-2007, 10:14

Float for me thanks.

22-06-2007, 07:07	#1 (permalink)
INS321 Registered User Join Date: Dec 2006 Posts: 9	CSS - Menu and Content same height? Here is my problem... I have a menu and content section in my web page. When i fill the content section with content, and it takes up more than 500px in height (this is what i have set the menu ehight to be), the content goes underneath the menu. The menu is 200px wide, and the content is auto, so it adjusts to different screen sizes. I do not want to make it a % because it would be hard to place the stuff int he menu correctly. Does anyone know how to keep the content from going underneath the menu? attached a Picture to show you what i mean: Any help would be greatly appreciated. Attached Thumbnails

22-06-2007, 16:08	#5 (permalink)
Yoyi Senior Member Join Date: Jan 2007 Location: Miami, Florida, US Posts: 345	I am a noob at this so this might not be effective but it works for what you are trying to to do. CSS: Code: #c0{ width:700; } #c1{ width:200px; float:left; } #c2{ width:500px; float:left; } HTML Code: <body> <div id="c0"> <div id="c1"></div> <div id="c2"></div> </div> </body> </html>

22-06-2007, 17:45	#8 (permalink)
Larixk Senior Member Join Date: Sep 2006 Location: Utrecht, Netherlands Posts: 1,029	yep, me too. Get to know your css-floats. __________________

24-06-2007, 10:14	#10 (permalink)
Jayx Now with added sarcasm. Join Date: Aug 2006 Location: George, South Africa Posts: 351	Float for me thanks. __________________ I made 100 posts and all I got is this stupid signature.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

22-06-2007, 14:03	#2 (permalink)
forwardtrends forwardtrends.com Join Date: Mar 2006 Location: Pittsburgh, PA Posts: 67	Do they both have float:left applied? What is the position: attribute set as?

22-06-2007, 14:06	#3 (permalink)
cjgraphix Website Developer Join Date: Jun 2007 Location: Pacific Northwest Posts: 413	place a margin-left on the main content area so it doesn't wrap. margin-left: 210px;

22-06-2007, 15:07	#4 (permalink)
pgo Senior Member Join Date: Jan 2005 Posts: 12,340	Don't set heights at all - there's no need. I suspect you're going about this in an inefficient manner. I'd float both with specified widths. Easier than the buggy margin method in my exprience.

23-06-2007, 05:27	#9 (permalink)
INS321 Registered User Join Date: Dec 2006 Posts: 9	Thank you sooo much everyone. I'm using the margin method because it's so simple, but thanks to the other people aswell. You just made my day

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)