Databases
StackOverflow2013
Postsdbo
POWhat's a cross-browser compatible way to right-align child divs and make the parent div get its width from the children?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhat's a cross-browser compatible way to right-align child divs and make the parent div get its width from the children?
    primarykey
    data
    text
    <p>I have a bunch of child <code>&lt;div&gt;</code>'s of variable width, which I want to right-align within a parent . I also want the parent <code>&lt;div&gt;</code> to be no wider than it needs to be to contain the children. (I don't know in advance how wide the children will be -- they'll contain dynamically generated content.)</p> <p>Here's an example that works correctly in IE 8.0 but not in Firefox 3.5 (child <code>&lt;div&gt;</code>'s aren't right-aligned):</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;style type="text/css"&gt; #parentDiv{float:left; text-align:right; background-color: gray;} .childDiv{clear:both; border: 1px solid black; background-color: white;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="parentDiv"&gt; &lt;div class="childDiv" style="width: 25px"&gt;&amp;nbsp;&lt;/div&gt; &lt;div class="childDiv" style="width: 50px"&gt;&amp;nbsp;&lt;/div&gt; &lt;div class="childDiv" style="width: 100px"&gt;&amp;nbsp;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>If I add <code>float:right</code> to the childDiv's CSS, then it works in Firefox 3.5 but not in IE 8.0 (parentDiv's width is no longer determined from the width of its children).</p> <p>Is there a way I can get the desired behavior in all major browsers?</p> <p>UPDATE: Apparently the adding float:right to the child divs only produces the error in IE when I'm hosting the page in my IIS localhost. (Which is what I was originally doing.) Perhaps this is an issue with some IIS setting? I'm running IIS 6.0</p> <p>UPDATE #2: So it turns out IIS 6 was causing the page to load in IE7 Standards mode. So the above code (with <code>float:right</code> added to the child divs) works for IE8 and Firefox, but apparently not for IE7.</p> <p>I guess that makes the question: Is there a simple way to make this work in IE7? (Besides just using a conditional comment or CSS hack to load a different stylesheet in IE7, I mean.)</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USTim Goodman
    1. USTim Goodman
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POWhat's a cross-browser compatible way to right-align child divs and make the parent div get its width from the children?
      1. USslugster
      1. VTFavorite
    2. VO
      singulars
      1. POWhat's a cross-browser compatible way to right-align child divs and make the parent div get its width from the children?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POWhat's a cross-browser compatible way to right-align child divs and make the parent div get its width from the children?
      1. This table or related slice is empty.
      1. VTUpMod
    1. CO... so you want/need the parent element's width to be determined/controlled by the width of the children? So the parent should only be as wide as the widest child element, irrelevant of the width CSS properties applied to said child element... ?
      singulars
      1. POWhat's a cross-browser compatible way to right-align child divs and make the parent div get its width from the children?
      1. USRichard JP Le Guen
    2. CORight. In this example it looks like I can just apply "width: 100" to the parent, but for the real project I'm working on I have children being generated dynamically so I don't know in advance what their width will be.
      singulars
      1. POWhat's a cross-browser compatible way to right-align child divs and make the parent div get its width from the children?
      1. USTim Goodman
    3. CODo you have any constraints about the _positioning_ of the parent? Making the parent float might help, depending on the constraints. Let me know and I'll post my full answer.
      singulars
      1. POWhat's a cross-browser compatible way to right-align child divs and make the parent div get its width from the children?
      1. USRichard JP Le Guen
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload