 |
 | 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 / July 2008Adapt width of DIV to content
Hi! I have a HTML table which width will vary (since it's dynamically built). Above the table I want to align a select box with the table's right edge. A simple solution is to add an extra row (and use colspan) and put the select box there. Is it possible to solve the problem using a container DIV and CSS? My idea is to use a container DIV to hold both the select box and the table. The table will always be wider than the select box. If it is possible to set the width of the DIV to adapt to the width of the table, then the problem is solved since it's easy to right align the input box to the DIV. Thanks! > Hi! > [quoted text clipped - 6 lines] > > Is it possible to solve the problem using a container DIV and CSS? You need to give the DIV shrink-to-fit width, which you can get by giving it display: inline-block, display: table, display: table-cell or float: left. Float: left is probably the most widely supported. > My idea is to use a container DIV to hold both the select box and the > table. The table will always be wider than the select box. If it is > possible to set the width of the DIV to adapt to the width of the > table, then the problem is solved since it's easy to right align the > input box to the DIV. Are you putting the select box in the div too? Then you could float the table to get it to the left of the select. But the select will end up below the table if there isn't enough horizontal room. > You need to give the DIV shrink-to-fit width, which you can get by > giving it display: inline-block, display: table, display: table-cell or > float: left. Float: left is probably the most widely supported. This worked just fine in FF but not in IE7 (both Windows). Is it possible to get it to work in most browsers? > Are you putting the select box in the div too? Then you could float the > table to get it to the left of the select. But the select will end up > below the table if there isn't enough horizontal room. The select box is above the table inside the same container div. >> You need to give the DIV shrink-to-fit width, which you can get by >> giving it display: inline-block, display: table, display: table-cell or >> float: left. Float: left is probably the most widely supported. > > This worked just fine in FF but not in IE7 (both Windows). Is it > possible to get it to work in most browsers? I thought IE7 did support float up to a point, but I can't really help you as I'm not familiar with many of its bugs and quirks. Another problem is that the div should be horizontally centered on the page. I use margin-left: auto; margin-right: auto; to accomplish that but adding the rules you suggested makes the div left aligned. > Another problem is that the div should be horizontally centered on the > page. I use margin-left: auto; margin-right: auto; to accomplish that > but adding the rules you suggested makes the div left aligned. You're out of luck then-- you can't centre a float and IE doesn't support display: table. See also: http://netweaver.com.au/alt/shrinkToFitCentring/centeringShrinkToFit.html dorayme may have a more up-to-date URL, I thought I remembered seeing more about centring somewhere. Anyway that URL still works. > > Another problem is that the div should be horizontally centered on the > > page. I use margin-left: auto; margin-right: auto; to accomplish that [quoted text clipped - 9 lines] > dorayme may have a more up-to-date URL, I thought I remembered seeing > more about centring somewhere. Anyway that URL still works. Yes, I won't move that one. It is just that it is also nearly identical to page 4 of another more comprehensive piece I made on centring: <http://netweaver.com.au/centring/>  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.