A Wide Div with Unlimited Width

a wide div with unlimited width

The simplest way is to use white-space: nowrap on the parent, and display: inline-block on the children:

See: http://jsfiddle.net/4Yv83/

I also added overflow-x: auto, because presumably you don't want this.

a wide div with unlimited width

The simplest way is to use white-space: nowrap on the parent, and display: inline-block on the children:

See: http://jsfiddle.net/4Yv83/

I also added overflow-x: auto, because presumably you don't want this.

Make a div containing CSS columns have unlimited width

Here's a solution that works on webkit browsers, Firefox, and IE:

// JS to work around the CSS column bug where the width// is not properly calculated by the browser. We have a// float:right marker at the end of the article. Set the// width of the article to be where the marker is.function resize(){    var article = document.querySelector("article"),        marker = document.querySelector("endmarker");
    article.style.width = (marker.offsetLeft) + "px";}
window.addEventListener("resize", resize);resize();

* { padding: 0; margin: 0; }
holder {    position: absolute;    top: 0; left: 0;    height: 100%;    background: #fed;    white-space: nowrap;}
header,article,footer {    position: relative; display: inline-block; height: 100%; vertical-align: top;    white-space: normal;}
header { background: green; width: 400px;}
endmarker {    position: relative;    display: block;    float: right;    width: 10px;    height: 10px;    background: red;}
article { background: #CCC;
 -webkit-columns: 235px auto;    -moz-columns: 235px auto; columns: 235px auto;        -webkit-column-fill: auto;    -moz-column-fill: auto;    column-fill: auto;     -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0;}
article p { padding: .2em 15px; text-indent: 1em; hyphens: auto;}
footer { background: yellow; width: 450px;}

<holder><header>     <h1>Article Title (width 400)</h1></header><article>    <p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b>    </p>    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo venenatis efficitur. Nam vel ultricies urna, non auctor lorem. Suspendisse sodales, nunc eu pharetra ornare, elit quam scelerisque ex, id congue orci lectus eget turpis. Ut consequat nisi et erat efficitur faucibus. Maecenas laoreet magna nec odio porta, et consequat leo rhoncus. In imperdiet pellentesque justo eu pellentesque. Curabitur ut ante tristique, placerat est porta, porttitor ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed scelerisque est vitae orci elementum, et vehicula quam lacinia. Vivamus vestibulum metus quis dui dictum vehicula. Mauris et tempor libero.</p>    <p>Sed lorem quam, feugiat sit amet vehicula non, ultricies quis quam. Ut lobortis leo ac ex facilisis, vel elementum ante feugiat. Quisque efficitur tellus sed sodales dictum. Mauris sed justo dictum, finibus velit id, pulvinar mi. Phasellus mi augue, finibus ut vestibulum et, volutpat id sapien. Sed feugiat eleifend augue, ut commodo nulla bibendum ac. Nullam quis posuere lectus. Curabitur dictum quam id massa finibus blandit. Nam malesuada metus ut massa ullamcorper luctus. Curabitur vitae dictum orci, a finibus sapien. Maecenas eget nisl tempus, pharetra enim eget, tempor urna. Suspendisse viverra felis bibendum neque rhoncus, id eleifend tortor sodales. Suspendisse sed magna pulvinar, laoreet turpis nec, ultrices enim. Vivamus at auctor arcu. Nunc vitae suscipit tellus. Etiam ut accumsan arcu.</p>    <p>Morbi faucibus, mauris sed blandit ultrices, turpis turpis dapibus quam, quis consectetur erat nibh cursus magna. Donec quis ullamcorper quam, a facilisis leo. Phasellus ut mauris eget risus ultrices lobortis. Pellentesque semper ante eu vehicula pharetra. Vestibulum congue orci non felis vehicula volutpat. Praesent vel euismod ligula. Sed vitae placerat ipsum, a hendrerit felis. Mauris vitae fermentum nunc, non tincidunt magna. Fusce nibh ex, porta sed ante ut, dapibus maximus urna. Nulla tristique magna ipsum, at sodales ipsum feugiat a. Mauris convallis mi vel arcu vehicula elementum. Aliquam aliquet hendrerit lectus, congue auctor ipsum sodales vitae. Phasellus congue, ex non viverra cursus, nunc est fermentum dui, ac tincidunt turpis mauris a tellus. Curabitur sollicitudin condimentum mauris consectetur tincidunt. Morbi vulputate ac augue ut maximus.</p>    <p>Nulla in auctor ligula. In euismod volutpat ex a eleifend. Sed eu elit et nulla faucibus fringilla. Sed posuere metus in elit gravida pharetra. Vivamus a ultricies ipsum. Mauris mollis est nisi, a convallis est iaculis id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam tincidunt blandit metus nec sagittis. Sed faucibus non urna in ullamcorper. Sed feugiat, tellus ut feugiat mollis, ligula neque molestie augue, vitae mattis ligula eros eget augue. Curabitur finibus sodales metus ac finibus. Sed id mollis ante. Phasellus vitae purus vel risus pulvinar aliquet. Vestibulum vitae elementum felis.</p>    <p>Nam ipsum ipsum, consequat in dictum vitae, malesuada eget est. Phasellus elementum lacinia maximus. Maecenas dictum neque ligula, et congue mauris venenatis eu. Pellentesque pretium tortor nec ligula rutrum, a aliquet eros aliquam. Etiam euismod varius ipsum, id molestie massa. Quisque elementum lacus at ipsum egestas facilisis. Maecenas arcu risus, euismod ac lacus ac, euismod dictum nunc. Aenean non felis aliquet mi tincidunt bibendum. Curabitur ultricies ullamcorper gravida. In pretium nibh non eleifend egestas. Cum sociis natoquenatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin auctor lacus erat, sit amet vestibulum lorem mattis in. Aenean dapibus at risus ac lacinia. Vivamus fringilla nulla diam, vel facilisis magna mollis maximus. Sed quis dolor tempor magna pharetra scelerisque. Nam velit felis, mollis sit amet risus et, imperdiet interdum nibh.</p><p>END OF ARTICLE</p><endmarker></endmarker></article><footer>Footer should be 450px wide and appear to the right of everything else.</footer></holder>

How to make div width only to fit its content and the next div to fill the remainder?

you should put

The float causes the element to occupy only its content

The overflow: hidden; causes the next content to occupy the remaining space

.InputDivTitle{
  float: left;
}
.InputDiv{
  position: relative;
  overflow: hidden;
}

see JSFiddle

3 Divs equal width centered within Div (Clean without Floats)

If you want to consider inline-block no need to specify margin. You simply need to set the width and center the elements.

#content-container {  text-align: center;  font-size:0;}#content-container > div {  display: inline-block;  height: 100px;  width: 30%;  font-size:initial;  animation:anime 2s infinite linear alternate;}

#box1 {  background-color: orange;}
#box2 {  background-color: blue;}
#box3 {  background-color: yellow;}
@keyframes anime {  from {    width:30%;  }  to {    width:20%;  }
}

<div id="content-container" class="container">  <div id="box1">    <h1>Box 1</h1>  </div>  <div id="box2">    <h1>Box 2</h1>  </div>  <div id="box3">    <h1>Box 3</h1>  </div></div>

Width equal to content

By default p tags are block elements, which means they take 100% of the parent width.

You can change their display property with:

#container p {
   display:inline-block;
}

But it puts the elements side by side.

To keep each element on its own line you can use:

#container p {
   clear:both;
   float:left;
}

_{(If you use float and need to clear after floated elements, see this link for different techniques: http://css-tricks.com/all-about-floats/)}

Demo: http://jsfiddle.net/CvJ3W/5/

Edit

If you go for the solution with display:inline-block but want to keep each item in one line, you can just add a <br> tag after each one:

<div id="container">
  <p>Sample Text 1</p><br/>
  <p>Sample Text 2</p><br/>
  <p>Sample Text 3</p><br/>
</div>

New demo: http://jsfiddle.net/CvJ3W/7/

Why does positioning effect div width?

The behaviour is governed by the spec. Absolute positioned elements have dedicated rules about how widths are calculated: http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width and http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width

---

Related Topics