I have two div containers wrapped by a parent div. Each child div contains paragraph with header. If I try to align thsese two paragraphs (including header) next to each other in the same row, they don't stay. They just break down and sit one underneath other. How do I keep them next to each other , and also the same margin from the top?
NB I always want to keep the same amount of text as it shows in the demo in my first paragraph.
HTML:
<div id="gallery-text">
<div id="gallery-text-left" style="float:left">
<p id="gallery-text-quote-left" style="font-family:Century Gothic; color:#006600"><b>I am not interested in shooting new things, I am interested to see things new.</b></p>
<p id="gallery-paragraph-1" style="font-family:Georgia">
bodybodybodybodybodybodybodybodybodybodybodybodybodybody
bodybodybodybodybodybodybodybodybodybodybodybodybodybody
bodybodybodybodybodybodybodybodybodybodybodybodybodybody
</p>
</div>
<div id="gallery-text-right" style="float:left">
<p id="gallery-text-quote-right" style="font-family:Century Gothic; color:#006600"><b>External photo albums</b></p>
<p id="gallery-paragraph-2" style="font-family:Georgia">
<a>Link coming soon</a>
</p>
</div>
</div>
.CSS:
#gallery-text-left{
}
#gallery-paragraph-1{
border-left:8px solid #3CB371;
border-radius:4px;
padding-left:15px;
}
#gallery-paragraph-2{
border-left:8px solid #3CB371;
border-radius:4px;
padding-left:15px;
}
#gallery-text-right{
}
Please have a look on my Demo.