CODEWITHSUNDEEP
htmlcss
David Lytle
David Lytle

Reputation: 145

Align two div's side by side

I'm attempting to place two elements side by side as opposed to stacked. I'm sure this a fairly simple fix but, being new to coding, I can't seem to figure it out. Secondly, if you notice with the social icons, I can't seem to figure out why the "Twitter" icon will not acknowledge the link. The other 3 do but, Twitter will not. Incidentally, my content area is 950px wide and I would like this to span the entire area. Any help would be greatly appreciated. Thanks for your time.

My Fiddle: http://jsfiddle.net/Del087/angk8v6z/

The CSS

div {
background-color: #080808;
width: 950px;
padding: 10px;
margin: 5px;
}
#social a:hover {background-color: transparent;opacity:0.7;
} 
#social img { -moz-transition: all 0.8s ease-in-out; 
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#social img:hover { -moz-transform: rotate(360deg); 
-webkit-transform: rotate(360deg); 
-o-transform: rotate(360deg); 
-ms-transform: rotate(360deg); 
transform: rotate(360deg);
}

The HTML

<div><div><a href="http://s1314.photobucket.com/user/RTH13/media/RTH%20Artwork/RTHTextLogo1_zpsfd100146.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/RTH%20Artwork/RTHTextLogo1_zpsfd100146.png" border="0" alt=" photo RTHTextLogo1_zpsfd100146.png"/></a></div>

Upvotes: 1

Views: 94

Answers (1)

Ruben
Ruben

Reputation: 1779

<div>s have display: block; by default, and they have a hard return after the object. If you want multiple <div>s next to eachother, you can set the display property to inline-block. This means that the <div>s can be positioned next to eachother.

Upvotes: 1

Related Questions