Databases
StackOverflow2013
Postsdbo
POColumns arrangement in CSS dependent on target-device
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POColumns arrangement in CSS dependent on target-device
    primarykey
    data
    text
    <p>I am currently working on a website that has to be fully responsive and accessable on different devices (desktop, mobile etc...). I want to have only one html-markup and I am working with media queries to achieve different type of layouts.</p> <p>It's important to me to have a clean markup so let's start. To make things easier I remove all unnecessary stuff. I have a list of articles(-tags). The content of each article is VARIABLE so I can't determine a fixed height. My goal is to arrange these sections based on the device. So for example:</p> <p>1) On a mobile device there is only 1 column and all sections are below each other.</p> <p>2) On a tablet I want to have 2 columns, so 2 articles are next to each other (see the images below).</p> <p>3) On a desktop I want to have 3 columns...</p> <p>My markup looks like this and is aware of any presentational stuff like colums etc. If I had included columns into the markup (extra markup e.g. with column-divs) I would not have any chance to change the layout based on the target device. This means I would have fixed the layout/presentation at "markup-time".</p> <pre><code>&lt;article&gt; &lt;h1&gt;Header&lt;h1&gt; &lt;p&gt;Some text...&lt;/p&gt; &lt;/article&gt; &lt;article&gt; &lt;h1&gt;Header&lt;h1&gt; &lt;p&gt;Some text...&lt;/p&gt; &lt;/article&gt; &lt;article&gt; &lt;h1&gt;Header&lt;h1&gt; &lt;p&gt;Some text...&lt;/p&gt; &lt;/article&gt; &lt;article&gt; &lt;h1&gt;Header&lt;h1&gt; &lt;p&gt;Some text...&lt;/p&gt; &lt;/article&gt; &lt;article&gt; &lt;h1&gt;Header&lt;h1&gt; &lt;p&gt;Some text...&lt;/p&gt; &lt;/article&gt; </code></pre> <p>I am not beginner at all working with CSS: I tried nearly everything the last few days.</p> <p>So how can I arrange the articles in a typical 2 column layout? I would be very easy if every article is of the same height. 1 Column is also no problem at all. 3 Columns are even harder to implement than 2 columns.</p> <p>The desired layout for 2 columns is like so:</p> <p><a href="http://oi44.tinypic.com/2djyrli.jpg" rel="nofollow noreferrer">desired layout with 2 columns http://oi44.tinypic.com/2djyrli.jpg</a></p> <p>But I do get this result when working with floats (float: left)</p> <p><a href="http://oi43.tinypic.com/2rw6qtk.png" rel="nofollow noreferrer">float with left http://oi43.tinypic.com/2rw6qtk.png</a></p> <p>ms-grid and flexbox are no alternatives due to the lack of support in older browsers (that I have to support).</p> <p>Best thanks in advance!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMichael Huber
    1. USMichael Huber
    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
    1. This table or related slice is empty.
    1. COWhat is your question? How to vary the output based on the browser being used? Or simply how to make 2-column or 3-column output? I don't know what `ms-grid` or `flexbox` are, but how about [Yahoo UI](http://yuilibrary.com/)? It's always worked well for me.
      singulars
      1. POColumns arrangement in CSS dependent on target-device
      1. USdg99
    2. COwithout flexbox, CSS can't handle these sorts of nuances. This is why projects such as [jQuery Masonry](http://masonry.desandro.com/) exist.
      singulars
      1. POColumns arrangement in CSS dependent on target-device
      1. USzzzzBov
    3. COIt doesn't make fun at all to work with CSS. It's a shame what the industry of browser-development has done over the years. We are in 2013 now and there aren't any technologies that cover the basic layouting AND work in all currently used browsers. I was wondering how many economic loss there is to hack all the non-standard browser stuff.
      singulars
      1. POColumns arrangement in CSS dependent on target-device
      1. USMichael Huber
 

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