CSS problems again...help please?

Okay, so at the advice of everyone prior to this particular webpage, I stopped using tables to put content on a page, and began using divs that float. Problem is, try as I might, I just can't get float to work for me.

A good example (don't try all the links, this page isn't done) is a redesign for one of my older sites. I have a menu bar floating to the left, and it looks great in Mozilla (as usual), but in IE, the vertical line doesn't line up and in EITHER browser, if I resize my window or open the page in 800X600 resolution, the floating menu gets dumped at the bottom of the page--where it's not supposed to go!

I'm about ready to say CSS is broken unless you have tons of time on your hands to know all the little hacks to get around browser bugs. I can't come running to this forum every time my code breaks something, but I just don't know what else to do. This happens only when I float things.

The page is: http://www.6-58.com/index2.html

Any advice? help?

Raven Oak

www.ravenoak.net
www.torifest.com
www.6-58.com

OK I'm a bit confused, you said the menu is supposed to be on the left but currently it is on the
right.

Floated elements will be moved so that they avoid overlapping the boundaries of other float elements.

With the menu on the right, it looks OK in IE 6 and Firefox as long as the window is wide enough. When the window is too narrow, "leftcontent" float column is so wide that the "link" paragraph would overlap it. Since the paragraph is a float and can't overlap the other, it gets push down the page until it is below the "leftcontent" column.

This is a relatively simple thing to fix if you decide to stick with this two-column layout. Did you want the "navigation" on the left or the right?

cool Perl / MySQL / HTML+CSS

Oops! I'm so frustrated that I apparently can't type straight. It's on the right and should be on the right.

I do understand why it's being pushed down (i.e. out of room) but thought that with the text element on the left being a % width, it would make the room.

I did find a reference to "float-displace" (line and block within page) in my CSS book but it doesn't go into detail on how to use it. And I couldn't even find it on the WDG CSS area....

Raven

www.ravenoak.net
www.torifest.com
www.6-58.comEdited by ravenoak on 05/30/05 04:54 PM (server time).

In reply to:
I do understand why it's being pushed down (i.e. out of room) but thought that with the text element on the left being a % width, it would make the room.

Do the math. The window is 800 pixels wide. 65% of 800 is 520. So this means the "leftcontent" will be 520 pixels. The "rightcontent" is stuck at 290 pixels. 520 plus 290 = 810. Oops! And that is not counting the margins, borders and padding.

Possible solutions:

1. body { width: 900px }
2. Fix the HTML and CSS.
HTML - put #rightcontent before #leftcontent.
CSS - stop floating the #leftcontent and do not specify a width, but do specify a left margin equal to that of the width of p#link

#1 "navigation" would stay put but if the window is to narrow, a horizontal scrollbar will appear, and the user might need to use it to access the links.

#2. If the window is really narrow, the text of #leftcontent would overlap #rightcontent. For browser that support this property, use min-width on #leftcontent, and the content would be pushed below the navigation instead.

cool Perl / MySQL / HTML CSS
Edited by Atropos7 on 05/30/05 05:26 PM (server time).

I moved #rightcontent and all it's sub stuff (p#link and such since it's part of rightcontent) above #leftcontent, removed the float and width for #leftcontent, and ended up with my menu (#rightcontent) at the bottom of the page to the right.

*Saw the edit: trying again.*

Raven

www.ravenoak.net
www.torifest.com
www.6-58.comEdited by ravenoak on 05/30/05 05:27 PM (server time).

In your CSS there is an error, you left off # on a #rightcontent rule

You haven't fixed the HTML yet, it needs to be:

<div id="rightcontent"></div>
<div id="leftcontent"></div>

cool Perl / MySQL / HTML+CSS

Okay, did all of what you said for #2, including a min-width of 400px. You had an error though--the 290px margin needed to be margin-right not margin-left.

That seems to have solved the problem. I've checked it in IE and 800x600. :)

"In your CSS there is an error, you left off # on a #rightcontent rule"
Yeah, that redundant piece of code got deleted. I'm uploaded the fixed version now.

I also redid the top image to float something so the misaligned lines I was getting got fixed. But in IE, instead of the picture floating where I wanted it (kind of a centered look in Mozilla), it pushes the image all the way to the right side. Why?

Just out of curiousity, have you ever heard of or used float-displace before...?

RavenEdited by ravenoak on 05/30/05 06:12 PM (server time).

In reply to:
#leftcontent {
margin-right: 290px;
min-width: 400px;
}

That is correct.

In reply to:
I've never used min-width before. Just out of curiousity, have you ever heard of or used float-displace before...?

It's new, part of CSS 3, something which Gecko doesn't fully support yet, much less Internet Explorer. You'd best avoid using that property for now. I'm curious as to why your book mentions properties from a standard that isn't finished yet.

EDITED:

Use:

#top img	{
	margin: 0;
	margin-right: 33px;
	padding: 10px 0 0 0;
	width: 231px;
	float: right;
	vertical-align: top;
	}

To center the image.

Also, use:

body {
	margin:0px 0px 0px 0px;
	background-color: #0052a4;
	color: #ceedff;
	font: 0.83em Verdana, Arial, Helvetica, sans-serif;
	/* page not wider than this */
	max-width: 1034px;	
	}

#top 	{
	width: 100%;
	height: 182px;
	background-color: #0066CC;
	background-image: url(graphics/tophead00.jpg);
	border-bottom: double 5px #5AA6F3;
	/* background does not tile */
	background-repeat: no-repeat;
	}

And the layout will look much better for browsers that support max-width (not IE)

cool Perl / MySQL / HTML CSSEdited by Atropos7 on 05/30/05 06:23 PM (server time).

I edited in a couple more questions above.

I do think I'm getting the hang, slowly but surely, of float! :) Thanks btw for your help.

The book I'm using is "Core CSS: Second Edition" by Keith Schengili-Roberts. And what's irritating is he doesn't mention it being unsupported and new.
Raven

www.ravenoak.net
www.torifest.com
www.6-58.comEdited by ravenoak on 05/30/05 06:24 PM (server time).

That fixed it! I was wondering if margins fixed it due to some IE bug or some such. I've read about more IE image/margin/padding bugs than anything else.

Thanks again!
Raven

www.ravenoak.net
www.torifest.com
www.6-58.com

In reply to:
The book I'm using is "Core CSS: Second Edition" by Keith Schengili-Roberts. And what's irritating is he doesn't mention it being unsupported and new.

Hmm. Probably need to look toward the beginning of that book about CSS3. The CSS3 working draft on the box model is dated October 2002 so no doubt he just wanted to get a book out on something "old" before anyone actually finished implementing enough of CSS3 to make it "useful". See, its a catch-22, coming up with standards is useless unless someone uses them, but no one can use them unless they are made up and make sense. Some software developers can get away with implementing bits at a time (opacity is CSS3, but works in Gecko, and multi-column layout is supported in Gecko, etc), because other software developers (cough Microsoft cough) decide to take their time and not implement new stuff much less fix mistakes.

cool Perl / MySQL / HTML+CSS

Yeah, I'm happy to know that when CSS3 is out and supported, I have info on it in a book, but at the same time, it's tricky if I don't know what's 3 and what's not. That's why I checked it against WDG.

Thanks again!
Raven

www.ravenoak.net
www.torifest.com
www.6-58.com

CSS problems again...help please?