Jump to content
Stef's Coding Community
Sign in to follow this  
daddyalfie

Equal columns

Recommended Posts

On THIS website can you see an easy way of making the nav column on the left always extend down all the way to the bottom to match the height of the right "main" div?

 

(I HAVE browsed the forum here but found no direct discussion of it.)

 

Thanks!

 

Alfie

Share this post


Link to post
Share on other sites

I'd make the wrapper background the same color green as the side bar and add that brown border to the content part. The only reason that would not work is on a page where the content is shorter than the side navigation, but I didn't notice that anywhere - and if there is one, just add a pic or min-height.

Share this post


Link to post
Share on other sites

You can make the wrapper background image to have that green background and brown border included.

 

whiteroughtexture-with-green-column.jpg

 

Just download that image (above) and apply it to your #wrapper background.

 

Then you need to get rid of the background color and border-right for the #nav.

 

This will work regardless which column is shorter.

 

The image is only 20kb so no worries about slow download.

Edited by Eddie

Share this post


Link to post
Share on other sites

There's nothing wrong with what I said design-wise. It's not cutting any corners, using any bad code, or doing anything else objectable, its just a good way to sidestep the problem you're having.

 

But I like Eddie's solution, it's even easier than what I said - and you don't even have to make that image as high as it is (one or two pixels high would be enough) and can save even more on the size.

Share this post


Link to post
Share on other sites

There's nothing wrong with what I said design-wise. It's not cutting any corners, using any bad code, or doing anything else objectable, its just a good way to sidestep the problem you're having.

 

But I like Eddie's solution, it's even easier than what I said - and you don't even have to make that image as high as it is (one or two pixels high would be enough) and can save even more on the size.

 

You know! Just after sending that reply to you Andrea, I was driving down the highway to do some errands, and thinking: "Andrea is not stupid! I am!"

 

Then the real intent of your answer hit me: "OF COURSE YOU DUMB SWEDE, THE MAIN DIV GOES ON TOP OF THE GREEN!!"

 

Brilliant! and yes Eddie's is even more brilliant!

 

Thanks both of you, you clever devils...

 

Alfie

Share this post


Link to post
Share on other sites

Yes..we are brilliant in our own humble way.

 

It would have been nice if display: table and display: table-cell would work like the standard table cells thus the divs' height would be at the max of whatever div it's contained in....

 

<div id="content">

<div id="nav"></div>

</div>

 

CSS:

 

#content { display: table; }

 

#nav {display: table-cell: }

 

...or something like that.

 

Too bad.

Share this post


Link to post
Share on other sites

I wouldn't recommend cutting Eddie's image down to 1 or 2px, because then the texture on the right hand side won't repeat the same way. It could be cut down to half probably so that the top part fits in seamlessly with the bottom part.

Share this post


Link to post
Share on other sites

I wouldn't recommend cutting Eddie's image down to 1 or 2px, because then the texture on the right hand side won't repeat the same way. It could be cut down to half probably so that the top part fits in seamlessly with the bottom part.

 

Absolutely correct virtual. I tried an about 15px cut and it looks TOO repetitive.

 

I shall change it to the original "repeat" pattern which is about 100px high.

 

:clap:

 

Thanks so much for all your brilliant inputs!

 

Alfie

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...