Recent Topics
  1. b2evolution CMS Support Forums
  2. b2evolution Support
  3. Templates, skins, XHTML and CSS
  4. Really frustrating error - two column layout

Really frustrating error - two column layout

1 May 24, 2009 19:38    

My b2evolution Version: Not Entered

Hello all, you always seem to come up with the right answer. Please take a look at http://timmystutor.com (and IGNORE the bright colored borders...I just put them in to try to visualize where I have a problem;o)

This page is an adaptation of asevo skin.

Everything is working except the container will not expand to include the full height of the sidebar. (If I add a post to the sidebar2 (left column) I have the same problem there as well.) My gut reaction was that I had a missing </div> or misplaced </div>. I've been working on it for hours and cannot see that this is the case.

SOOOOO...something is coded wrong and I don't see it.

I tried validation but it appears that there are errors in the code of the original skin and I don't want to go mucking around in all the many other pages right now for fear I'll break the working part of the skin.

Hoping your eagle eyes will spot my dumb error. THANKS!

I posted my index.main.php as a web page at http://www.timmystutor.com/helpme.htm the css is at http://www.timmystutor.com/skins/timmy/style.css

Back to top

2 May 24, 2009 20:18

1. Move those 3 closing </div> from the bottom above the "HTML FOOTER" code.

</div>
</div>
</div>
<?php
// ------------------------- HTML FOOTER INCLUDED HERE --------------------------
skin_include( '_html_footer.inc.php' );
// Note: You can customize the default HTML footer by copying the
// _html_footer.inc.php file into the current skin folder.
// ------------------------------- END OF FOOTER --------------------------------
?>

2. Remove the whole tag 

<body style="background-image: url('http://www.timmystutor.com/images/purplecomic.jpg')">

Add this to style.css

body { background-image: url('http://www.timmystutor.com/images/purplecomic.jpg') }

3. Remove this part from _body_footer.inc.php

<head>
<style type="text/css">
.style1 {
	font-family: "Times New Roman";
}
</style>
</head>

And add this to style.css 

.style1 { font-family: "Times New Roman" }

Good luck

Back to top

3 May 24, 2009 22:35

Thanks so much! Your suggestions and removing the "extras" div did the trick. I so much appreciate your help!

Back to top

4 May 24, 2009 23:19

No problem :)

I still see the same layout problems, please do all 3 steps I wrote above and you'll be fine ;)
First one is the most important!

Back to top

5 May 25, 2009 02:37

Just pulled it up in Firefox and it's all messed up now. AND...although in IE it looks OK...it's OK as long as I don't put too much in the rambling boxes...otherwise same problem.

I've gone back and rechecked my code (the dog kicked my cord out of the wall while I was making the changes and I didn't reverify...sorry).

The style is off of the footer page...
Moved the three </div>s
Moved the background style to the style sheet...

I also deleted the skin folder online and totally re-uploaded it.

Any other ideas?

Thanks so much for your help!

Back to top

7 May 25, 2009 02:58

Your skin is messed up
- sidebar 2 is 450px width and has "position: absolute", that's why it's 'flying' in the center.
- the main area has "width: 100%; float: left" which is not right. Try "width 400px".

What exactly do you need? Do you want to put the posts block above and keep two sidebars below?

Back to top

8 May 25, 2009 03:04

If you look at the site in IE it looks to me on my system the way it is supposed to look (although the column length of the left col isn't working right yet). With the cartoon post at the top...under where the image header will ultimately go...then below the post should be two columns...the Ramblings column which is a side blog (sidebar 2) and the right column which is (sidebar). I need the length of the page to reflect the longest of these two columns...sidebar (right) or sidebar2 (left) whichever becomes the longest based on its content...

Back to top

9 May 25, 2009 07:17

OK guys...think I finally got it ;o/ If ya'll wouldn't mind checking http://www.timmystutor.com one more time and let me know if you see any issues in any of the browsers you normally use. It looks good to me in IE and Firefox. Otherwise...thanks so much to all of you for your help. THANKS, Sue

Back to top

10 May 25, 2009 07:31

It looks good now :)

You still have some validation errors, most of which can be fixed by simply adding a slash " / " in <br> and <img> tags

Consider using <br /> instead of <br>, <img src="" alt="" /> instead of <img src="" alt="">

Happy blogging!

Back to top


Form is loading...