How to Float Two Divs Side-By-Side Without Specifying a Width

How do I float two divs side-by-side without specifying a width?

Yes, you can do it with css & it's work in all browsers. Do like this:

.right{
    overflow:hidden;
    background:red;
}
.left{
    float:left;
    background:green;
}

Check this live example http://jsfiddle.net/enRkR/8/

How do I float two divs side-by-side without specifying a width while keeping the right div minimal?

This is because:

A float is a box that is shifted to the left or right on the current line.

Taken from http://www.w3.org/TR/CSS21/visuren.html#floats

Because the right floated div is on a new line it will appear under the left div. By placing it before the left div they will be on the same line.

In your original example the divs would be stacked like this:

When the right div is floated to the right it gets shifted to the right of the current line:

Reversing the order leads to the divs being stacked like this:

When the right div is floated to the right it gets shifted to the right of the current line:

But:

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist.

So the left div effectively moves up to the same line as the right div:

So, the simplest way to get your desired result would be to change the order of your divs in HTML by placing .right before .left:

.right {  float: right;  background: red;}.left {  overflow: hidden;  background: green;}

<div class="right">right div</div><div class="left">left div</div>

Is width required to float two divs side by side using float:left property?

... a block element, which will take up the full width it has available to
it.

A non-replaced block element in normal flow will take up the full width it has available to it. This requirement is stated at http://www.w3.org/TR/CSS2/visudet.html#blockwidth

A floated element is not in normal flow, so that rule does not apply. Instead, float widths are determined according to their own rules, stated and described at http://www.w3.org/TR/CSS2/visudet.html#float-width. This says that when a floated element has a computed width of "auto", its used width is determined using the shrink-to-fit algorithm.

Note that the shrink-to-fit algorithm is also used for other types of layout, including non-replaced inline-block elements and table cells, but in other respects, such as vertical alignment, the layout behaviour of those elements is quite different from that of floats.

Two divs side by side - Fluid display

Using this CSS for my current site. It works perfect!

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
} 

Two divs side by side, without container

Given the fact you already use Flexbox, I suggest you do it for this too, like this.

If you don't want the container, just drop its markup and move its CSS properties to the body

Fiddle demo

Stack snippet

.container {  display: flex;                  /*  added  */  flex-wrap: wrap;                /*  added  */}
.heading {  flex: 0 0 100%;                 /*  added, behaves like a block  */  text-align: center;  margin-bottom: 35px;}
.section-one {  flex: 0 0 100%;                 /*  added, behaves like a block  */  text-transform: uppercase;  display: flex;  flex-wrap: wrap;  text-align: center;  justify-content: space-between;}
.item {  position: relative;  flex-shrink: 0;  margin: 0 auto;  margin-bottom: 15px;}
.section-left {  flex: 1 0 66.666%;              /*  added, behaves like an inline-block but fill when on single line  */  min-width: 400px;  text-transform: uppercase;  margin-top: 80px;  padding-right: 80px;  box-sizing: border-box;         /*  added, make padding be included in set width  */  border: 1px dotted gray;        /*  demo purpose  */}
.section-right {  flex: 1 0 33.333%;              /*  added, behaves like an inline-block but fill when on single line  */  min-width: 200px;  box-sizing: border-box;         /*  added, make border be included in set width  */        border: 1px dotted gray;        /*  demo purpose  */}

<div class="container">  <div class="heading">    <h2>Lorem ipsum dolor</h2>    <p>Morbi posuere mi condimentum dui suscipit vulputate. Donec lectus diam.</p>  </div>  <!--- /.heading -->  <div class="section-one">    <div class="item">Praesent eu elementum.</div>    <div class="item">Praesent eu elementum.</div>    <div class="item">Praesent eu elementum.</div>    <div class="item">Praesent eu elementum.</div>    <div class="item">Praesent eu elementum.</div>  </div>  <!--- /.section-one -->  <div class="section-left">    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.  </div>  <!--- /.section-left -->  <div class="section-right">    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.  </div>  <!--- /.section-right --></div>

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>

Div side by side without float

The usual method when not using floats is to use display: inline-block: http://www.jsfiddle.net/zygnz/1/

.container div {
  display: inline-block;
}

Do note its limitations though: There is a additional space after the first bloc - this is because the two blocks are now essentially inline elements, like a and em, so whitespace between the two counts. This could break your layout and/or not look nice, and I'd prefer not to strip out all whitespaces between characters for the sake of this working.

Floats are also more flexible, in most cases.

How align 2 adjacent divs horizontally WITHOUT float?

Use Position properties when your height and width are fixed

<div style="width:200px;height:100px;position:relative;background:#ccc;">    <div style="background:Blue; position:absolute; left:0%; width:50%; height:100%;">   </div>    <div style="background:red; position:absolute; left:50%; width:50%; height:100%;">   </div></div>

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>

How to float two images side by side without changing their height and width?

Unless you scale the widths of the two images proportionally, then their heights won't scale proportionally either. However, you can calculate the appropriate percentages:

The total width of the two native images is:

501px + 1050px = 1551px

To add a 3% gap between the images, calculate 3% of the total width:

1551px * 3% = 46.53px

Add that value to the total width:

1551px + 46.53px = 1597.53px

Calculate each image's percentage of that total width:

501px / 1597.53px= ~31.36%

1050px / 1597.53px= ~65.73%

The images will scale proportionately to each other if you use those percentages.

body {  margin: 0;}
.eurovan {  width: 31.36%;  float: left;}
.boat {  width: 65.73%;  float: right;}
.feature {  width: 65.73%;  background-color: #F6F8FA;  float: right;  padding: 1.5em;  /* margin: 3% 0 0; */  box-sizing: border-box;  font-size: 10px;  font-family: sans-serif;  text-align: center;}
.feature h3 {  margin: 0 0 1em;  font-size: 1.2em;}
.feature h2 {  font-size: 1.3em;  margin: 0 0 1.2em;}
.button {  background-color: #16D6D1;  padding: 0.9em 2em;  border-radius: .5em;  display: inline-block;}
a {  text-decoration: none;  text-transform: uppercase;  color: inherit;}

<section class="clearfix">  <img class="eurovan" src="https://picsum.photos/id/236/501/850" alt="A cyan coloured Eurovan driving on a winding road through the mountains">  <img class="boat" src="https://picsum.photos/id/238/1050/425" alt="An overhead shot of a boat coming into shore from the ocean">  <div class="feature">    <h3>Feature</h3>    <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamon nonummy nibh euismod tincidunt ut laoreet dolore magna.</h2>    <a href="#" class="button">Read More</a>  </div></section>

---

Related Topics