Spacing problems~

Shaun's picture

He has: 52 posts

Joined: Nov 2005

Hello Webmaster-forums, long time no see.

I come looking for a little bit of help. You see, I encounter this problem a lot when using CSS... but I don't know how to combat it. Hopefully one of you guys can help me out. I'll be very grateful.

Here's my current scenario, I just created a template (I won't post the link because I might get accused of advertising) and it has an element on the left and an element on the right.

Now, when I insert an image or an extra tag or some text to the element on the right, the left element does not follow the same height. It stays static to where it is and the template then looks broken.

I tried using a container, but still nothing. This is a major problem because I'm trying to insert an image into the right element and it's driving me crazy, on all the templates I make infact.

Thank you in advance to anyone who can lend a hand. If you do infact need a link to the stylesheet etc. I can post one if necessary.

JeevesBond's picture

He has: 3,956 posts

Joined: Jun 2002

You can post a link! That's not a problem, if you don't want the client to see some work you've done that's fine too. We can smell spam and there's not a whiff of it in this topic. Smiling

Shaun wrote: I tried using a container, but still nothing

Hmmm, that's the way this site works. It might be a float that's causing this problem, am confident we can fix it though. You can either have a look at how this site works,or post a link to your template and we'll have a look at it. Smiling

a Padded Cell our articles site!

Shaun's picture

He has: 52 posts

Joined: Nov 2005

I'm sure you've helped me out in the past JeevesBond. Thanks for the reply, I've been getting more and more frustrated at this problem.

The URL is http://caffeine-studios.com/dev/Weed/ .It's a website I'm making for a local Weed Control company. I'm taking a different approach to this design and am trying to get it pixel perfect for my college portfolio too, I even used comments for the very first time in my stylesheet. I tried ripping apart the entire thing and re-coding but I'm still getting nowhere.

Thanks for replying, very grateful!

JeevesBond's picture

He has: 3,956 posts

Joined: Jun 2002

Shaun wrote: Thanks for the reply, I've been getting more and more frustrated at this problem.

No worries. We can fix it. Smiling

The problem is that the sidebar background needs to be put on the wrapper div. So remove the background colour from #navigation and create an image that's 1px high and 250px wide (which will be the background), then use background: url('sidebarpic.png') left repeat-y; in the CSS for #hold.

Hope this makes sense. Smiling

a Padded Cell our articles site!

Shaun's picture

He has: 52 posts

Joined: Nov 2005

When I use your method, the background image seems to end up behind my logo and top banner element. I'm trying to fix it though. I think I'm getting somewhere.

Ok, I think I have it half working. The navigation is now replaced with a background-image... but I don't think my wrapper is set up properly to work correctly. I can't spot where I'm going wrong, even when I move the div around the page... and it seems to be broken in IE now : (

Thanks JeevesBond :]

JeevesBond's picture

He has: 3,956 posts

Joined: Jun 2002

It's looking good so far! The footer div will probably have to be moved out of the wrapper, but otherwise it looks fine. What problems are you having?

a Padded Cell our articles site!

Shaun's picture

He has: 52 posts

Joined: Nov 2005

I was having too much trouble with it, for this design, I'm just going to use a lot of tags to heighten the Navigation and ensure that any images are clipped to an appropriate height as to line the two elements up. The template just hates me.

However, in future I will have to do the wrapper background image method... I might just create a simple template to test this method out and use your tips.

Thanks Jeeves, you've helped me out a lot!

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.