Databases
StackOverflow2013
Postsdbo
POMaking two side by side div's heights equal
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMaking two side by side div's heights equal
    primarykey
    data
    text
    <p>So i'm comming from table design webpages and thought i'd give div and CSS a try, so I hope you can help me on this.</p> <p><strong>Situation:</strong></p> <p>I currently have the following div structure:</p> <pre><code>&lt;div id="header"&gt; &lt;div id="headline"&gt; &lt;/div&gt; &lt;div id="login"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div style="clear: both;" /&gt; &lt;div id="mainbody" style="border-top: black solid 2px;"&gt; &lt;div id="menu"&gt; &lt;/div&gt; &lt;div id="bodyContent"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div style="clear: both;"&gt;&lt;/div&gt; &lt;div id="footer"&gt;&lt;/div&gt; </code></pre> <p>And I have the following CSS coding:</p> <pre><code>#mainbody { background-color: white; width: 1000px; margin-left: auto; margin-right: auto; } #menu { width: 137px; float: left; background-color: #EEEEEE; padding-left: 3px; } #bodyContent { float: right; width: 850px; background-color: white; padding: 5px; } #headline { width: 693px; height: 75px; float: left; background-color: white; font-family: monospace; font-size: 48pt; font-weight: bold; padding-left: 7px; } #login { height: 75px; width: 300px; float: right; background-color: white; } #header { background-color: white; width: 1000px; margin-left: auto; margin-right: auto; } #footer { border-top: black solid medium; width: 1000px; background-color: white; margin-left: auto; margin-right: auto; height: 50px; } </code></pre> <p><strong>Problem:</strong></p> <p>The "menu" and "bodyContent" divs have different heights through out my pages. So if i have a fairly large "bodyContent" page, the "menu" div will not go all the way down to the "footer" div. The same problem exists if the "menu" div is higher than "bodyContent" div.</p> <p>I would like for both "menu" and "bodyContent" divs to have the same height/go down to the footer div.</p> <p>I have tried looking for solution but the so far haven't got any result that i was expecting. I'm hoping you guys can help me on this.</p> <p>Thanks</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USevilfish
    plurals
    1. PL
      singulars
      1. LTLinked
    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. POMaking two side by side div's heights equal
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POMaking two side by side div's heights equal
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POMaking two side by side div's heights equal
      1. USKrzysztof Trzos
      1. VTFavorite
    1. This table or related slice is empty.
 

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