CODEWITHSUNDEEP
htmlcss
Esha
Esha

Reputation: 465

How to place two paragraphs side by side (next to each other)?

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.

Upvotes: 6

Views: 70576

Answers (6)

Karthi Keyan
Karthi Keyan

Reputation: 804

This not a big thing, just use the simple div structure and css it is possible

.gallery-text {
    float: left;
    width: 48%;
    margin: 1%;
}
.gallery-text p {
    word-break: break-all;
}
<div id="gallery-text">
    <div class="gallery-text">
        <h3> Header</h3>
        <p>
        BodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBody
            BodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBody
            BodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBody
            BodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBody
        </p>
    </div>
    <div class="gallery-text">
        <h3> Header</h3>
        <p>
        BodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBody
            BodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBody
            BodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBody
            BodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBody
        </p>
    </div>  
</div>

Upvotes: 0

stanze
stanze

Reputation: 2480

Try this fiddle

#gallery-text-left{
  width:50%
}
#gallery-paragraph-1{
  border-left:8px solid #3CB371;
  border-radius:4px;
  padding-left:15px;
  word-break: break-all;
}
#gallery-paragraph-2{
  border-left:8px solid #3CB371;
  border-radius:4px;
  padding-left:15px;
}

Upvotes: 0

gopalraju
gopalraju

Reputation: 2309

Remove the inline float:left and add this:

#gallery-text{
    display:table;
}

#gallery-text-left, #gallery-text-right{
    display:table-row;
}

#gallery-text-left > p,
#gallery-text-right > p{
 display:table-cell;
}

http://jsfiddle.net/nseLmva8/

Upvotes: 0

VladNeacsu
VladNeacsu

Reputation: 1288

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

Upvotes: 2

Mr_Green
Mr_Green

Reputation: 41832

You seems to be looking for display: table-cell instead of float: left

Try this:

#gallery-text > div{
    display: table-cell;
}

And also avoid using inline styles.

Upvotes: 1

George
George

Reputation: 6739

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

Upvotes: 7

Related Questions