Note that there are some explanatory texts on larger screens.

plurals
  1. POAvoid Items in List to shift
    primarykey
    data
    text
    <p>I am trying to create a dynamic unordered list that is built for 3 list items however there maybe either one or two items in that list. My problem is that when there are one or two items in UL my contents get shifted up. How can I avoid this ? </p> <p>HTML:</p> <pre><code> &lt;html&gt;&lt;head&gt; &lt;title&gt;Dashboard&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="wrapper"&gt; &lt;div id="colDow"&gt; &lt;div id="colLef"&gt; &lt;ul id="days"&gt; &lt;div id="colRig"&gt; &lt;ul class="format" id="schedule1"&gt; &lt;li&gt; Event 3&lt;/li&gt; &lt;li&gt;test this space&lt;/li&gt; &lt;li&gt;fit everthing and beyond&lt;/li&gt; &lt;/ul&gt; &lt;ul class="format" id="schedule2"&gt; &lt;li&gt; Event 3&lt;/li&gt; &lt;li&gt;test this space&lt;/li&gt; &lt;li&gt;fit everthing and beyond&lt;/li&gt; &lt;/ul&gt; &lt;ul class="format" id="schedule3"&gt; &lt;li&gt; Event 3&lt;/li&gt; &lt;li&gt;test this space&lt;/li&gt; &lt;li&gt;fit everthing and beyond&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!-- Bottom Right Time --&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code> body { padding:0; margin:0; background-color:#000; font-size:100%; } #wrapper { margin-left:auto; margin-right:auto; width:100%; height:100%; max-width:2560px; max-height:1440px; } #colDow { width:55.46%; /* 710/1280 */ float:left; height:88.75%; /* 710/800 */ } #colLef { width:35.21%; /* 250/710 */ float:left; height:100%; } #days { list-style-type:none; padding-left:0px; } #days li { font-size:2.25em; color:#fff; font-family:'Lato',sans-serif; font-weight:lighter; margin:0 0 168px; background:#575757; display:block; text-align:center; height:40px; margin-top:6px; margin-bottom: 168px; } #colRig { /* background:#fff; */ width:63.09%; float:right; height:100%; } .format { /* background:red; */ margin-top: 46px; padding-bottom: 6px; } .format li { color:#fff; font-family:'Lato',sans-serif; font-weight:lighter; font-size:1.5em; /* font-size: 1.846em; */ height: 52px; } </code></pre> <p>If you remove the first occurrence of "Event3" items get shifted up</p>
    singulars
    1. This table or related slice is empty.
    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.
 

Querying!

 
Guidance

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