CODEWITHSUNDEEP
htmlcss
sykik
sykik

Reputation: 353

how do I display two divs side by side in html?

Please check the snippet below

<div style="margin-right: 20%;text-align: justify;float: left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor dapibus ipsum ut efficitur. Aliquam feugiat nec sem dapibus blandit. Nam non faucibus urna, at pulvinar nisl. Aliquam erat volutpat. Ut eget aliquet diam.
    </div>
    <div style="margin-left: 80%;float:right;">
        <a href="mailto:[email protected]"
           rel="nofollow noopener noreferrer"
           target="_blank">[email protected]</a><br>(408) 553-3222<br>Boston
    </div>

I don't know why it wouldn't display the content side by side? Same code is there at https://jsfiddle.net/atrwq86b/

Upvotes: 0

Views: 205

Answers (6)

Learner
Learner

Reputation: 281

To display the content side by side, remove the ‘margin-right/margin-left’ and ‘float’ style of the div and apply ‘width’ and only ‘margin’ as well as 'display : inline-block' style to both div. The code has been given below:

<div style="width: 65%; margin:1%; display:inline-block; text-align: justify; ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor dapibus ipsum ut efficitur. Aliquam feugiat nec sem dapibus blandit. Nam non faucibus urna, at pulvinar nisl. Aliquam erat volutpat. Ut eget aliquet diam.
    </div>
    <div style="width: 30%; margin:1%; display:inline-block;">
        <a href="mailto:[email protected]"
           rel="nofollow noopener noreferrer"
           target="_blank">[email protected]</a><br>(408) 553-3222<br>Boston
    </div>

Upvotes: 1

Abood
Abood

Reputation: 570

Try this:

<div style="width: 75%;text-align: justify;display:inline-block; vertical-align: text-top;">Fisrt DIV</div>
        <div style="width: 20%;display:inline-block; vertical-align: text-top;">Second DIV</div>

Upvotes: 0

Expressingx
Expressingx

Reputation: 1572

Remove the margins and u can use width and float to align them side by side.

See the example

<div style="width: 65%; text-align: justify; float: left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor dapibus ipsum ut efficitur. Aliquam feugiat nec sem dapibus blandit. Nam non faucibus urna, at pulvinar nisl. Aliquam erat volutpat. Ut eget aliquet diam.
 </div>
            <div style="width: 30%; float:right;">
                <a href="mailto:[email protected]"
                   rel="nofollow noopener noreferrer"
                   target="_blank">[email protected]</a><br>(408) 553-3222<br>Boston
            </div>

Upvotes: 1

Arkej
Arkej

Reputation: 2241

Use width instead margin and read something about how margin property works.

<div style="width: 80%;text-align: justify;float: left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor dapibus ipsum ut efficitur. Aliquam feugiat nec sem dapibus blandit. Nam non faucibus urna, at pulvinar nisl. Aliquam erat volutpat. Ut eget aliquet diam.
        </div>
        <div style="width: 20%;float:right;">
            <a href="mailto:[email protected]"
               rel="nofollow noopener noreferrer"
               target="_blank">[email protected]</a><br>(408) 553-3222<br>Boston
        </div>

Upvotes: 0

Zac Webb
Zac Webb

Reputation: 663

Float both the div's left and give the left one a fixed width (as the long text was making it run too far off the page to see any change. Also remove the percentage margins. See updated code:

<div style="text-align: justify;width:100px; float: left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor dapibus ipsum ut efficitur. Aliquam feugiat nec sem dapibus blandit. Nam non faucibus urna, at pulvinar nisl. Aliquam erat volutpat. Ut eget aliquet diam.
    </div>
    <div style="float:left;">
        <a href="mailto:[email protected]"
           rel="nofollow noopener noreferrer"
           target="_blank">[email protected]</a><br>(408) 553-3222<br>Boston
    </div>

Upvotes: 0

Troyer
Troyer

Reputation: 7013

Remove the margins and use display:inline-block and add some width on the containers.

<div style="display: inline-block; width: 30%; text-align: justify;float: left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor dapibus ipsum ut efficitur. Aliquam feugiat nec sem dapibus blandit. Nam non faucibus urna, at pulvinar nisl. Aliquam erat volutpat. Ut eget aliquet diam.
        </div>
        <div style="display: inline-block;float:right;">
            <a href="mailto:[email protected]"
               rel="nofollow noopener noreferrer"
               target="_blank">[email protected]</a><br>(408) 553-3222<br>Boston
        </div>

Your fiddle updated: https://jsfiddle.net/atrwq86b/2/

Upvotes: 2

Related Questions