Float 2 Elements Side by Side Inside a Container Div

Float 2 elements side by side inside a container div

By default, <h3> elements have a top and bottom margin. You should remove them using margin: 0:

<div style="width: 250px;">
    <img style="float: left; width: 20px;" src="public/_images/ok_kutu.jpg" alt="kutu" /> 
    <h3 style="float: left; width: 50px; color: #FFF; font-size: 18px;margin:0">Jobs</h3>
    <div style="clear: left;"></div>
</div>

Also, maybe look into using external CSS, rather than placing all of your style information inline. It will be much easier to maintain in the long run...

Please see this jsFiddle demo

CSS - Floating two elements side by side

<div id="container">
    <div id="divB">  right text </div>
    <div id="divA"> left text </div>
</div>

#divA
{
  overflow:auto;
  border:1px solid blue;
}

#divB
{
  float:right;
  border:1px solid red;
}

will work.

But you should specify width of floating elements.

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 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>

Align div elements side by side

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

Align div elements side by side using floats

First of all when you are dealing with Grid Based layouts, always make sure you use

* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;

   /* Resets */
   margin: 0;
   padding: 0;
}

Note: * is nothing but a universal selector which will apply the
defined properties to every element. Inorder to target specific
elements, use more specific selectors like div.class_name etc

Now, why you need that?

If you see in the diagram below..

CSS adds margin, padding and border outside the box and not inside, which is default content box behavior, so when you use the snippet I shared, it changes the box model behavior and makes the element count the border and padding inside the element.

---

Coming to your issue, the CSS you provided is perfect, but position, float, or margin or even uncleared floating elements anything can cause the issue which you are facing, so if you can, consider altering your CSS stylesheet, and would be worth if you use box-sizing: border-box;

---

How do you achieve this?

Well, obviously, I won't provide you entire thing, but just a general idea of how to achieve this, as I see you are using width: 79%; now that's the very strong reason of why I suggested you to alter the box model.

Now here, I have two elements floated to the left, with the box model altered, so I don't have to use -1% width for any of the element. When you need spacing, nest more blocks inside the grid and then, instead of margin use padding especially on floated parent elements.

Demo

<div class="wrap">
    <div class="left_wrap"></div>
    <div class="right_wrap"></div>
</div>

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    /* Resets */
    margin: 0;
    padding: 0;
}

.wrap:after {
    clear: both;
    display: table;
    content: "";
}

.wrap > div {
    min-height: 300px;
}

.wrap .left_wrap {
    width: 30%;
    float: left;
    border: 3px solid #f00;
}

.wrap .right_wrap {
    border: 3px solid #000;
    width: 70%;
    float: left;
}

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)

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>

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/

---

Related Topics