How to Align Two Elements on the Same Line Without Changing HTML

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

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.

Align two divs on the same line without modifying the HTML

<div class="main_one">
    <div class="number one">Title A</div>
</div>
<div class="main_two">
    <div class="number two">Title B</div>
</div>

<div class="main_three">
    <div class="number one">Title C</div>
</div>
<div class="main_four">
    <div class="number two">Title D</div>
</div>

<style type="text/css">
    .main_one{
        float:left;
    }

    .main_two{
        float:left;
    }

    .main_three{
        clear:both;
        float:left;
    }

    .main_four{
        float:left;
    }
</style>

Sample Image

HTML, align two 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 do I align two elements on the same line?

The easiest way is to use flexbox on the container DIV, with the following settings:

.container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

BTW: You have two IDs on your 'top header' element - one is definitely enough....

.container {  display: flex;  justify-content: space-between;  align-items: flex-end;}
header {  background-color: #35424a;  border-bottom: 2px solid #ff6600;  color: white;  padding-top: 30px;  min-height: 70px;}
nav {  margin-bottom: 30px;}
nav a {  color: white;  text-decoration: none;  padding: 10px;}

<header>  <div class="container">    <div id="top header">      <h1>Acme Web Design</h1>    </div>    <nav>      <a href="index.html">HOME</a>      <a href="about.html">ABOUT</a>      <a href="services.html">SERVICES</a>    </nav>  </div></header>

How do I force a and p elements to stay on the same line?

how about using span tag instead of p tag.

<a style="color:#39d5f6" href="#">READ</a>
<span style="color: white">|</span>
<a style="color:#39d5f6" href="#">INFO</a>

Display Elements on Same Line

A div is a block element. Block elements are oriented vertically rather than inline. You could simply change the div element into a span.

<i class="fa fa-btc"></i> <span id="counter"></span> 
<span id="btcvalue"> 
    ~ $100.34 <span class="slight"><i class="fa fa-play fa-rotate-270 text-success"> </i> 0.000000690BTC</span>
</span>

Or you can style the div so that it is displayed on the same line. (e.g. display: inline-block)

If the elements are still not on the same line it could be caused by word wrap. You may need to wrap everything in an additional element and turn of word wrap. (e.g. white-space: nowrap)

Putting two elements in the same line

EDIT: Consider fixing your markup first. Below is one of the solutions using the provided HTML unchanged.

Maybe display: flex on the parent ? :) It will put the child elements in the same line

span {  display: flex;}

<a href="/sharp/posts/{{ $day_qsts_3->id }}">   <span>        <p>{{$data->getcategory($data->id)}}</p>        <h3>{{$day_qsts_3->title}}</h3>   </span></a>

How to align two elements in the same line in html and css?

For Top:

ul li:last-child {
  vertical-align: top;
}

#upload-button {    display: table;}
#horizontal-list {    margin-top: 90px;}
ul#horizontal-list li {    display: inline;}
ul#horizontal-list .homepage-logo {    margin-left: 0px;}
ul li:last-child {  vertical-align: top;}
img {  width: 50px;}

<div id="upload-button">    <ul id="horizontal-list">        <li class="homepage-logo">            <a href="https://www.homesail.ca/prelaunch" target="_blank">                <img src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg">            </a>        </li>        <li class="upload-button">Upload</li>    </ul></div>

How to align two elements on the same line html

You can set width and display property to the span elements like this:

.surveySummaryList a span {
      width: calc(100% - 40px);
      display: inline-block;
      word-break: break-all;
}

and add rule for your buttons width like this:

.btt{
    width: 30px;
}

I updated the FIDDLE

How to Align Two Elements on the Same Line Without Changing HTML