How do I alter this HTML/CSS to make the container expand horizontally to the floated children?


Tags: html,css

Problem :

This keeps putting the child divs vertically.

HTML

<div class="outer">
    (other stuff here too)

    <div class="containingBox">
        <div class="container">
            <div class="child"></div>
            <div class="child"></div>
        </div>
    </div>
</div>

CSS

.outer
{
    position: relative;
    top: 0px;
    left: 0px;
    width: 700px;
    margin-top: 15px;
}

.containingBox
{
    position: relative;
    top: 0px;
    left: 0px;
    width: 700px;
    height: 300px;
    background-color: red;

}

.container
{
    position: absolute;
}

.child
{
    position: relative;
    width: 700px;
    height: 300px;
    margin-right: 25px;
    float: left;
    background-color: blue;
}

http://jsfiddle.net/Ed3qL/

(I have removed the overflow-x: hidden on both containingBox and outer so you can see the issue.)

EDIT: You can see it works only until I add a parent outside the parent!!

This works: http://jsfiddle.net/seB5F

This does not: http://jsfiddle.net/seB5F/1014/



Solution :

Here's what I did to get it working:

  • .outer - Removed position properties.

  • .containerBox - Removed class altogether.

  • .container

    • Removed position properties.

    • Added white-space: nowrap; and overflow-x: scroll.

  • .child

    • Removed position and float properties.

    • Added display: inline-block.

  • Added a .child:last-child style that removes the margin-right: 25px; from the end.

See working jsFiddle demo


HTML

<div class="outer">(other stuff here too)
    <div class="container">
        <div class="child">test 111</div>
        <div class="child">test 222</div>
    </div>
    <div class="container">
        <div class="child">test 333</div>
        <div class="child">test 444</div>
    </div>
</div>


CSS

.outer {
    width: 700px;
    height: 300px;
    margin-top: 15px;
}
.container {
    width: 100%;
    background-color: red;
    overflow-x: scroll;
    white-space: nowrap;
}
.child {
    display: inline-block;
    width: 700px;
    height: 300px;
    margin-right: 25px;
    background-color: blue;
}
.child:last-child {
    margin-right: 0;
}

    CSS Howto..

    How to make ASP CheckBoxList labels stay on same line as checkbox

    How to force a hover state with jQuery?

    How to construct CSS selector targeting attribute with value containing an ASCII line feed?

    How can I get this chart to display next to data table in CSS?

    How do I edit the code of a WordPress site?

    Third level drop down css wont show & content/links are out of order?

    How does one customize the appearance of jquery.perfect-scrollbar?

    how to combine multiple css class selectors for jquery buttonset?

    How to position
    below rest of elements

    How to define multiple CSS attributes in JQuery?

    How do Pinterest DropDown menu's work?

    how to fix the button so that they don't scroll with contents

    How to remove blue border around the button in Firefox?

    How to delay Hide/Show events until Iframe loads after a submit

    How to deal with my sharepoint datetime control css?

    how to make the images always in center

    Dynamic HTML 3 layers nested quotes - how to do?

    How do I differentiate between IE versions 6 to 10 using IE CSS Hacks?

    Not floating on same line, how to fix css

    How are media queries counted in IE's CSS selectors limit?

    how to text zoom effect in css

    HTML layout with vertical divider and menu between sections - how?

    CSS How to animate a transition from opacity 0 upon hover

    How to read DOM in React

    How to get a floating-DIV to fill available space within its parent DIV?

    How to position main content below header and footer in css

    How can I make Non-English quotation marks with a help of CSS? [closed]

    how to make multiple inline dropdown lists cross platform compatible?

    How to append an
  • to a
      and set css on the
    • at the same time with jquery
  • How to get rid of the left and top margins in css when using html2pdf