CSS - Floating Two Elements Side by Side

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

Position two elements next to eachother with float, clear:both alternative?

You can use the overflow style. By not specifying any size for the parent, there isn't anything that actually overflows, but it will still make it contain its children:

.wrapper {
    overflow: hidden;
}

Side note: Setting display:inline on an element that is set to float is pointless, as a floating element is alwas a block element:

.left, .right {
    float:left;
}

(Using display:inline on floating elements was however used to counter the double margin bug in IE6, so it can be found in older code.)

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

float multiple elements side by side in html

A floated element is shifted to the left (or right) until it touches the edge of its containing box or another floated element.

And since the 2nd is in its way it stops there.

Sample 1 - Float

div {  width: 25%;  margin: 5px;  float: left;  border: 1px solid;  height: 30px;}div:nth-child(1) {  height: 50px;}div:nth-child(2) {  height: 40px;}

<div>1</div><div>2</div><div>3</div><div>4</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)

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 align two divs side by side using the float, clear, and overflow elements with a fixed position div/

This answer may have to be modified depending on what you were trying to achieve with position: fixed;. If all you want is two columns side by side then do the following:

http://jsfiddle.net/8weSA/1/

I floated both columns to the left.

Note: I added min-height to each column for illustrative purposes and I simplified your CSS.

body {  background-color: #444;  margin: 0;}
#wrapper {  width: 1005px;  margin: 0 auto;}
#leftcolumn,#rightcolumn {  border: 1px solid white;  float: left;  min-height: 450px;  color: white;}
#leftcolumn {  width: 250px;  background-color: #111;}
#rightcolumn {  width: 750px;  background-color: #777;}

<div id="wrapper">  <div id="leftcolumn">    Left  </div>  <div id="rightcolumn">    Right  </div></div>

Align div elements side by side

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

align two divs side by side with floating (responsive)

I think this is what you are after. display: flex; is very powerful property and useful when it comes to take up rest of the space and centering.

Modification
here is a demo, I would not suggest this approach with using max-width as it's not "mobile-first". But if this is what you want for this project then ok.

.container {
  display: flex;
  flex-direction: row;
  background-color: deepskyblue;
}

#img {
  width: 140px;
  height: 140px;
}

#text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  background-color: deeppink;
  min-height: 100px;
}

@media screen and (max-width: 700px) {
  .container {
    flex-direction: column;
  } 

  #img {
    width: 100%;
    height: auto;
  }
}

.container {  display: flex;  background-color: deepskyblue;}
#img {  width: 140px;  height: 140px;}
#text {  display: flex;  align-items: center;  justify-content: center;  flex-grow: 1;  background-color: deeppink;}

<div class="container">  <img id="img" src="https://www.archlinux.org/static/vector_tux.864e6cdcc23e.png" />  <div id="text">text on the left, next to the img</div></div>

---

Related Topics