Menu
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.
713
You may find what you need simply by using <span> or some other tag.
With CSS properties, you can easily put two <div> side by side in HTML. Use the CSS property float to achieve this. With that, add height:100px and set margin.
The idea of the tag <p></p> is to display a paragraph. So HTML offers you the <div></div> which is a container conecpt. So you should use Salman A's Solution, because there aren't just different tags in html for no reason.
How to get two paragraphs next to each other - WebDeveloper ... Give each paragraph a width and then add float:left to the first paragraph. The second paragraph will then be moved to the right provided that there is room. How To Create a Two Column Layout. Step 1) Add HTML: Example. <div class="row">
At the point in your document at which you want to include side-by-side paragraphs, insert a table of one row and of two or more columns ... How do you make a layout with pictures down one side of a ... If that was our entire body in an HTML document, the answer to the question in the blog post title is literally two lines of CSS:
There are several ways to place HTML divs side-by-side. The simplest and most efficient way to do this is to make use of a handful of CSS ... Side-by-Side Paragraphs in Word Documents - Database ... At the point in your document at which you want to include side-by-side paragraphs, insert a table of one row and of two or more columns ...
If you want to place them next to each other you would require to use a CSS property float. As the name goes the float property specifies how an element should float in the webpage on the left or the right!. none - This is the default behavior.
This will work but when the window width is below a certain point the text will go underneath the other text
#gallery-text-left{
float:left;
width:50%
}
I would consider using something like Bootstrap instead of writing everything yourself
111
You we're missing the width property for your floating divs. I updated your fiddle.
#gallery-text-left{
/* Added */
width: 50%;
}
#gallery-paragraph-1{
border-left:8px solid #3CB371;
border-radius:4px;
padding-left:15px;
/* Added */
word-wrap: break-word;
}
#gallery-paragraph-2{
border-left:8px solid #3CB371;
border-radius:4px;
padding-left:15px;
}
#gallery-text-right{
/* Added */
width: 50%;
}
http://jsfiddle.net/v48tbqxx/1/
I also added word-wrap so the text breaks in the paragraphs
36
answered Nov 15 '22 00:11
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With