3-col, content in col 2, heights in cols 1 and 3

@CarolWApr 02.2005

I hope I’ve left the worst of my bottomlss pit problems behind; it sort of looks that way; I think my problem was divs and containers for columns. But now I have a new problem – seem always to be making them for myself – well, I suppose as a brand new webmaker, I can expect that.

If you would like the half-winded version of my difficulty with my desires, you can go to

~~[url]~~http://www.coherentdog.org/test2.htm#goahead[/url]

If you want all my background rambling along with it,

~~[url]~~http://www.coherentdog.org/test2.htm[/url]

and if you want to see what I’m trying:

~~[url]~~http://www.coherentdog.org/test405d.htm[/url]

though I actually went ahead and put up a new external .css file anyway; I just don’t have proper control of the heights of the background image (leaves) in columns 1 and 3. I’d like them to adjust to the same height as the content in column 2, but don’t know how to do that.

For the moment, in my test page, I embedded some of the style information in the ID tags for columns 1 and 3, thus (this is for column 1; column 3 code is similar, with changes as needed):

[code] <div id=”column1″ style=”height 100%; margin-bottom: 1em;”>

[/code]

I don’t even know if that’s “allowed (XHTML 1.0 Strict), though it validated fine, so I suppose it’s allowed!

My CSS to make the leaves background image in column 1:

[code] #column1 {

background: #9cf url(“images/logos/leaves1-9cfmir-z50tr-xp.gif”) repeat-y 10% 0; float: left;

/* height: 100%; */

height: 1760px; /* Sheesh; I don’t want that line just above! What a kludge! */ /* Not only that; it seems to override the embedded style info in the page HTML */

/* so I wonder if my HTML is bad. */

width: 3%;

margin: 1em 1em 1em 1em;

padding: 1em;

/* the page test405d.htm has the #c9f background-color enabled */ /* so as to see the columns */ /* background-color: #c9f; */

}

[/code]

Hope that’s legible; I can’t tell if it’s going to wrap or what.

From a fool rushing in where angels fear to tread, with a big grin.

Fri, 01 Apr 2005 17:33:40

to post a comment

CSS

8 Comments(s) _↴

@MstrBobApr 02.2005 — #[font=Georgia][COLOR=royalblue]For simplicity's sake, let us focus on the part in question. You want leaves going down, on the left and right of the content, to the length of the content. Forget now then the use of columns. We can achieve this with 2 DIV elements.

First we create a DIV and give it the leave background, with left padding a bit more than the width of the picture. Then, inside of the DIV, we place a second DIV with the background aligned to the right and right padding a liitle bit more than the picture. In DIV two, we place content.

[code=html]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en" dir="ltr">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta name="Content-Style-Type" content="text/css">
 <title>Coherent Dog</title>
 <style type="text/css">
 <!-- 
 #col1 {
 background:url('http://www.coherentdog.org/images/logos/leaves1-9cfmir-z50tr-xp.gif') repeat-y top left; 
 padding-left:60px;
 }
 #col2 {
 background:url('http://www.coherentdog.org/images/logos/leaves1-9cfmir-z50tr-xp.gif') repeat-y top right; 
 padding-right:60px;
 }
 -->
 </style>
 </head>
 <body>
 <div id="col1">
 <div id="col2">
 <h2>Coherent Dog</h2>
 <p>Content here...</p>
 </div>
 </div>
 </body>
 </html>
 [/code]

Did that really answer your question?[/COLOR][/font]

@CarolWauthorApr 02.2005 — #[font=Georgia][COLOR=royalblue]For simplicity's sake, let us focus on the part in question. You want leaves going down, on the left and right of the content, to the length of the content. Forget now then the use of columns. We can achieve this with 2 DIV elements.

First we create a DIV and give it the leave background, with left padding a bit more than the width of the picture. Then, inside of the DIV, we place a second DIV with the background aligned to the right and right padding a liitle bit more than the picture. In DIV two, we place content.

(code example omitted)

Did that really answer your question?[/COLOR][/font][/QUOTE]

Mstr Bob, if I'm understanding correctly, I think you have this pinned so I can take complete control of it! Just the way I want! I think. Maybe. haha!

Would this arrangment make the thing fluid, so people can resize their browser windows and still see "the whole page," so to speak? I guess I'll have to try it, to find out!

My mind is a blur at this point, haha! I'll play with it, and report back when I've had time really to look at it. Thanks a million!

Fri, 01 Apr 2005 19:22:20

@CarolWauthorApr 02.2005 — #How interesting!

http://www.coherentdog.org/mstrbob201.htm

It worked. Naturally!

Many implications here.

I would like to narrow the content column, to keep lines of text closer to the visitor's eye.

What do you suggest for technique to do that? Pehraps more padding in the leaves parts? Or something about margins (risking IE's possible wrath with that)?

I still need to view the page with several browsers and at different resolutions, and try resizing windows, to see what happens to the page.

MstrBob, I just took the code you posted, and plugged in some content from another page on my site. Added the "#col1" and "#col2" definitions to the CSS I used especially for that page. It would be a cinch to add it to my more global CSS (external) file.

If I change my whole site, which I certainly would consdier doing, that's a lot of pages to edit, but NoteTab does a nice job with mass editing.

Since I'm such a beginner, I expect to continue making big changes!

Sat, 02 Apr 2005 05:53:13

@_lt_Eddie_gt_Apr 02.2005 — #You could play with the elements within the centre column.

<i>
 </i>#col2 p{
 width:75%;
 margin:auto;
 }

@CarolWauthorApr 02.2005 — #You could play with the elements within the centre column.

<i>
 </i>#col2 p{
 width:75%;
 margin:auto;
 }

[/QUOTE]

Looks great, Eddie; thanks! I think that's exactly what I'm looking for.

One question though; I have no idea what happens with things like "margin: auto;" or anything else "auto." What does that do?

I can really tell what a novice I am; I've been trying to do things I see on other sites, but without an idea of how to do it, I'm sort of "inventing," and though my pages and my CSS validate fine, I think I have bits of messes all over the place. Eventually, I'll really learn how, and then get clieaned up some.

Sat, 02 Apr 2005 09:19:20

@MstrBobApr 02.2005 — #[font=Georgia][COLOR=royalblue]Well, if you want to increase the distance between the leaves and the content, you can increase the padding. I just want to point out sowething. In the example I gave you, it has no defined width, so it will expand to fill the page. But long lines of text, which can occur in higher resolution browsers, are hard to read. Thus, I might suggest you give #col2 a width. But allowing text to resize is also important. So, try giving #col2 a width in em units. If I recall, the suggested maximum width was around 30-35 em. This size is relative to the size of the txt, but generally will allow for less eye movement, which is supposed to improve one,s ability to concentrate on the reading. Just a consideration.

[code=html] 
 #col2 {
 background:url('http://www.coherentdog.org/images/logos/leaves1-9cfmir-z50tr-xp.gif') repeat-y top right; 
 padding-right:60px;
 width:30em;
 }
 [/code]

Edit: margin:auto; means that the browser will calculatue the margin, and is often used to center an element (but not the text inside)[/COLOR][/font]

@_lt_Eddie_gt_Apr 02.2005 — #One question though; I have no idea what happens with things like "margin: auto;" or anything else "auto." What does that do?[/QUOTE]
Auto can be handled differently by different devices so is handy when coding for handhelds, screens, printers etc. All that's important though is that it usually assists the centering of things. Remove it and see what it does in different browsers, you'll see what I mean.

@CarolWauthorApr 02.2005 — #Dear friends,

Gosh! You're helping me so much! I'm getting all excited! I just put MstrBob's suggestions to the test, in two resolutions and four browsers (my preferred 800x600, 1024x768, and current versions of Firefox (now my default browser), Opera, Netscape and, of course, IE. That new test page behaved beautifully - that is, MstrBob, your leaf-arrangements did. Which brings up another question.

Notice the little gap between the masthead banner and the navigation bar. Ouch. Well, it isn't too bad, but now I want to take it out. I tried nesting the navbars inside the masthead div, but that didn't seem to make any difference. Maybe it has something to do with what images (.jpg) will and won't do? I can't tell. I do notice the banner stretches and contracts as I resize the browser windows. I want that!

But uh, oh, my navigation doesn't follow suit. MstrBob, you had some arrangement you gave me some time ago where I think the navigation contracted and stretched as the viewport was resized, but that had only five links per line; now, I think there are seven in my main navbar. Not more in the sub navbar.

Gumbystation was so kind; he reviewed my site, and though I didn't go along with all of what he said, he had some very good ideas and suggestions, and I'm aiming at solving some of the niggly stuff, and I decided one thing I need is dark borders at right and left. The leaves don't help much with that, but first, I toned down the leaves by making them partly translucent (Yay, Paint Shop Pro), and then I added dark borders to the masthead (banner), and now I've added dark borders to the leaves images, and that image takes up now 70px (wide) instead of its former 50px wide. However, though I've uploaded the new images, I haven't put the new leaves in place yet.

I don't really know yet if the dark borders on the leaves images will look silly or not - depends what happens when I start nesting (haha) (Grandma Broody Hen)

So, is there a way I can constrain the main navbar along with the banner? And close that darned gap bertween the navbar and the banner? Any coding suggestions?

For now, I'm conentrating on my main pages; I plan to change them all to match what is now mstrbob201.htm on my site, except that I'm going to use Eddie's suggestion and MstrBob's elaboration as well.

I know in the end, my site will look the way I want it to, with all this help I'm getting! Thanks so much!

(Whoever heard of a Grandma, even a GreatGrandma - in kindergarten? I did! That's me!)

Sat, 02 Apr 2005 12:36:17

Also in #CSS _↴

border problem and text margin variables within css?Display a DIV when hovering over another DIV

Success!

Help @CarolW spread the word by sharing this article on Twitter...

Tweet This

3-col, content in col 2, heights in cols 1 and 3

8 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

3-col, content in col 2, heights in cols 1 and 3

8 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #CSS _↴