CODEWITHSUNDEEP
htmlcsscss-float
tic
tic

Reputation: 4189

CSS: force float:left without specifying div width

In the following code (https://jsfiddle.net/6t9n0wuu/):

#cont1 {
  width: 50%
}

#div1 {
  width: 10px;
  float: left;
  border: 1px solid black
}

#div2 {
  float: left;
  border: 1px solid black
}
<div id=cont1>
  <div id=div1>a<br>b<br>c<br></div>
  <div id=div2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

the content of div2 is shifted to a new line.

Is it possible to force div2 on the top as (i.e. on the same line of) div1 without specifing its width in CSS?

Upvotes: 2

Views: 167

Answers (9)

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14012

Options to force element to stay on line:

Flexbox

To guarantee elements staying on the same line they can be flex-items (unless you specify flex-wrap: wrap for container). So making #cont1 flexbox container prevents your items from moving to new line. Also float properties will be ignored for flex-items and it's optional to specify width for your items. Demo:

#cont1 {
  /* become a flex-container */
  /* its children will be a flex-items */
  display: flex;
  width: 50%;
}

#div1, #div2 {
  border: 1px solid black
}
<div id=cont1>
  <div id=div1>a<br>b<br>c<br></div>
  <div id=div2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Grid

You just specify your container as grid-container and add templates where you specify column width. Demo:

#cont1 {
  /* become a flex-container */
  /* its children will be a flex-items */
  display: grid;
  width: 50%;
  grid-template-columns: auto auto;
}

#div1, #div2 {
  border: 1px solid black
}
<div id=cont1>
  <div id=div1>a<br>b<br>c<br></div>
  <div id=div2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

For this to work in IE10+/Edge you need to use old syntax and specify cell placement manually unless all grid items will stack in first cell. Demo:

#cont1 {
  /* become a flex-container */
  /* its children will be a flex-items */
  display: -ms-grid;
  display: grid;
  width: 50%;
  grid-template-columns: auto auto;
}

#div1, #div2 {
  border: 1px solid black
}

#div2 {
  -ms-grid-column: 2;
}
<div id=cont1>
  <div id=div1>a<br>b<br>c<br></div>
  <div id=div2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Table

Just add display: table for container and display: table-cell for items. Demo:

#cont1 {
  /* become a flex-container */
  /* its children will be a flex-items */
  display: table;
  width: 50%;
  grid-template-columns: auto auto;
}

#div1, #div2 {
  display: table-cell;
  border: 1px solid black
}
<div id=cont1>
  <div id=div1>a<br>b<br>c<br></div>
  <div id=div2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Upvotes: 1

Ivan
Ivan

Reputation: 11

No, you can not. Without the width specified one way or another the float will take all the space it needs to display its content. Since its contents is some text it will always shift to another line unless the text width is less then the remaining width of the line. Notice that even if you manage to modify content so that it all fits into one line, once you change the size of the container, e.g. by resizing the window, the float can be moved to another line again.

Thus, your options are:

  1. Specify the width, using px, %, calc, whatever.
  2. Use some other layout design: e.g. flexbox or grid (check if all the browsers you have to support work with them)
  3. Use table if what you you want to display is actually some table data.
  4. Don't try to squeeze everything into one row.

Upvotes: 1

vicky patel
vicky patel

Reputation: 705

#cont1 {width: 50%; display:flex;}
#div1 {width:10px;float:left; border:1px solid black}
#div2 { border:1px solid black}
<div id=cont1>
<div id=div1>a<br>b<br>c<br></div>
<div id=div2>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>

Upvotes: 0

Ehsan
Ehsan

Reputation: 12959

Just remove float:left of #div2 and insert margin-left:10px to it.

#div2 {
  float: left;<---------Remove
  margin-left: 10px;<-----Added
  //more code.....
}


#cont1 {
  width: 50%;
}
#div1 {
  width:10px;
  float:left;
  border:1px solid black;
}
#div2 {
  border:1px solid black;
  margin-left: 10px;
}
<div id="cont1">
<div id="div1">a<br>b<br>c<br></div>
<div id="div2">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Upvotes: 1

MTK
MTK

Reputation: 3570

You can also use overflow:visible; to the container to force float

#cont1 {width: 50%,overflow:visible;}
#div1 {width:10px;float:left; border:1px solid black}
#div2 {border:1px solid black;margin-left:12px;}
<div id=cont1>
<div id=div1>a<br>b<br>c<br></div>
<div id=div2>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>

Upvotes: 0

Talha Abrar
Talha Abrar

Reputation: 882

You only need to define your cont1 as display: flex; , that's it.

e.g.

#cont1 {width: 50%; display: flex;}
#div1 {width:10px; border:1px solid black; padding: 0px 20px;}
#div2 {border:1px solid black; padding:0px 20px;}
<div id=cont1>
<div id=div1>a<br>b<br>c<br></div>
<div id=div2>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>

here is a fiddle link

Upvotes: 0

Hip&#243;lito P&#233;rez
Hip&#243;lito P&#233;rez

Reputation: 16

You can use Flex property:

#cont1 {width: 50%; display: flex;}
#div1 {width:10px; border:1px solid black; flex: 0 0 10px}
#div2 {border:1px solid black; flex: 1 1 auto}

https://jsfiddle.net/6t9n0wuu/1/

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122037

If you have defined width on first div you can use calc(100% - div1Width) on second div. You also need to add box-sizing: border-box so that border is included in width of element.

* {
  box-sizing: border-box;
}
#cont1 {
  width: 50%
}
#div1 {
  width: 10px;
  float: left;
  border: 1px solid black
}
#div2 {
  float: left;
  width: calc(100% - 10px);
  border: 1px solid black
}
<div id=cont1>
<div id=div1>a<br>b<br>c<br></div>
<div id=div2>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>

Upvotes: 0

Ashish Mishra
Ashish Mishra

Reputation: 176

see if it works for you :--

#cont1 {width: 50%}
#div1 {width:10px;float:left; border:1px solid black}
#div2 {border:1px solid black;margin-left:12px;}
<div id=cont1>
<div id=div1>a<br>b<br>c<br></div>
<div id=div2>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>

You can use flex-box too.

Upvotes: 1

Related Questions