Layout cell problems with auto height column

  • honeyham
  • Novice
  • Novice
  • honeyham
  • Posts: 16

Post 3+ Months Ago

Hello...anyone care to help me figure out why some of my layout cells don't stay where they are supposed to?? I'm pulling my hair out!! Any suggestions you can offer will be greatly appreciated :)

I'm building a template in Dreamweaver 8 with two main columns - the left as the menu, the right for content (the only editable region on my template). My goal is to be able to add any amount of content and have the page height stretch automatically to accommodate. I thought this would be simple for a beginner...but boy was I wrong!

Since I wanted the body of the menu bar and borders of the content box to stretch vertically depending on the content I added into the right column, I attached a div rule to it to add the menu body image as a cell background and have it repeat-y. Which looked like it worked perfectly in preview...but when published to the site, all the pieces move out of place...and differently so in different browsers. I can't figure out how to have them lock in place regardless of how much content I add to the column next to it. I tried applying a class style with different alignment settings (vertical top, absolute position, float, etc) and also played with margin and padding with no luck.

Any suggestions? I wonder if I'm even on the right track with my method of having the body of the columns stretch relative to the content length in them? Dreamweaver wasn't as easy as I thought to learn!

Thanks in advance!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

have you tried valign: top;? Try that in the cell that is on the left with the menu... as for the background image, you could repeat the background with css; background-repeat: repeat-y;
  • honeyham
  • Novice
  • Novice
  • honeyham
  • Posts: 16

Post 3+ Months Ago

Thanks Bogey for your reply. I actually did do both of your suggestions...the valign:top didn't seem to keep the cells at the top. But the background-repeat-y worked perfectly.

I think after a whole day of trial and error, I was able to get it to work. Hopefully when you click on http://www.simplefatburning.com now, it looks alright. At least it does on my browsers (Safari, Firefox and IE). If it looks strange to anyone...please alert me!

For anyone with a similar problem, here's what I did to (apparently) solve it. Initially, I had all the pieces on the menu bar in separate layout cells...when longer content filled the page, the height expanded automatically correctly, except that the layout cells in my menu bar column all spread out from each other. So instead, I created a layout table for my whole menu bar area, nested a single layout cell for the different navigation buttons using the navigation bar feature. Then I applied a background image with repeat-y style to the table...and that seemed to work!

If anyone knows of a simpler or more correct way of doing this, please share!
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

There's a little difference of size on the left cell with the top where it says "Simple ways to burn 10 lbs of fat every month... <snip>". Other than that... it works.
  • honeyham
  • Novice
  • Novice
  • honeyham
  • Posts: 16

Post 3+ Months Ago

I've altered it since last night...is there still that small size difference on your browser? I don't see it at all on my end, which makes it tough to fix. What browser are you using? Thanks for your help!
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

I'm using Firefox

Image
  • honeyham
  • Novice
  • Novice
  • honeyham
  • Posts: 16

Post 3+ Months Ago

Thanks, Bogey...I think I've fixed it. Problem solved!

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 42 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.