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 make comment shape using css

    Tab content not showing up

    Hide a partially shown div

    How do I get rid of the big margin between my labels and the input fields?

    How to fill in blank space using html and css

    How do I desaturate and saturate an image using CSS?

    How to center body on a page?

    How to position div element right below and left-aligned to another div

    How can I style a JavaFX SplitMenuButton in CSS

    How do I make a dropdown extend to the left?

    How to do grid of div elements?

    How to change the text my button displays?

    How do I display a continuous chain of image slides using SlideJS?

    Show the menu at the center of the data toggle

    How to dynamically reload a .css?

    How to specify the system’s default serif and sans-serif font-family?

    How can I make my website width fit fully on iphone 5?

    How to reset CSS in inline? [closed]

    How to highlight syntax inside
    tag?

    How to add text or characters using CSS (no javascript)?

    How work with degree or start and stop in linear-gradient CSS3

    How to reuse css styles from Telerik RadControls for ASP.NET Ajax

    How to display a table with a span at its side?

    How to only deregister Wordpress stylesheet for non-logged in users?

    Does anyone know how Pinterest.com's layout works?

    How to make irregularly-shaped SVGs overlap while maintaining all areas clickable?

    How can I get list of all element css attributes with jQuery?

    How to add css to dynamically created tables

    how to make header title with buttons

    How to fire a new css animation when the element already has one?