Expand Container Div with Content Width

Expand container div with content width

Something like this should work:

#container, #child_container, .child { 
    position: relative; 
    float: left;
}

How to expand a div to its content width WHEN it is larger than its parent?

You can use display: inline-block; on the #content-div

make div's height expand with its content

You need to force a clear:both before the #main_content div is closed. I would probably move the <br class="clear" />; into the #main_content div and set the CSS to be:

.clear { clear: both; }

Update: This question still gets a fair amount of traffic, so I wanted to update the answer with a modern alternative using a new layout mode in CSS3 called Flexible boxes or Flexbox:

body {  margin: 0;}
.flex-container {  display: flex;  flex-direction: column;  min-height: 100vh;}
header {  background-color: #3F51B5;  color: #fff;}
section.content {  flex: 1;}
footer {  background-color: #FFC107;  color: #333;}

<div class="flex-container">  <header>    <h1>     Header       </h1>  </header>
  <section class="content">    Content  </section>
  <footer>    <h4>      Footer    </h4>  </footer></div>

Expand container div with content set to nowrap

You can set .parent{display:inline-block;} If you want the borders to go all the way to the right of the content.

.parent {  border: 1px dotted blue;  display: inline-block;}.parent p {  border: 1px dotted red;  white-space: nowrap;}

<div class='parent'>  <p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>  <p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p></div>

Make child div expand to width of overflown content

You can set display: table-row on .match, and set the border on .line

.match {
  display: table-row;
}
.match ~ .match .line:first-child {
  border-top: 1px solid red;
}

jsFiddle

or

.match {
  display: table-row;
}
.match:not(:first-child) .line:first-child {
  border-top: 1px solid red;
}

jsFiddle

Expand div width with content

I'm not familiar with tailwind, but by checking the default styles it assigns in the inspector I determined that the problem is caused by images (img tags) having a default max-width: 100% assigned to them, which makes the layout calculation confusing in this case, since it's container does not have a given width.

This can be solved by adding the max-w-none class to the image to disable this rule like this:

<div class="flex-shrink-0">
    <img class="h-10 w-10 rounded-full max-w-none" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Sample Image" />
</div>

Expand elements to width of div

Option 1 - for modern browsers

• you can use flexbox for that

.container {  display: flex}a {  flex: 1;  position:relative;  text-align:center}a::after {  content: "|";  position: absolute;  right:0}a:last-of-type::after {  content: ""}

<div class="container">  <a class="alphabetLinks">A</a>  <a class="alphabetLinks">B</a>  <a class="alphabetLinks">C</a>  <a class="alphabetLinks">D</a>  <a class="alphabetLinks">E</a>  <a class="alphabetLinks">F</a>  <a class="alphabetLinks">G</a>  <a class="alphabetLinks">H</a>  <a class="alphabetLinks">I</a>  <a class="alphabetLinks">J</a>  <a class="alphabetLinks">K</a>  <a class="alphabetLinks">L</a>  <a class="alphabetLinks">M</a>  <a class="alphabetLinks">N</a>  <a class="alphabetLinks">O</a>  <a class="alphabetLinks">P</a>  <a class="alphabetLinks">Q</a>  <a class="alphabetLinks">R</a>  <a class="alphabetLinks">S</a>  <a class="alphabetLinks">T</a>  <a class="alphabetLinks">U</a>  <a class="alphabetLinks">V</a>  <a class="alphabetLinks">Y</a>  <a class="alphabetLinks">Z</a>  <a class="alphabetLinks">ALL</a></div>

How to make div expand when its content?

Use min-height instead of height.

Make div container auto-expand width to the left instead of the right when text is added

position: relative on the parent and right: 0 on the absolutely positioned child will align it to the right side of the parent, and the element will grow to the left.

Your ul/li structure is invalid, too. An a can't be a child of a ul - you should move the a's inside the li's

.status-dropdown-arrow {  float: right;  color: #b9adad;  position: relative;}
.status-dropdown-arrow ul.fallback {  position: absolute;  border: 1px solid #d8d8d8;  border-radius: 3px;  padding: 5px;  z-index: 1000;  background-color: #f6f4f4;  list-style: none;  margin-top: 0px;  right: 0;}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="status-dropdown-arrow pointer">  <i class="fa fa-angle-down" aria-hidden="true"></i>  <ul class="fallback">    <li><a href="">Unfollow</a></li>    <li><a href="">Follow</a></li>    <li><a href="">Report</a></li>  </ul></div>

Expand parent DIV to overflowing content width

To my understanding, wrapping each .col-sm-12 into their own parent .row is a verbose way of having all .col-sm-12 in a single .row container, as .col-sm-12s are always wrapping into a new line.

So, in case your setup allows for removing the intermediate .row tags, the only additional line of css you have to write is float: left; on .row. (In the example below I used the id #custom on .container-fluid to isolate this modification from the rest of your page).

body {    color: #fff;    padding: 10px;}.container-fluid {    background-color: #333;    overflow: auto;}.row1 {    background-color: yellow;  }/*.row2 {    background-color: orange;}*/.short-content {    background-color: red;    width: 100%;}.long-content {    width:2000px;    background-color: blue;}
#custom .row {    float: left;}

<div id="custom" class="container-fluid">    <div class="row row1">        <div class="col-sm-12">            <div class="long-content">                Long content            </div>        </div>    <!-- </div> -->
    <!-- <div class="row row2"> -->        <div class="col-sm-12">            <div class="short-content">                THe jQuery plugin here is too wide to fit but won't overflow because its width is set to match its parent.            </div>        </div>    </div></div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>

---

Related Topics