I want to achieve the following effect using HTML & CSS
rintscreen
However, I'm not sure if I'm doing it correctly.
The current state is the following:\[code\]<div class="post"><!-- Posts are just divs with a white background --> <div class="post-header"> <div class="left">Som Text</div> <div class="center"> <img src="http://stackoverflow.com/questions/14436575/pseudo" class="center" /> </div> <div class="right">Som Text</div> </div> <p class="title">Som Text</p></div>\[/code\]Then, I'm simply doing a \[code\]margin-top:-66px;\[/code\] on \[code\]div.post div.post-header\[/code\].
This is probably not what one should do.Can you give me an idea on how to approach this?
rintscreen
The current state is the following:\[code\]<div class="post"><!-- Posts are just divs with a white background --> <div class="post-header"> <div class="left">Som Text</div> <div class="center"> <img src="http://stackoverflow.com/questions/14436575/pseudo" class="center" /> </div> <div class="right">Som Text</div> </div> <p class="title">Som Text</p></div>\[/code\]Then, I'm simply doing a \[code\]margin-top:-66px;\[/code\] on \[code\]div.post div.post-header\[/code\].
This is probably not what one should do.Can you give me an idea on how to approach this?