Sizing div? - Socoder

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|636\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
Socoder -> Web Development -> Sizing div?
Tue, 15 Mar 2011, 02:17
Afr0	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: div.menu { width: 150px; height: 1630px; border-style: solid solid solid solid; border-color: #D76100; border-size: 1px; border-width: 1px; } --v Here is my CSS: @charset "windows-1252"; /Navigation menu/ div.menu { width: 150px; height: 1630px; border-style: solid solid solid solid; border-color: #D76100; border-size: 1px; border-width: 1px; } div.menu li { list-style:none; margin:0px; padding: 0px; } div.menu li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; } div.menu a:link, div.menu a:visited { color: #9E3C02; display: block; background: url(images/menu4.gif); padding: 8px 0 0 30px; } div.menu li a:hover { color: #fff; background: url(images/menu4.gif) 0 -32px; padding: 8px 0 0 30px; } div.menu li a:active { color: #fff; background: url(images/menu4.gif) 0 -64px; padding: 8px 0 0 30px; } /Magazine menu/ div.magmenu { padding-left: 300x; border-style: solid solid solid solid; border-color: #D76100; border-size: 1px; border-width: 1px; } div.magmenu li { list-style:none; margin:10px; padding:10px; } --v This looks good; But I don't want to have to hardcode the value!! My HTML: <html> <!-- Created on: 14.03.2011 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Boligmagasinet</title> <meta name="description" content=""> <meta name="keywords" content="bolig agder vennesla grafisk partner"> <meta name="author" content="Mats Vederhus> <meta name="generator" content="AceHTML Freeware"> <img src="Boligmagasinet - headding.jpg"> <link rel=stylesheet href="style.css"> </head> <body> <table> <td> <div class="menu"> <ul> <li><a href="index.html">Hjem</a></li> <li><a href="about.html">Om oss</a></li> </ul> </div> </td> <td> <p>Velkommen til hjemmesiden for boligmagasinet!</p> </td> <!--Magazine menu--> <td> <div class="magmenu"> <ul> <li><a href="test.html"><img src="test.jpg"></a></li> <li><a href="test.html"><img src="test.jpg"></a></li> <li><a href="test.html"><img src="test.jpg"></a></li> </ul> </div> </td> </table> </body> </html> --v -=-=- Afr0 Games Project Dollhouse on Github - Please fork!
Tue, 15 Mar 2011, 02:26
Jayenkai	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!''
Tue, 15 Mar 2011, 02:31
JL235	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\|
Tue, 15 Mar 2011, 02:50
Afr0	What's wrong with tables?
Tue, 15 Mar 2011, 03:22
JL235	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.
Tue, 15 Mar 2011, 13:30
HoboBen	You can give an html element two classes: div.menubox { width: 150px; height: 1630px; } div.menu1 { background-color: #CCF; } div.menu2 { background-color: #CFC; } <div class="menubox menu1"> blah blah </div> <div class="menubox menu2"> blah blah </div> --v Would that help? -=-=- blog \| work \| code \| more code
Tue, 15 Mar 2011, 14:28
dizi	If you were using flat colours rather than a border you could have used the faux column technique: https://www.ehow.com/how_4488586_install-faux-columns.html 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