Please help! Three-column layout issue!

[greengirl]

I am trying to set up a blog template with a three-column layout.

My problem:
when I make the browser window smaller and larger, the right-hand column travels left and the center column narrows - but the images in the center column (where the blog posts are) stay the same size and lap over the right-hand column. I want that center column to stay the same size and the right-hand column to stay put. How?!

Go here (http://drawingbored.blogspot.com) to see what I mean.


Thanks for your help!

[WebJoel]

I am seeing a few errors to begin with:

You have things like:
<img src="http://www.erisfree.com/d2/imgs/xhtml.gif" title="valid xhtml 1.0" border="0" alt="" width="80px" height="15px" />

This is incorrect. If you state "px", you must state style="width:80px; height:15px;.
Otherwise, it is merely width="80" height="15"

Also:
<a name="115142810011238789">
Copied &pasted from HTML-Tidy error report:

In XHTML, the "name" attribute has been deprecated and replaced by the "id" attribute. If you want to keep both tags for compatibility reason, name and id, the values should be the same.
This error is generated when only the name exists and that tidy try to copy the value of the name in the id attribute. But an "id" must begin with a letter ([A-Za-z]

Therefore, the "name" isn't being employed, as you have it started with a numeral. Add a letter (any letter) to it's prefix ("115142810011238789" becomes "a115142810011238789") and add id="a115142810011238789"

And this could be a problem too:
<h5>look-see</h5>
<ul>
<!-- Start of Flickr Badge -->
<style type="text/css">
.zg_div {margin:0px 5px 5px 0px; width:117px;}
.zg_div_inner { color:#666666; text-align:center; font-family:arial, helvetica; font-size:11px;}
.zg_div a, .zg_div a:hover, .zg_div a:visited {color:#3993ff; background:inherit !important; text-decoration:none !important;}
</style>

because you can't have the <style>~</style> inside of a <ul>

Then let's see what comes next. :)

[greengirl]

I took the <ul>~</ul> commands out of the Flickr badge, I fixed the "px" issue and it didn't fix my problem.

I can't find any place in the code that looks like this: <a name="115142810011238789">.

Thanks though!

[mark_yieh]

I notice you have a couple of syntax errors in your site. Let's take care of those first and see if it fixes the problem. If it doesn't then we'll dive into the runtime errors and maybe some logic errors. But let's take care of the basics first. Here are a couple that I spotted.

1.In your file http://www.drawingbored.blogspot.com/ on line 131 you used an align property in your CSS definition. CSS doesn't support the align property. You would have to use text-align if that's the effect you're trying to achieve.

2.In your file http://www.blogger.com/css/navbar/main.css on line 20 you forgot to place a measurement indicator. You wrote padding-top:30; I'm assuming you meant padding-top: 30px;

3.In your file http://www.drawingbored.blogspot.com/ on line 183 you forgot to place the measurement indicator again. a:img {border-width: 0;} again I'm assuming a:img {border-width: 0px;}

4.In your file http://www.blogger.com/css/navbar/main.css on line 26 you put an underscore in your border property. _border: 0. I'm assuming you meant border: 0px and you did the same thing for very next property also, _display: block which should be written display: block;

5.In your file http://www.blogger.com/css/navbar/main.css on line 42, you again put the underscore on your property #leftContent {_margin-top: 30px !important;} I guess that should be #leftContent {margin-top: 30px !important;}

6.Here's a logic error that I noticed. In your file http://www.drawingbored.blogspot.com/ in your css rules, add a width property for the class "outside" and "entry". The width should be the size that you would like the middle content to be.

7.I think one of the reasons why the content overlaps is because of the z-index property, although I'm not completely sure that this is the case. Maybe someone else reading this thread will be able to clarify.

8.The last thing I would recommend at this point is to make sure your document is well formed, meaning make sure that all the tags have a closing tag and that none of them are improperly nested.

Try those solutions for now and see if that makes any difference. If not then we can take a look at it again and break it down some more. Good luck!!

[kessa]

Hi greengirl,

Firstly - let me pre-empt the by saying that I'm currently using my work PC (which blocks bloggs) and so I can't actually see what the problem is... however,

the right-hand column travels left and the center column narrows - but the images in the center column (where the blog posts are) stay the same size and lap over the right-hand column

If the solutions which the guys have mentioned above don't solve the issue then it sounds like it may be a float issue - see what happens when you've tried the other solutions and then perhaps take a look at any floats you may have (if you're floating the image, but not the containing DIV then this could cause it to overlap the right hand column - the solution in this case would be to either remove the float for the image, or add a float for the containing div)

...I'll try to take a look when I get home.

Kessa

[WebJoel]

....I can't find any place in the code that looks like this: <a name="115142810011238789">

See attached image:

And I agree with Kessa, -it does sound like a float issue. But before I start fixing floats, the errors should be fixed. I noticed several "clear:both" and question their need and/or purpose (trying to delimit a previous non-essential float?)...

[greengirl]

Thank you all!!!!! I tried to correct as many of these errors as I could. I didn't write the original code and I only have very basic knowledge of this stuff. (I got this template free online...tried to contact the author but no response.)

I've made a bit of progress - by specifying the width of the middle section ("outside"), the section now has a fixed width. Cool! Now the only problem is the right hand column ("menu2box") slides left-right as you max-min the browser window. I've experimented with z-index, but it seems to determine only whther the right-hand column slides OVER the middle section or UNDER it. I want the right-hand column to "stick" to the center column. Any suggestions?

[WebJoel]

...I didn't write the original code and I only have very basic knowledge of this stuff. ...

That code is a leviathon, -it is HUGE. But if you're up against a wall here and it seems that this is the case, I might now just try to copy and bring your page offline and play around with it. I was resisting to do this, expecting that you or someone else would get the expected results before this. I think that I'll get a 3-column template of my own and import your stuff into it... go that route maybe... :)

[greengirl]

That's really generous of you, WebJoel! Let me know what I can do.
Thanks!

[WebJoel]

I can get the left column and the right column to behave by making them both be "position:relative" instead of "position:absolute" (of which I am not much of a fan). But the center column is the problem right now. And once (if) I can get that working right (float to the right of the left-hand column), probably to make the image not dictate the width of the column, I would be creating another DIV nested within and stating each image as it's background-image, with no border, padding or margin...
But right now still, I am still getting my head around how this page works... :)

[mark_yieh]

I believe the reason why your menu on the right is sticking to the right side of the browser is because you set the right property of your menu2box tag to 0px

.menu2box {
position: absolute;
margin: 0px;
padding-left:10px;
right:0px;
top:60px;
width:200px;
background-color: #98A45C;
background-image: url(http://www.erisfree.com/d2/imgs/bg15.gif);
}

If you want to use absolute positioning like you have it set up, then I think the solution would be to take away the right property, and add a left property equal to the size of the first menu and middle content. Try this and see if it helps.

.menu2box {
position: absolute;
margin: 0px;
padding-left: 10px;
top: 60px;
width: 200px;
left: 750px;
background-color: #98A45C;
background-image: url(http://www.erisfree.com/d2/imgs/bg15.gif);
}

[WebJoel]

I believe the reason why your menu on the right is sticking to the right side of the browser is because you set the right property of your menu2box tag to 0px ....


BRAVO! -I came across that too, -and it's working, -and see that you found the solution first! Yea! :) Good catch!

I'm still doing some personal-likages tweaking, but this seems to be working betteror i. I don't know about hf ow it will re-size for screens smaller than 1024-width. -Probably a scrollbar will appear, -but that is still such a small price to pay for getting this to actually work. :)

[greengirl]

Mark! Hooray, that worked!! Thanks so much to everyone who took time to help me. You all rock!

Best,
Teri
:)

[WebJoel]

I got it looking very nice in IE... but the center column floats left in firefox and goe underneith the left-hand column (due to it's being "absolute", no doubt...) And I get a few minor 'gaps' where there shouldn't be. -They don't look bad, -but that they are there indicates that something is amiss still...

It is thundering & lightning-ing outside... I better get off the computer and away from the window. But you know what? I am thinking that I can maybe take this and copy & paste the three relevant parts into a working 3-column layaout now... and maybe even get it to be fluid! (or jello, at least...)
opps, -big flash outside... gotta bounce!

[mark_yieh]

I'm glad I was able to debug some of the code for you. I know how frustrating it is sometimes to be "snagged" as you put it, on a project that doesn't seem to be working correctly. Best wishes.

[mark_yieh]

By the way there is still a slight bug in your code concerning the header that says blueberry pie. When you shrink the browser enough, the header breaks into two lines. This is most likely caused by the fact that your width property is set to 100%. Also your font-family property is not correctly written. It should contain quotations around any font names that is more than one word.

.title {
font-size: 30px;
font-weight: bold;
font-family: times new roman, serif;
text-align: center;
letter-spacing: 10px;
color: #F6F5E9;
position: absolute;
padding: 0px;
width: 100%;
right: 0px;
top: 0px;
z-index: 1;}

If you want to fix this bug, and still keep the alignment of the title in the middle, then you can try this code:

.title {
font-size: 30px;
font-weight: bold;
font-family: "times new roman", serif;
text-align: center;
letter-spacing: 10px;
color: #F6F5E9;
position: absolute;
padding: 0px;
right: 0px;
top: 0px;
z-index: 1;}

See how that looks. Also you should do the same to the .quip rule.

[WebJoel]

I think that I've got a working solution to this.

Thanks to mark_yieh for the clue that got me looking in the right places.

I didn't import the three content sections into a working 3-column template of known correctness after all. I just kept working with the template that greengirl started with to avoid any other possible issues or injuries.
I moved some furniture around and 'style'd some statements, got the 'warnings' down from wellover 20 (most due to my revisions and ommissions), to just 6 (all of them are still that name="115142810011238789" thing, -but I think that I'll just leave that alone for now...
The page looks virtually the same now in IE and Firefox.

(greengirl: Revised code is too big to post, I'll try to attached it zipped, or just e-mail it to you)
-Joel

(edit: just attached ZIP'd file. Let me know if this worked... I am not too confident with using this zip utility)

On that "blueberry pie" text which collapses whenthe screen is drastically resized small, do this:
<h# style="white-space:nowrap;">Blueberry Pie</h#> for a quick stop to the word-break problem.

EDITED :

I was told that the first attempt to upload the ZIP'ed file resulted in only an 'image' of non-sensical characters.

I have re-zipped a TEXT-only file, and re-attached it to this post for archival pruposes.