CODEWITHSUNDEEP
htmlcssalignment
Uhl Hosting
Uhl Hosting

Reputation: 57

How to display code in the same line?

I have the following code:

<div align="left">
© 2016 RIESEN-PRINTMEDIA - All rights reserved. Design by <a href="http://uhlhosting.ch">UHL Hosting</a>
</div>
<div align="right">
    <a href="/agb">AGB</a>
</div>
<div align="right">
    <a href="/impressum">Impressum</a>
</div>

I want /agb and /impressum to be on the right side and the copyright section on the left side.

How can I do this without external CSS? Desired result is like in this screenshot – only that it should be on the same line:

enter image description here

Upvotes: 1

Views: 2463

Answers (3)

Saif
Saif

Reputation: 2679

Try this 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="container">
    <div class="row">
        <div class="col-xs-6">
            © 2016 RIESEN-PRINTMEDIA - All rights reserved. Design by <a href="http://uhlhosting.ch">UHL Hosting</a>
        </div>
        <div class="col-xs-6"  style="text-align: right">
           <a href="/agb">A3B</a>
    <a href="/impressum">Impressum</a>
        </div>
    </div>
</div>

Upvotes: 1

Dhaval Patel
Dhaval Patel

Reputation: 1096

Please check below HTML

HTML

<div align="left" style="float: left; width: 650px;">© 2016 RIESEN-PRINTMEDIA - All rights reserved. Design by <a href="http://uhlhosting.ch">UHL Hosting</a>
</div>
<div class="rightmain" style="float: right; width: 100px;">
 <div align="right" style="float: left;">
  <a href="/agb">AGB</a>
 </div>
 <div align="rightnew" style="float: right;">
  <a href="/impressum">Impressum</a>
 </div>
</div>

Upvotes: 5

Picklejw_
Picklejw_

Reputation: 29

You can add a class to your code for position: inline-block. Since it looks like you do not have any margins the classes below should work okay for you. You can add it inline in the head tag or put the CSS properties in separate CSS file and link it in.

` .right { position: inline-block; width: 50%; }

.left {
position: inline-block;
width: 50%;
}

`

Upvotes: 1

Related Questions