ansaurus

Question

can't get two div's to be of equal height!

Answer 1

+1 A:

change the height of both divs to be the same

   <div class="announcement" style="position: relative; width: 728px; height: 200px;">  <!--This is the containing div position: relative to flow in sequence with the rest of the page.-->


   <div class="announcement" style="position: relative; width: 728px; height: 200px;">  
   <div style="position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure;">
position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border; (no height)
   </div>

for example will fix the height of this div no matter if there is one line in the div or 5 lines or whatever this height will remain the same.

PK

Pavan 2010-10-05 02:29:21

@Pavan, please have a read of the [editing help](http://stackoverflow.com/editing-help) to learn how to format your code.

David Thomas 2010-10-05 03:00:58

thank you for your time in helping me improve myself. could you please tell me exactly what i need to do? i had a look at your link but i was clueless in terms of what i need to do? do i put <strike>html code</strike> if i want html code to appear? sorry i dont understand

Pavan 2010-10-05 03:10:19

@Pavan: Just select your code and use the 1010 code formatting button right above the edit area.

casablanca 2010-10-05 03:12:55

ive done that already thats why my code is in code format?

Pavan 2010-10-05 03:13:38

@Pavan; no, it wasn't. It's in code format because I formatted it, it was plain text and assorted mark-up before that (though clearly you've since edited it). As for explaining, that's why I pointed you to the resource. It's far more clear than us explaining all the options in comments. However, in addition to @casablanca, select your code and use `ctrl`+`K`. **or** indent each line of code by **at least** four spaces in the editor. In-line code can be marked as code by using the back-ticks to prepend and append it: ```

David Thomas 2010-10-05 03:23:06

oh right. i thought i had to do some special coding. but thats fine maybe in this one i missed out. Otherwise you wouldnt have pointed it out. so thats fine then. I have edited the post. and reselected the code and formatted it. hopefully it is ok now. thank you for the heads up david

Pavan 2010-10-05 03:27:16

oh so you formatted it for me! That's why when i went to edit the post it was alrady in the correct format and i thought that i had done it. A face palm moment.

Pavan 2010-10-05 03:29:03

@Pavan; no worries, though you should -at some point- get a notification about your answer having been revised. One of the benefits, and purposes, of this wiki-like system is so that others can lend a hand to correct things if they're not quite right.

David Thomas 2010-10-05 04:00:43

Answer 2

A:

You didn't, so far as I can tell, attempt (or implement) the faux-columns technique you linked to in your question, however because there's no way of forcing, with css, two siblings to maintain the same height without explicitly defining a height, and since you're already using jQuery, I've come up with this cludgy and not-really-portable approach:

    $('#container1 > div').each(
      function(){
        if ($(this).height() > $(this).next().height()){
          $(this).next().css('height',$(this).height());
        }
        else {
          $(this).css('height',$(this).next().height());
        }

      });

It's over at JS Bin for your perusal.

David Thomas 2010-10-05 03:20:10

thats smart! thanks

samwick 2010-10-05 03:23:45

only drawback is that it is adding lot of empty space before the footer. I think that is because container1 has 3'rd div that takes care of the clear both

samwick 2010-10-05 03:28:19

@samwick, then try using something else to provide the `clear`, a `<hr />` for example does the job and takes up minimal space. It actually looks okay if you just take out the clearing-divs.

David Thomas 2010-10-05 03:33:43

ansaurus

tags:

views:

answers:

can't get two div's to be of equal height!

related questions