I have a "problem" that at first sight didn't look like one. So, I have a parent div containing to childs. The one child will contain text, and the other a picture. Both are inline-block elements (they need to be positioned next to each other), and have set widths. Now, when the picture div is bigger than the text div, the parent inherits the height of that div (the biggest one). But the second child (which is smaller) is placed at the bottom of that div. What I want is to have that div always at the top.I've tried \[code\]top: 0px;\[/code\]and stuff, but it doesn't work. It just sticks to the bottom. Here's my sample (html) code:\[code\]<div id="parent"> <div id="child1"> Assassin's Creed IV: Black Flag: Gameplay Reveal Trailer - Chart your course through a treacherous and unpredictable world as the Assassin's Creed series hits the high seas in Assassin's Creed IV: Black Flag. <a href="http://bit.ly/Zny5pI">http://bit.ly/Zny5pI</a> </div> <div id="child2"> <img width="300px" src="http://sphotos-a.ak.fbcdn.net/hphotos-ak-ash3/536527_10151407411789285_1500143344_n.jpg" /> </div></div>\[/code\]And here's the CSS:\[code\]#parent { border: 2px solid green;}#child1 { border: 2px solid black; display: inline-block; width: 400px; margin: 2px; top: 0px;}#child2 { border: 2px solid red; display: inline-block; width: 300px;}\[/code\]I just took a post on Facebook by GameTrailers as an example. Could anyone help me by solving this "problem"? I don't think it's hard, but it's been a while since I've worked with CSS, and it's not my favorite "coding language" 
Thanks in advance.
Thanks in advance.