How to Get Floating Divs Inside Fixed-Width Div to Continue Horizontally

How to get Floating DIVs inside fixed-width DIV to continue horizontally?

div#container {
    height: 275px;
    width: 1000px;
    overflow: auto;
    white-space: nowrap;
}

div#container span.block {
    width: 300px;
    display: inline-block;
}

The trick here is only elements that behave as inline by default will behave properly when set to inline-block in Internet Explorer, so the inner containers need to be <span> instead of <div>.

Floating DIVs in fixed width container to continue align horizontal?

Based on your posted CSS and HTML..

You can't have 3, left floating, divs all taking up the same 100% width unless they stack. This is why the divs stack. Column one takes up 100% of the width, there's no room for column two to also take up 100% of the width unless column two falls below column one.

If you want the columns to actually be columns, you need them to have a width of 33.3%. (one-third of 100%)

And, if you want the columns to be a minimum of 200 pixels wide you don't need a min-width for each column, you simply need a min-width of 600px for the container div.

DEMO

Adding vertical child divs inside a parent div (both fixed width) with dynamic horizontal scrollbar at parent level

Add display: flex; to .newFilterSelectionColumnContainer

2 left floating divs, with fixed size and auto width

Closest to your example:

<div style="float: left; width: 200px;">
</div>
<div style="margin-left: 200px;">
</div>

How to make a div fill a remaining horizontal space?

This seems to accomplish what you're going for.

#left {  float:left;  width:180px;  background-color:#ff0000;}#right {  width: 100%;  background-color:#00FF00;}

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

Make floating div containers stay in place as divs above them expand and overlap

I'd suggest using absolute positioning instead of floats

First you'd need to wrap each row in a relatively positioned block so they will stack and you can position the "cells" inside the "row"

<div class="row">
    <div class="cell">a</div>
    <div class="cell">b</div>
    <div class="cell">c</div>
</div>
<div class="row">
    <div class="cell">d</div>
    <div class="cell">e</div>
    <div class="cell">f</div>
</div>
<div class="row">
    <div class="cell">g</div>
    <div class="cell">h</div>
</div>

Then style it like this

.row{
    position: relative;
    height: 20px;
}
.cell{
    width: 33%;
    outline: 1px dashed blue;
    position: absolute;
}
.cell:nth-of-type(1){
    left: 0;
}
.cell:nth-of-type(2){
    left: 33%;
}
.cell:nth-of-type(3){
    left: 66%;
}
.cell:hover{
    height: 200px;
    background: pink;
}

Two divs side by side, right div fixed width

Write like this:

.right{
 width:150px;
 height:150px;
 float:right;
 background:red;
}
.left{
 height:150px;
 background:green;
 overflow:hidden;
}

HTML

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

Check this http://jsfiddle.net/TW4dn/

wrapping full width divs around a floating div

add overflow: hidden; to .fill

2 rows of divs inside container div that scrolls only horizontally

The only easy way to do this is, add the same div twice.

<div id="nav">
    <div class="thumbsWrap">
        <img alt="thumbnail">
        <img alt="thumbnail">
        <img alt="thumbnail"> 
        and so on and so on......
    </div>
    <div class="thumbsWrap">
        <img alt="thumbnail">
        <img alt="thumbnail">
        <img alt="thumbnail"> 
        and so on and so on......
    </div>
</div>

Demo here http://jsfiddle.net/txCzq/32/

---

Related Topics