CODEWITHSUNDEEP
htmlcss
user3501538
user3501538

Reputation: 25

css display table cell made right cell move down

<style>
    #middle .institutions
    {
       width:100%;
       display:table;
    }
    #middle .institutions .institution
    {
        width:100%;
        display:table-row;
    }
    #middle .institutions .institution .institution-image
    {
        display:table-cell;
        width:50%;
    }
    #middle .institutions  .institution .degree
    {
        display:table-cell;
        width:50%;
    } 
</style>
<body>
    <div id="middle">
        <div class="institutions">      
            <div class="institution">
                <div class="institution-image">
                    <img src="jntuk.png" ></img>
                </div>
                <div class="degree">
                    <p class="name">Rochester Institute of Technology</p>
                    <p>Master's - Information Technology</p>
                    <p>GPA:3.50</>
                    <a href="http://www.rit.edu" target="_new">www.rit.edu</a>
                </div>
         </div>
     </div>
</body>

i dont want to use floats for some reason. can some help me link for screenshot-https://drive.google.com/file/d/0B4FKXRWc2y_CTFRZQUhWZk9oUVU/view?usp=sharing

Upvotes: 1

Views: 1957

Answers (1)

Birgit Martinelle
Birgit Martinelle

Reputation: 1889

You can fix this by adding: vertical-align: top;

 #middle .institutions .institution .degree {
       display:table-cell;
       vertical-align: top;
       width:50%;
   }

Here's a link to a fiddle: http://jsfiddle.net/ayxg0x8j/

Upvotes: 2

Related Questions