Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>This was actually really similar to my problem, although I didn't realize it:</strong></p> <p><img src="https://i.stack.imgur.com/DewaJ.gif" alt="enter image description here"></p> <p><strong>Separating the column content from it's background colour</strong></p> <p>The first step to solving the equal height problem is to break it into smaller pieces that can be solved separately. The way we do this is to use two divs for each column instead of one. The first div will be used to hold the content and the other will be used as the background colour. This separation gives us individual control over these elements plus we can put them together in a more useful way. This will all become clear shortly.</p> <p><strong>A floated container div will always be the height of it's floated contents</strong></p> <p>This is the central principle behind this equal column height method. The only way to make the height of a div equal to the tallest column is if that div contains all the columns. So to explain this another way, by placing the columns inside a container we cause the container to be the height of the tallest column. This is a very useful structure.</p> <p><img src="https://i.stack.imgur.com/ersyY.gif" alt="Container div explained"></p> <p><strong>Three column HTML div structure</strong></p> <p>In the example above the three content columns are inside a container div.</p> <pre><code>&lt;div id="container1"&gt; &lt;div id="col1"&gt;Column 1&lt;/div&gt; &lt;div id="col2"&gt;Column 2&lt;/div&gt; &lt;div id="col3"&gt;Column 3&lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>Three column CSS</strong></p> <p>And here is the CSS that forces the container div to the height of the longest column.</p> <pre><code>#container1 { float:left; width:100%; } #col1 { float:left; width:30%; background:red; } #col2 { float:left; width:40%; background:yellow; } #col3 { float:left; width:30%; background:green; } </code></pre> <p>For this structure to work correctly in all browsers the container div must be floated (left or right) plus each of the column content divs must also be floated, it does not matter which way. The process of floating the content divs makes them line up horizontally across the page. Floating the container makes it stretch down to the height of the tallest column inside. If we don't float the container then the content divs will stick out of the container at the bottom and the container won't have the correct height. Actually in this example the container will end up with a height of zero if it is not floated.</p> <p><strong>Adding extra nested containers</strong></p> <p>The next step to equal height columns is to add extra containers so they are nested inside each other. We need the same number of containers as we do columns - three. These three containers are going to be the backgrounds of each column. Notice that we have removed the background colours from the original columns and added them to the containers.</p> <p><img src="https://i.stack.imgur.com/qzohl.gif" alt="Initial layout"></p> <p><strong>Three column HTML div structure</strong></p> <p>The two extra containers have been added to the HTML below.</p> <pre><code>&lt;div id="container3"&gt; &lt;div id="container2"&gt; &lt;div id="container1"&gt; &lt;div id="col1"&gt;Column 1&lt;/div&gt; &lt;div id="col2"&gt;Column 2&lt;/div&gt; &lt;div id="col3"&gt;Column 3&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>Three column CSS</strong></p> <p>All the elements are floated to the left and the containers have a width set to 100% so they stay the full width of the page. The background colours have been removed from the content divs and added to the containers.</p> <pre><code>#container3 { float:left; width:100%; background:green; } #container2 { float:left; width:100%; background:yellow; } #container1 { float:left; width:100%; background:red; } </code></pre> <p><strong>Moving the containers into place with relative positioning</strong></p> <p>Using relative positioning we now move the containers to their new locations. When each container is moved the divs become visible below. It is the layering and position of the coloured containers that create the background of the equal height columns. The container2 div is moved to the left by 30% to reveal the green right-hand column and the container1 div is moved to the left 40% to reveal the yellow center column and at the same time the red section that is still visible becomes the left-hand column.</p> <p><img src="https://i.stack.imgur.com/MqebQ.gif" alt="Column colors"></p> <p><strong>The CSS relative positioning rules</strong></p> <p>Here is the added CSS lines showing the the addition of relative positioning.</p> <pre><code>#container2 { position:relative; right:30%; } #container1 { position:relative; right:40%; } </code></pre> <p><strong>Moving the content back into each column</strong></p> <p>The next thing to do is to move the content of each column back onto the page so that it aligns with the column background colour underneath. Again this is done with simple relative positioning.</p> <p><img src="https://i.stack.imgur.com/NDxrY.gif" alt="Content"></p> <p>And then finally we chop off the overhanging containers by adding an overflow:hidden; rule on the outermost container - container3.</p> <p><img src="https://i.stack.imgur.com/bWtcl.gif" alt="enter image description here"></p> <p>This is the initial layout where I will integrate my code in now: <a href="http://jsfiddle.net/2KXZm/">JFiddle example</a></p> <p>One thing which isn't solved in this JFiddle example is the separator. Currently I thought adding the separator as drop shadow to the content instead of aside. Which would be easier to create than another div.</p> <p>Source: <a href="http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks">Equal height columns cross browser css no hacks</a></p>
    singulars
    1. This table or related slice is empty.
    1. POProblems with html positioning - aside, footer, padding
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USArtur Käpp
    1. USArtur Käpp
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POProblems with html positioning - aside, footer, padding
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    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