Databases
StackOverflow2013
Postsdbo
POHow to align two div's horizontally, with container width in percent?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to align two div's horizontally, with container width in percent?
    primarykey
    data
    text
    <p>Question: </p> <p>I have the below HTML and want to have two divs horizontally next to each other.<br /> The left div should have the same height as the right div (or vice-versa if the left div's height is greater than the right div's height).<br /> The left div's size should be a fixed size in pixel, and the right div should expand to fill the container (no width to set), in this case 500px.</p> <p>I don't want to set a width on the second div, because ultimately, I want to set the wrapper's size as percent.</p> <p>With the HTML below, the second div goes below the first div. Can anybody tell me how to fix this according to my wishes (should work in IE 9, too) ?</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Index&lt;/title&gt; &lt;style type="text/css" media="all"&gt; #wrapper { width: 500px; /* or say, 25% */ border: 1px solid black; overflow: hidden; /* add this to contain floated children */ } #first { width: 100px; float:left; border: 1px solid red; } #second { border: 1px solid green; width: 400px; /* don't want this */ float: left; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="wrapper"&gt; &lt;div id="first"&gt; Test left &lt;br /&gt; Test left &lt;/div&gt; &lt;div id="second"&gt; Test right &lt;br /&gt; Test right &lt;br /&gt; Test right Auf der Registerkarte 'Einfügen' enthalten die Kataloge Elemente, die mit dem generellen Layout des Dokuments koordiniert werden sollten. Mithilfe dieser Kataloge können Sie Tabellen, Kopfzeilen, Fußzeilen, Listen, Deckblätter und sonstige Dokumentbausteine einfügen. Wenn Sie Bilder, Tabellen oder Diagramme erstellen, werden diese auch mit dem aktuellen Dokumentlayout koordiniert. Die Formatierung von markiertem Text im Dokumenttext kann auf einfache Weise geändert werden, indem Sie im Schnellformatvorlagen-Katalog auf der Registerkarte 'Start' ein Layout für den markierten Text auswählen. Text können Sie auch direkt mithilfe der anderen Steuerelemente auf der Registerkarte 'Start' formatieren. Die meisten Steuerelemente ermöglichen die Auswahl zwischen dem Layout des aktuellen Designs oder der direkten Angabe eines Formats. Wählen Sie neue Designelemente auf der Registerkarte 'Seitenlayout' aus, um das generelle Layout des Dokument s zu ändern. Verwenden Sie den Befehl zum Ändern des aktuellen Schnellformatvorlagen-Satzes, um die im Schnellformatvorlagen-Katalog verfügbaren Formatvorlagen zu ändern. Die Design- und die Schnellformatvorlagen-Kataloge stellen beide Befehle zum Zurücksetzen bereit, damit Sie immer die Möglichkeit haben, das ursprüngliche Layout des Dokument s in der aktuellen Vorlage wiederherzustellen. Auf der Registerkarte 'Einfügen' enthalten die Kataloge Elemente, die mit dem generellen Layout des Dokuments koordiniert werden sollten. &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USVladimir Starkov
    1. USStefan Steiger
    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. POHow to align two div's horizontally, with container width in percent?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow to align two div's horizontally, with container width in percent?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COCan an exact height be specified on the `#wrapper`?
      singulars
      1. POHow to align two div's horizontally, with container width in percent?
      1. USuınbɐɥs
    2. CO@Shaquin Trifonoff: Nope, height is unknown at compile & server-runtime.
      singulars
      1. POHow to align two div's horizontally, with container width in percent?
      1. USStefan Steiger
 

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