CODEWITHSUNDEEP
htmlcsswidthtransition
Jonathan
Jonathan

Reputation: 167

Css width transition pushes things the wrong way

So I'm making a Contact Us page for my department, and I had an idea for it where our pictures would be displayed small next to our contact information, but would grow to a more easily viewed size on hover. I got the transition set up alright, but it pushes the person below it to the right as it expands instead of down. I think it would look better if the person below was simply pushed down, but none of the css tricks I've tried so far have worked.

So far I've tried making each contact a div that takes up 100% of their containers, I've also tried "display:block;" even though I'm pretty sure divs are already displayed as block. I've put the css and some sample divs in this JsFiddle. If you have any suggestions for something I could do to make it work please let me know.

Here's the code:

<div class="contact2">
<h3>Name Here</h3>
<img src="http://openclipart.org/people/naught101/ProfilePlaceholderSuit.svg" alt="" />
<div>
<strong>Title: </strong>Area IT Director <br /> 
<strong>Phone: </strong>555-5555  <br /> 
<strong>Email: </strong><a href="mailto:[email protected]">[email protected]</a></div>
</div>
<div class="contact2">
<h3>Name Here</h3>
<img src="http://openclipart.org/people/naught101/ProfilePlaceholderSuit.svg" alt="" />
<div>
<strong>Title: </strong>Technician III <br /> 
<strong>Ext: </strong>555-5555 <br /> 
<strong>Email: </strong><a href="mailto:[email protected]">[email protected]</a></div>
</div>


.contact2{
margin-left: 30px;  
width: 100%;
display: block;
}

.contact2 strong{
color: #4d7123;
}

.contact2 img{
height: 50px;
float: left;
margin-right: 20px;
-moz-transition: height 1s;
-webkit-transition: height 1s;
-o-transition: height 1s;
transition: height 1s;

}

.contact2 img:hover{
height:100px;
}

Upvotes: 1

Views: 926

Answers (1)

Brian Phillips
Brian Phillips

Reputation: 4425

Use clear: left

.contact2{
    clear: left;
    margin-left: 30px;  
    width: 100%;
    display: block;
}

jsfiddle

clear essentially "clears" elements from the position you specify. It's useful whenever you're dealing with float elements, as they can often act a bit unexpected.

Upvotes: 1

Related Questions