Best IT Recipes

What is the best way to align and right-align two div tags?

What is the best way to right-align and left-align two div tags on a web page horizontally next to each other? I would like it to be an elegant solution, if possible.

+41
html alignment
Apr 7 '09 at 23:16
source share
8 answers
<div style="float: left;">Left Div</div> <div style="float: right;">Right Div</div>
+78
Apr 07 '09 at 23:20
source share

As an alternative way of swimming:

 <style> .wrapper{position:relative;} .right,.left{width:50%; position:absolute;} .right{right:0;} .left{left:0;} </style> ... <div class="wrapper"> <div class="left"></div> <div class="right"></div> </div>

Given that there is no need to position the .left div as absolute (depending on your direction, it can be like .right), because it will be in the desired position in the natural stream of html code.

+32
Apr 07 '09 at 23:29
source share
 <style> #div1, #div2 { float: left; /* or right */ } </style>
+6
Apr 7 '09 at 23:19
source share

You can do this with a few lines of CSS code. You can align all the divs that you want to display next to each other to the right .

 <div class="div_r">First Element</div> <div class="div_r">Second Element</div> <style> .div_r{ float:right; color:red; } </style>
+1
Apr 05 '15 at 4:22
source share

use add-on tags, the above float tags did not work, I used

 padding left:5px; padding left :30px
0
Oct. 20 '15 at 6:19 06:19
source share

I used below. A genre element will start from the end of a DJ element,

 <div> <div style="width:50%; float:left">DJ</div> <div>genre</div> </div>

sorry inline css.

0
Dec 18 '15 at 11:47
source share

This solution has aligned text and a button in the right corner.

If someone is looking for an answer to material design:

 <div layout="column" layout-align="start start"> <div layout="row" style="width:100%"> <div flex="grow">Left Aligned text</div> <md-button aria-label="help" ng-click="showHelpDialog()"> <md-icon md-svg-icon="help"></md-icon> </md-button> </div> </div>
0
Mar 21 '16 at 18:58
source share

You can use the parent div tag as follows:

 <!doctype html> <html> <head> <style> .parent{ text-align:center; } .child{ width:45%; display:inline-block; border:1px solid #cccccc; } </style> </head> <body> <div class="parent"> <div class="child">First Element</div> <div class="child">Second Element</div> </div> </body> </html>
0
Dec 01 '16 at 12:20
source share


More articles:


All Articles