Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 08-05-2010, 03:28 AM   PM User | #1
pupcl
New to the CF scene

 
Join Date: Aug 2010
Location: Los Angeles, California, U.S.
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
pupcl is an unknown quantity at this point
Div stretching

Hello, I am new to the forums. I am in the making of a website, and am using divs.

I know that div layout boxes stretch depending on the content placed in them, but I have two content boxes that need to be the same length.

I'd like to know how I can make both boxes at the same height, constantly, not depending on if the have the same amount of content.

My site is http://ghost.sporatic.net/ if you would like to look and see the two low content boxes.
pupcl is offline   Reply With Quote
Old 08-05-2010, 04:59 AM   PM User | #2
djh101
Regular Coder

 
djh101's Avatar
 
Join Date: May 2009
Location: Santa Clarita
Posts: 603
Thanks: 48
Thanked 63 Times in 63 Posts
djh101 is an unknown quantity at this point
Try specifying them with the same width in css:
div1{width: 50%;}
div2{width: 50%;}
or
div1{width: 100px;}
div2{width: 100px;}

As for height, I think there's a way to do that, but you shouldn't just specify an exact height, especially if your height is going to change (if you specify 100px for your height and the content goes past that, it won't look right). Sorry, I'm not that good at styling, but know one else was answering so I thought I'd try my best to.
__________________
"Yeah science!"
Online Science Tools
djh101 is offline   Reply With Quote
Old 08-05-2010, 05:07 AM   PM User | #3
Aple
New Coder

 
Join Date: Aug 2010
Posts: 20
Thanks: 0
Thanked 0 Times in 0 Posts
Aple is an unknown quantity at this point
http://www.alistapart.com/articles/fauxcolumns/

You can make a background image that stretches for a containing div.

HTML:
Code:
<div id="container">
  <div class="one">1</div>
  <div class="two">2</div>
</div>
CSS:
Code:
#container {
  background:url(vert-columns.jpg) repeat-y;
}
Edit: There are also jQuery plugins for this if you'd just like to set a min-height on your left div rather than using the faux-columns solution.
http://www.cssnewbie.com/equal-heigh...s-with-jquery/
http://www.filamentgroup.com/lab/set...s_with_jquery/

Last edited by Aple; 08-05-2010 at 04:09 PM.. Reason: Remembered something.
Aple is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 01:14 AM.


Advertisement
Log in to turn off these ads.