Databases
StackOverflow2013
Postsdbo
POIssue with DIV alignment, 3 Divs same line horizontally
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIssue with DIV alignment, 3 Divs same line horizontally
    text
    copied!<p>I am trying to improve my CSS skills and am having some trouble. I want align 3 DIVs on the same row, starting at the top of the container div. I was able to get them aligned horizontally, but they are not displaying at the top. It seems they are all aligning with the bottom which I can't figure out. Can anybody point me in the right direction as to how to make the divs have no margin and (float?) to the top? </p> <p>I tried declaring the margins but didn't have much luck. Also, this is going to be in a partial view through MVC so setting the container to absolute may not be an option because it's height from the top of the page will be changing. </p> <p>Here is a <a href="http://jsfiddle.net/3Xygz/" rel="nofollow noreferrer">JFIDDLE</a> and I have also attached my code, both HTML and CSS, along with what is being rendered in my browser. </p> <p>Thanks!</p> <p>HTML:</p> <pre><code>&lt;fieldset&gt; &lt;legend&gt;Items&lt;/legend&gt; &lt;div class="outercontainer" id="top"&gt; &lt;div class="containera"&gt; &lt;div class="group-title"&gt; &lt;input type="checkbox" runat="server" /&gt; &lt;/div&gt; &lt;div class="left item"&gt;Left Content&lt;/div&gt; &lt;div class="center item"&gt;Center Content&lt;/div&gt; &lt;div class="right item"&gt;Right Content&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="outercontainer" id="bottom"&gt; &lt;div class="containera"&gt; &lt;div class="group-title"&gt; &lt;input type="checkbox" runat="server" /&gt; &lt;/div&gt; &lt;div class="left item"&gt;Left Content&lt;/div&gt; &lt;div class="center item"&gt;Center Content&lt;/div&gt; &lt;div class="right item"&gt;Right Content&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/fieldset&gt; </code></pre> <p>CSS:</p> <pre><code>#top { border: 3px solid green; } #bottom { border: 3px solid blue; } .item { position:relative; display: inline-block; *display: inline; zoom: 1; margin:0; top:0; width: 32%; color: white; } .left { background:red; } .right { background:blue; } .center { background:green; } .containera { text-align: center; white-space: nowrap; } .group-title { text-align:center; font-weight:bold; font-size:larger; } .group-title2 { text-align:center; width:100%; } </code></pre> <p>Below is what is being rendered:</p> <p><img src="https://i.stack.imgur.com/d51hI.jpg" alt="What is actually being diaplayed"></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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