I am converted...sort of

How do I stop a text wrap I don't want?

[willybfriendly]

OK, I am nearly done with converting my site to a pure CSS layout. NN4.x visits have are below 5% (barely) so I figured I would let them see a butchered site.

I have a top menu div with a background color, and a side menu div with the same color (set to 400px), ala -

XXXXXXXXXXXXXXXXXXX
X
X
X
X
X
X
X

and I want my copy to sit in the center. Pretty simple stuff...

excpt on some pages my copy drops below the side menu div, at which point it wraps to the left, ala,

XXXXXXXXXXXXXXXXXX
X copy
X copy
X copy
copy
copy

I want a straight margin down that left edge of copy. How can I do this without resorting to a table? The work around I have right now is.

XXXXXXXXX
X <TABLE>
X
X

which forces that margin straight.

Is there a pure CSS way to accomplish the same?

WBF

[pageoneresults]

Hello wbf, maybe try...

white-space:nowrap;

On the element that you do not want to wrap. For example, I use that attribute on my <h> tags...

[willybfriendly]

Nope. Now I get paragraphs that never break. Fine if I want a visitor to scroll right forever :) (Oh, and any paragraph below the left side menu div STILL insists on moving it's left margin over so that it starts below the menu div.)

I also tried nesting the div's, but without success. I want that left menu div there, which I accomplished with float:left, but only 400px high. Since the site is template based, using includes, I have no way to predict how far downpage the copy will run.

It is probably something very simple, but I haven't found it yet.

WBF

[waldemar]

Hello Willy, looks like we are seeking for the same thing at the same time :-) I put a margin-bottom of 2000px to that sidemenu; but not happy with it :-( (http://www.webmasterworld.com/forum83/1033.htm)

[willybfriendly]

Yep, I tried something like that too. Problem is my footer is centered across the bottom of the page. Go to long on that side menu and that footer is an awfully long way down there :(

So far that table is the only thing that will keep the margin straight, but that is "abusing" a table to force a layout. Surely those CSS folks had some solution for this when they came up with the specs. Afterall, it is nothing more than a glorified hanging indent.

WBF

[olwen]

What about a top div

style="position:absolute;top:0px;left:0px;width:100%;height:100px;"

Side div

style="position:absolute;left:0px;top:100px;width:100px;height:400px;"

Content div

style="position:absolute;left:0px;top:100px;padding-left:120px"

Alter numbers to suit

[willybfriendly]

Was trying to avoid absolute positioning. Everything is measured in em's and percents, except the height of that floating side menu div.

I've gotta' admit, until now I have always been a hybridized kind of guy using tables for layout. It's been fun learning/applying CSS to this project, but I am stumped.

Don't absloute positions risk problems when the visitors play with their font sizes, or introduce cross platform problems with the default font size differences?

WBF

[Wertigon]

Hmmm... I suspect you've set your menu to "float : left;", right? Tried wrapping the content in a simple div, and if so, do you got your menu inside the div? If so, try moving it outside the div, and set "float : right;" to the content div.

[mipapage]

You could do this:

<div>header</div>

<div style="float:left">menu</div>

<div style="margin-left: width-of-menu-div;">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </div>

[willybfriendly]

mipapage

The left margin is set from the left edge of its container. Your solution gives me the same funky jog in the margin, only it is moved over towards the right, leaving a good deal of ugly white space.

Wertigon

I tried the nested div approach, but that didn't work at all, so I had already moved the div back outside. I will try the float:right on the content div (though I think I did that many permutations ago). So, do you think something like float:right; margin-right:10% would solve my problem?

I will be moving this thing live in the next couple of days, so if I don't get it worked out I will be left to use the <TABLE> work around.

Thanks for all the advice guys

WBF

[Wertigon]

I checked it up slightly better - Simply use

<div>Top div</div>
<div style="float:left">Menu div</div>
<div>Content div</div>

Done, and works like a charm (in both IE6 and Opera 7). There's of course a whole lot more to it than that, but that's the basic concept.

I love float... ^_^

[mipapage]

Willy,

If you try this you should be fine, at least it worked for me.

<div>header</div>
<div style="float:left">menu</div>
<div style="margin-left: 55px;">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </div>

Ahhh! I get it. I think what you are seeing is the IE 3pixel text jog. In IE, when you put a div containing text next to a floated div, you will see a jog of three pixels down along the length of the...

Ahh heck, check it out here:

http://www.positioniseverything.net/explorer/threepxtest.html

[edited by: Nick_W at 9:36 pm (utc) on May 14, 2003]
[edit reason] just de-linked [/edit]

[willybfriendly]

After all the feedback I have decided to go back and look at my cascade, suspecting that the problem may lie there. This is not the IE 3px test jog, though if one looks really close that is evident.

WBF

[mipapage]

Willy,

I can't believe that I missed this. You're answer would be to float both of the div's left. This has implications though, which I am discussing somewhat over here [webmasterworld.com].

I can suggest a decent solution to you if you haven't already found one.

Cheers,
Mike