CSS: Align Two Element, to The Left and Right in The Same Line Whithout Floats

CSS: align two element, to the left and right in the same line WHITHOUT floats

You can use some flexbox magic:

h1 {  display: flex;  justify-content: space-between;}

<h1>  <span>Align me left</span>  <a href="">align me right</a></h1>

How to align two elements on the same line without changing HTML

Using display:inline-block

#element1 {display:inline-block;margin-right:10px;} 
#element2 {display:inline-block;} 

Example

Align divs in same line without using float and width

Looking at the required layout, the borders and padding refer to the whole thing, not just the First div.

If you put both divs in a container and put that styling on the container, you could use flex to align the divs within container.

.container {
  display: flex;
  margin-bottom: 10px;
  margin: 15px 0px 0px 20px;
  padding-top: 35px;
  border-top: 1px solid #e9ecef;
  border-bottom: 1px solid #e9ecef;
}

.first {
  color: #377fd9;
  font-size: 1.375rem;
}

.second {
  cursor: pointer;
  text-align: end;
  padding: 8px 0;
}

.first,
.second {
  flex: 1;
}

<div class="container">
  <div class="first">First</div>
  <div class="second">Second</div>
</div>

Align two inline-blocks left and right on same line

Edit: 3 years has passed since I answered this question and I guess a more modern solution is needed, although the current one does the thing :)

1.Flexbox

It's by far the shortest and most flexible. Apply display: flex; to the parent container and adjust the placement of its children by justify-content: space-between; like this:

.header {
    display: flex;
    justify-content: space-between;
}

Can be seen online here - http://jsfiddle.net/skip405/NfeVh/1073/

Note however that flexbox support is IE10 and newer. If you need to support IE 9 or older, use the following solution:

2.You can use the text-align: justify technique here.

.header {
    background: #ccc; 
    text-align: justify; 

    /* ie 7*/  
    *width: 100%;  
    *-ms-text-justify: distribute-all-lines;
    *text-justify: distribute-all-lines;
}
 .header:after{
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size:0;
    line-height:0;
}

h1 {
    display: inline-block;
    margin-top: 0.321em; 

    /* ie 7*/ 
    *display: inline;
    *zoom: 1;
    *text-align: left; 
}

.nav {
    display: inline-block;
    vertical-align: baseline; 

    /* ie 7*/
    *display: inline;
    *zoom:1;
    *text-align: right;
}

The working example can be seen here: http://jsfiddle.net/skip405/NfeVh/4/. This code works from IE7 and above

If inline-block elements in HTML are not separated with space, this solution won't work - see example http://jsfiddle.net/NfeVh/1408/ . This might be a case when you insert content with Javascript.

If we don't care about IE7 simply omit the star-hack properties. The working example using your markup is here - http://jsfiddle.net/skip405/NfeVh/5/. I just added the header:after part and justified the content.

In order to solve the issue of the extra space that is inserted with the after pseudo-element one can do a trick of setting the font-size to 0 for the parent element and resetting it back to say 14px for the child elements. The working example of this trick can be seen here: http://jsfiddle.net/skip405/NfeVh/326/

CSS How to align two DIVs on the same line without using floats

Use display:inline-block with text-align:center on the parent

Align 2 divs in same line without using float

you can do like this.

.main {  width: 1400px;  background-color: #c3c3c3;  position: relative;  text-align: center;}.child1 {  background-color: #666;  width: 600px;  margin: auto;  display: inline-block;}.child2 {  background-color: #888;  width: 600px;  margin: auto;  display: inline-block;}

<div class="main">  <div class="child1">Child 1</div>  <div class="child2">Child 2</div></div>

How do I align two divs horizontally without the left one floating left?

You can also use display:inline-block; on your child elements. View this Fiddle for an example of how to accomplish this.

HTML:

<div class="centerpanel">
<div class="leftpanel">Left</div><div class="rightpanel">Right</div>
</div>

CSS:

div.centerpanel {
font-size: 28px;
width:100%;
height:100%;
text-align: center;
}
.leftpanel {
background:red;
display:inline-block;
width:50%;
}
.rightpanel {
background:blue;
display:inline-block;
width:50%;
}

How can I align two HTML elements on both sides of the same line?

HTML content:

<div class='container'>
  <div class="align-left">left</div>
  <div class="align-right">right</div>
</div>

Style as shown:

.container{ width:100%; }    
.align-left{ float: left;width:50%; }
.align-right{ float: right;width:50%; }

How to align two elements in the same line,without overlap

http://jsfiddle.net/a4aME/507/

#element1 {width:50%; background-color:red;float:left} 
#element2 {width:50%; background-color:red;float:left} 

Take off the the display: and float it all left.

---

Related Topics