-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0|535|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
Socoder -> Web Development -> Sizing div?

Posted : Tuesday, 15 March 2011, 02:17
Is there any way to make a div be the size of another div in CSS? Without using PHP, that is.

Right now I've hardcoded the height of my left-hand div:

Here is my CSS:

This looks good;

But I don't want to have to hardcode the value!!


Afr0 Games

Project Dollhouse on Github - Please fork!
Posted : Tuesday, 15 March 2011, 02:26
Only if you put the two inside another div.
You'd basically have WholeDiv, and then that contains LeftDiv and RightDiv..

You stretch WholeDiv using RightDiv, (because Right's inside Whole) and then make LeftDiv "100%", which would be the size of WholeDiv, because that's the size of RightDiv!

(* but, you know, I'm shit at this, and will happily fall back on tables at every possible opportunity, so probably best not to listen to me!! I'm assuming this is what happens, but am probably wrong.. Either way, it'll still fuck up with IE )

''Load, Next List!''
Posted : Tuesday, 15 March 2011, 02:31
I'm not sure if this would work, but you could place the second within the first and give it width and height 100%.

Then use relative position or margins to move it out from it's parent div, so it sits below or next to it.

Btw use '@charset "utf-8";' instead of windows.

|edit| And for the love of god, DON'T USE TABLES! |edit|

PlayMyCode.com - build and play in your browser, Blog, Twitter.
Posted : Tuesday, 15 March 2011, 02:50
What's wrong with tables?
Posted : Tuesday, 15 March 2011, 03:22
Creates larger pages that take longer to download, are less efficient for the browser to render, harder to style and much harder to maintain.

I recently worked on revamping a website which used heavy amounts of tables. Pretty much all of the table code just had to be deleted and re-built from the ground up. The non-table code could just be tweaked and restyled.

Another thing is that with non-tables it is much easier to re-use the same HTML on two or more parts of the site. Any differences can be overcome with different CSS. I have done this in practice where the same HTML is laid out in an entirely different format, and as a result it saved me time!

There is a reason why all proper web developers advise against using tables for anything other then table-oriented data.

PlayMyCode.com - build and play in your browser, Blog, Twitter.
Posted : Tuesday, 15 March 2011, 13:30
You can give an html element two classes:

Would that help?


Posted : Tuesday, 15 March 2011, 14:28
If you were using flat colours rather than a border you could have used the faux column technique:

if its a fixed width I guess you could cheat a little and have a wrapper with your two columns in it using the faux column tutorial described in the link, give each a border at the top. then have a second div after that with an image in that is simply the bottom lines for both your columns to finish it off.

hope that makes some sort of sense, if not let me know and I'll do a coded example