 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / February 2008set two div to same height?
Hi, I am used to use <table> <tr> <td> to do my html layout. As it is considered an old technology, I am trying to understand how div and css works. Here are some simple questions(maybe pretty silly to you guys). I have a div container contains two divs side by side, How can I set the height of the short one to the same height of the taller one? #container { FLOAT: left; WIDTH: 540px } #left-column { FLOAT: left; WIDTH: 49%; } #right-column { FLOAT: right; WIDTH: 49%; } ------------------ <div id=container> <div id=left-column> </div> <div id=right-column> </div> </div> Another question, How can I extend an inside to the height of its container? thanks in advance In article <13a9a729-70d4-4975-81dc-00f1f4f4c1e1@p25g2000hsf.googlegroups.com>, > Hi, > [quoted text clipped - 5 lines] > I have a div container contains two divs side by side, How can I set > the height of the short one to the same height of the taller one? The short answer is that you can't make both columns the same _actual_ height, but you can make them _appear_ to be the same height, which is often just as good. This gets asked at least once a week here, so you could try searching the group in Google to see what has been suggested in the past. Alternatively, you could browse through my own tests of different approaches at: http://www.chem.utoronto.ca/~dstone/twocol/ Let me know if anything is incorrect or doesn't work! PS: if you view the source for the index page and scroll down the bottom, there's a bunch of links in a comment that have yet to make it onto their own links page; you may well find those useful, since I did! In article <13a9a729-70d4-4975-81dc-00f1f4f4c1e1@p25g2000hsf.googlegroups.co m>, > Hi, > [quoted text clipped - 5 lines] > I have a div container contains two divs side by side, How can I set > the height of the short one to the same height of the taller one? ... > Another question, How can I extend an inside to the height of its > container? You might find some help at <http://netweaver.com.au/floatHouse>. In particular, page 8, 9 and 10.  Signaturedorayme > In article > <13a9a729-70d4-4975-81dc-00f1f4f4c1e1@p25g2000hsf.googlegroups.co [quoted text clipped - 16 lines] > You might find some help at <http://netweaver.com.au/floatHouse>. > In particular, page 8, 9 and 10. Also, check out dorayme's example at: http://netweaver.com.au/alt/equalColsSimpleTactic.html It uses a neat trick to make it -appear- that all three columns are equal height without the requirement to pre-define height values. Therefore, the columns will grow in height with content growth or text resizing. You can trim the design back to just two columns if desired. It's implemented with css-only and is a good starting point to illustrate the concepts from page 10 of dorayme's FloatHouse. Some others to check out: Another css-only approach without the restriction of which column must be the tallest. It's a bit more complex to follow: http://www.bergamotus.ws/samples/2column-stretch-with-borders.html A generalized approach using Javascript: http://websiterepairguru.com/test_full_height_columns.html SignatureArt > > In article > > <13a9a729-70d4-4975-81dc-00f1f4f4c1e1@p25g2000hsf.googlegroups.co > > m>, ... > >> I have a div container contains two divs side by side, How can I set > >> the height of the short one to the same height of the taller one? [quoted text clipped - 12 lines] > ... the columns will grow in height with content growth or text > resizing. You can trim the design back to just two columns if desired. The big caveat here is in the headings above the columns in the last url quoted. So we need to be careful about saying "will grow in height". This simple tactic, to be seen, I am sure, in many designs, is surprisingly practical. One sometimes *does* know that in the majority of ones pages, the nav col is shorter than content col. A fix for those few pages where the content is hardly anything is to put in a minimum height for the content box (globally in the css). If you know, for example, that the nav was not more than 35ems high, this figure will be fine and not so big as to cause unnecessary scrolling or uglinesses on the short pages. If later, one finds a surprisingly big change in the website requirements where the situation is not so clear about heights, then, needless to say, one needs to use other tactics. In a very large number of websites, my experience is that they don't much change for years on end! Signaturedorayme |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.