CODEWITHSUNDEEP
csshtml
yaru
yaru

Reputation: 1310

How to position a block of text on the same line

A following html markup creates a QA section in my site. I want it to be this way - sentence in Q section should be positioned on the same line as "Q" symbol; Sentences in A section should be moved slightly to the right and each sentence should start from new line. Like this: desired result

But for now it looks this way: actual result

 <html>
    <head>
    <style type="text/css">

    .qa b {
        font-size: 50px;
    }

    .qa .answer_box {
        margin-left: 90px;
        display: inline;
    }
    .qa p { 
        font-size: 25px;    
    }


    </style>
    </head>
    <div class="qa">
            <div class="question">
                <b>Q</b>
                <p>             
                    Do you believe in SEO?
                </p>
            </div>

            <div class="answer">        
                <b>A</b>    
                <div class="answer_box">                
                    <p>                 
                        Yes I Do
                    </p>
                    <p>
                        SEO is a very powerful technique to increase your site ranking in Google.
                    </p>
                    <p>
                        Also it just cool and so so so.
                    </p>
                </div>
            </div>
        </div>

Would be grateful for your help.

Upvotes: 1

Views: 711

Answers (6)

Jared Farrish
Jared Farrish

Reputation: 49208

Use float and a padding/margin maneuver, with the b tag replaced with a strong and place within the first p tag per block:

p strong {
    float: left;
    margin-left: -1.5em;
    font-size: 3em;
}
p {
    padding-left: 5em;
}

<p>
    <strong>Q:</strong>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non turpis cursus, viverra libero a, ultricies enim. Cras quis ornare urna, condimentum luctus lorem. Aliquam et odio et magna pretium molestie. Fusce pulvinar nisi id mi pharetra scelerisque. Sed mollis accumsan tincidunt. Quisque libero erat, gravida sed rutrum et, volutpat non dui. Etiam eget leo in ipsum consectetur iaculis. Vestibulum dictum leo quis tristique feugiat. Donec vestibulum odio placerat, tincidunt orci vel, sagittis nibh. Integer ultricies ultrices ornare. Duis neque ligula, facilisis sit amet metus eget, adipiscing rhoncus justo. Nam fermentum suscipit mauris, nec volutpat augue condimentum ac. Mauris consequat ante sed lacus vehicula scelerisque. In non gravida ligula, at dapibus ligula.
</p>
<p>
    <strong>A:</strong>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non turpis cursus, viverra libero a, ultricies enim.
</p>
<p>Cras quis ornare urna, condimentum luctus lorem. Aliquam et odio et magna pretium molestie. Fusce pulvinar nisi id mi pharetra scelerisque. Sed mollis accumsan tincidunt. Quisque libero erat, gravida sed rutrum et, volutpat non dui. Etiam eget leo in ipsum consectetur iaculis. Vestibulum dictum leo quis tristique feugiat. Donec vestibulum odio placerat, tincidunt orci vel, sagittis nibh. Integer ultricies ultrices ornare. Duis neque ligula, facilisis sit amet metus eget, adipiscing rhoncus justo. Nam fermentum suscipit mauris, nec volutpat augue condimentum ac. Mauris consequat ante sed lacus vehicula scelerisque. In non gravida ligula, at dapibus ligula.</p>

http://jsfiddle.net/userdude/cZJhU/5/

Keep in mind you'll want to use classes to add these styles, not element-level selectors like p and p strong. This is for demonstration purposes only.

NOTE

For those claiming it does not look like what the OP asked for, here is what it appears like in every browser I look at it with:

enter image description here

Upvotes: 1

Tom Prats
Tom Prats

Reputation: 7921

I was writing this while the other answers popped up

http://jsfiddle.net/tprats108/ugaYM/

css:

.qa {
    font-size: 25px;
}
.qa .heading {
    font-weight: bold;
    font-size: 50px;
    float: left;
}
.qa .response {
    float: left;
    margin-left: 20px;
}
.clear {
    clear: both;
}

html:

<div class="qa">
    <div class="question">
        <div class="heading">Q</div>
        <div class="response">
            <p>Do you believe in SEO?</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="answer">
        <div class="heading">A</div>
        <div class="response">
            <p>Yes I Do</p>
            <p>SEO is a very powerful technique to increase your site ranking in Google.</p>
            <p>Also it just cool and so so so.</p>
        </div>
    </div>
</div>

Upvotes: 0

Ali &#199;arık&#231;ıoğlu
Ali &#199;arık&#231;ıoğlu

Reputation: 1305

I put a container. check this fiddle for live demo. http://jsfiddle.net/KdPfz/1/

.container
{
    width: 100%;
    height: 60px;
}

.letter
{
    font-size: 50px;
float: left;

}

.sentence
{
    width: 350px;
    margin-top: 20px;
    margin-left: 20px;
    font-size: 20px;
    float: left;

    z-index: 5;
}

Upvotes: 1

adaam
adaam

Reputation: 3706

I just rewrote your code as I couldn't deal with it - this looks exactly how you'd like it to be:

http://jsfiddle.net/f8NjK/

<div class="wrapper">
<div class="leftcol">
    <strong>Q</strong>
</div>
<div class="rightcol">
    <p>Do you believe in SEO?</p>
</div>
<div class="leftcol">
    <strong>A</strong>
</div>
<div class="rightcol">
    <p>Yes I do</p>
    <p>SEO is a very powerful technique to increase your site ranking in Google.</p>
    <p>Also it just cool and so and so</p>
</div>
</div>

CSS:

  strong {
        font-size: 50px;
    }
    .wrapper {
        width:100%;
    }
   .leftcol {
      width:10%; 
      display:inline-block;

   }
    .rightcol {
        width:80%;
        vertical-align:top;
        display:inline-block;
    }

Upvotes: 1

Fee
Fee

Reputation: 243

This may be more what you are looking for - a fiddle - I re-wrote your html to avoid using styling elements

<div class="qa">
    <div class="question">
        <div class="bold-letters">Q</div>
        <div class="questions">
            <p>Do you believe in SEO?</p>
        </div>
    </div>

    <div class="answer">        

        <div class="answer_box">  
            <div class="bold-letters">A</div>
            <div class="answers">
                <p>      

                    Yes I Do
                </p>
                <p>
                    SEO is a very powerful technique to increase your site ranking in Google.
                </p>
                <p>
                    Also it just cool and so so so.
                </p> 

            </div>
        </div>
    </div>

and some short css

.bold-letters, .answers, .questions{
    display:inline-block;
}
.bold-letters{
    font-size:50px;
    vertical-align:top;
    margin-right: 30px;
}
.questions{
    vertical-align:bottom;   
}

Upvotes: 0

Thomas Cheney
Thomas Cheney

Reputation: 388

Like this?

<html>
<head>
<style type="text/css">

.qa b {
    font-size: 50px;
}

.qa .answer_box {
    margin-left: 90px;
    display: inline;
}
.qa p { 
    font-size: 25px; 
    display: block;
}
.answer_box p {
margin-left: 50px;
}
</style>
</head><body>
<div class="qa">
        <div class="question">
            <b>Q</b> &nbsp; 
            <p style="display: inline-block;">              
                Do you believe in SEO?
            </p>
        </div>
        <div class="answer">        
            <b>A</b>    
            <div class="answer_box">                
                <p style="display: inline-block;">                 
                    Yes I Do
                </p>
                <p>
                    SEO is a very powerful technique to increase your site ranking in  Google.
                </p>
                <p>
                    Also it just cool and so so so.
                </p>
            </div>
        </div>
    </div>

If you inject a display: inline-block; style into your first p tag, leave the rest to the p tags natural block format, and a conditional margin for the answer block.

Upvotes: 0

Related Questions