How to Position Two Elements Side by Side Using Css

How to position two elements side by side using CSS

Just use the float style. Put your google map iframe in a div class, and the paragraph in another div class, then apply the following CSS styles to those div classes(don't forget to clear the blocks after float effect, to not make the blocks trouble below them):

css

.google_map{
    width:55%;
    margin-right:2%;
    float: left;
}
.google_map iframe{
   width:100%;
}
.paragraph {
    width:42%;
    float: left;
}
.clearfix{
    clear:both
}

html

<div class="google_map">
      <iframe></iframe>
</div>
<div class="paragraph">
      <p></p>
</div>
<div class="clearfix"></div>

How to show two elements side to side in HTML?

You need to position your name and menu icon with CSS. On your name block float: left and float: right on the menu icon. Be sure that their total width should be less or equal to your screen width. For this put width: 50% on both elements.

<div class="name-block">SahadSaj</div>
<nav class="menu"></nav>

<style>
    .name-block {
        float: left;
        width: 50%;
    }
    .menu {
        float: right;
        width: 50%;
    }
</style>

Also another way is to use CSS Flex. (Read more about Fex)

Align div elements side by side

Apply float:left; to both of your divs should make them stand side by side.

How do I position two elements side by side surrounded by a border?

Just make these changes to these two lines in your code:

ul {
    text-align: left;
    font-size: 12pt;
    /*float: left;*/ /* delete this line */
    display: inline-table; /* change this to inline-table */
}

And then remove the outer <ul> tags as shown in the below complete code:

Complete Code:

CSS:

ul {
    text-align: left;
    font-size: 12pt;
    display: inline-table;
}

ul p {
    text-decoration: underline;
}

.section {
    border-radius: 10px;
    border: 2px solid black;
    margin: 5px;
} 
.section h1 {
    margin-left: 20px;
}

HTML:

<div class="section">
        <h1>My Abilities</h1> 
            <ul>
                <p>Hacking</p>
                <li>Disable Alarms</li>
                <li>Access Security Cameras</li>
                <li>Delay Camera and Alarm response time</li>
                <li>Disable Guard Pagers</li>
            </ul>
            <ul>
                <p>Gunmanship</p>
                <li>Able to handle any type of weapon, big or small</li>
                <li>Resourcefull with ammo</li>
                <li>Deadshot</li>
                <li>Can play many roles, from Heavy to Stealth</li>
                <li>Great Getaway driver</li>
                <li>Fast reloader with little recoil</li>
                <li>Excellent at training others</li>
                <li>Military grade training</li>
            </ul>
    </div>

How to place two elements side by side in one div?

So I found the answer and it was pretty simple :)
I just had to add one more div with class with which I will float it to left. This is what I wanted:

.html

 <div class="column">
      <div class="columns">
      <div class="float" ng-repeat="a in $ctrl.f"> /* added this line of code */
        <div class="column is-narrow">
          <div class="box" style="width: 200px;">
            <p class="title is-5">{{album}}</p>
            <figure class="image is-128x128">
              <!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
              <img src="http://dummyimage.com/128x128" />
            </figure>
            </div>
            </div>
            <p class="subtitle">{{person}}</p>
          </div>
        </div>
      </div>

.css

.float{
    float:left;
}

That was it. It's working. :)

How to put two elements side by side

You need set a width's value for the element ".main-info". The value doesn't have to be percent.

.main-info {
    margin-top: 3%;
    margin-left: 0%;
    display: inline-block;
    float: left;
    width: 30%;// could be 100px for example
 }

See https://jsfiddle.net/bgdvxce4/

How to place div side by side

There are many ways to do what you're asking for:

1. Using CSS float property:

 <div style="width: 100%; overflow: hidden;">
     <div style="width: 600px; float: left;"> Left </div>
     <div style="margin-left: 620px;"> Right </div>
</div>

#inputHeader {  width: 100%;  background: #30273a;  border-radius: 10px 10px 0px 0px;  display: flex;  align-items: center;  padding: 0 10px;  box-sizing: border-box;}#inputHeaderTitle {  color: white;  display: inline-block;  flex: 1;}#inputHeaderEdit {  color: white;  display: inline-block;}

<div id="inputHeader">  <p id="inputHeaderTitle">Header</p>  <span id="inputHeaderEdit" class="glyphicon glyphicon-pencil">Edit</span></div>