How to let 3 divs displayed in line, won't wrap if I resize the browser?


Tags: css,html

Problem :

Please see the demo here: http://jsfiddle.net/Freewind/Vkp4U/

The html:

<div class="outer">
    <div class="x">x</div>
    <div class="y">y</div>
    <div class="z">z</div>
</div>​

The css:

.outer {
    border: 1px solid black;
    overflow: scroll-x;
}

.x {
    width: 400px;
    border: 1px solid red;
    float:left;
}

.y {
    width: 400px;
    border: 1px solid yellow;
    float:left;
}

.z {
    width: 400px;
    border: 1px solid blue;
    float:left;
}​

How to let the 3 inner divs displayed in line, won't wrap if I resize the browser to smaller?

Limitations:

  1. the width of outer div should not be specified
  2. the width of inner divs are fixed


Solution :

Hi you can define display table and table-cell in you css properties as like this

Css

.outer {
    border: 1px solid black;
    overflow: scroll-x;

    display:table;
}

.x {
    width: 400px;
    border: 1px solid red;
    display:table-cell;
}

.y {
    width: 400px;
    border: 1px solid yellow;
    display:table-cell;
}

.z {
    width: 400px;
    border: 1px solid blue;
    display:table-cell;
}

HTML

<div class="outer">
<div class="x">x</div>
<div class="y">y</div>
<div class="z">z</div>
</div>​
​

Live demo http://jsfiddle.net/Vkp4U/5/


    CSS Howto..

    How to force child element adherence to `flex: nowrap;` CSS directives

    How do I style jQuery UI tabs vertically with a correctly themed border?

    How to get CSS attributes assigned to a html table?

    White space in between banner image and menu bar on site-only 1080px screen and lower. How to fix? [closed]

    How to target iPhone 3GS AND iPhone 4 in one media query?

    How to customize style of numeric “li” in css [closed]

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

    How to disable IE11 WebBrowser control scaling

    How to add Video from project directory in the background of Div

    How to put a div in center of browser using CSS?

    How to add style or put a class in a php form_submit button

    How to add Get in Touch page in webpage? [closed]

    How to remove flexbox default padding/margin/pagemargin?

    How to add css style in php email?

    How to reset Chrome dev tools CSS styles filter?

    How to tell what in CSS files that is not used? [duplicate]

    How to make header/body/footer 'popup' div with variable height body?

    How does tablesort.js create the sort indicator arrows

    How to expand CSS column to available space?

    How do I make it impossible to highlight text using CSS?

    How to include custom css in Extjs 6?

    How to correctly apply a CSS style to all the images in a div having a specific class?

    How to correctly apply the .clearfix:after class to HTML?

    How to show only the div with id while hiding other divs using CSS only

    How may I stack multiple html/css buttons vertically along the center of the page?

    How to fill video element with poster image even if the poster image is a different aspect ratio than its video element? [duplicate]

    How to Protect an HTML element from it's respective assigned CSS

    jQuery-Based Dropdown Shows Gap Outside of Firefox

    How to rotate a picture using css and javascript

    Skeleton CSS - how to span the width of the screen?