Making two divs equal in length

[Julliet]

I have one div overlaying another div as follows:

div.container { position: relative; min-height: 100%; margin:0; padding:0; background:url('http://www.scratchprogramming.org/img/book.png'); background-repeat:no-repeat; background-attachment:fixed; background-position: 62% 70%; overflow:hidden; }

div.content { position: absolute; min-height: 100%; margin:0; padding:0; top: 0; left: 0; width:100%; z-index:10; overflow:hidden; }

My html starts out like this:

`<div class="container">
  <p>
    <img src="img/Scratchcat.png" alt="cat" />
  </p>
</div>

<!--container-->`

<div class="content"> 

Now I had to set the height on the cat image really long so that the background image in the container (book.png) will fill the content area. The problem is when testing on different browsers..somtimes the book.png background goes over the content length, leaving a couple of inches extra on the bottom. Is there any way I can make the content and container height the same using css and not having to play around with the image height ? Here is the working example: http://www.scratchprogramming.org Thanks, Julliet

[Paulie_D]

Is there any way I can make the content and container height the same using css and not having to play around with the image height ?

Not without JS I’m feeling.

At looking at the code (HTML) something just doesn’t sit right…I’m absolutely NOT saying that it’s wrong…it’s just that it seems wrong to me.

I’m honestly not sure what it is…perhaps it’s that the cat image is currently ‘content’ when, to my eyes it really isn’t and could be solved another way.

I’d have to think.

Oh…and you should really look into a ‘Sticky Footer’.

[Larsinho]

Maybe you could wrap the divs styled with ‘display: table;’ and give each inner div ‘display: table-cell;’?

[Paulie_D]

Maybe you could wrap the divs styled with ‘display: table;’ and give each inner div ‘display: table-cell;

Not sure that will work in this instance…but who knows?

I have an aversion to display:table etc…it just seems wrong these days. I know there is nothing intrinsically wrong with it…it just seems seems to hark back to the old ways of doing things.

[Julliet]

How would i do it with JS Pauline?

[Paulie_D]

That’s Paulie. LOL

With JS/JQ there is a plug-in that determines the height of two divs with the same class, works out which one is tallest and adjusts the height accordingly.

However, I’m thinking that this is a brute force approach to something that should be solvable another way. There should be no need to have the cat image that large when, as far as I can tell, all that is happening is that it’s being moved (by JS anyway?).

I mean it’s not as though it’s required to scale at all.

[Julliet]

I saw this solution, I am playing around with it now : Similar situation…

[Julliet]

The above solution worked. Thanks for the responses.

[Author]

Posts