CODEWITHSUNDEEP
csshtmldocument-body
Edu Poch
Edu Poch

Reputation: 1

Floating divs don't expand body width

I'm trying to develop a horizontal web page, with fixed height and variable width.

In order to get it, I need a row of floating <div>s to expand the <body> width.

|------------- body --------------|   /* variable width */
  |-div-| |-div-| |-div-| |-div-|     /*  fixed width   */

The following code doesn't seem to work:

body{
  height: 40px;
}

div{
    width: 2000px;
    height: 20px;
    background: red;
    margin: 10px;
    float: left;
 }

http://jsfiddle.net/7cS2R/12/

Is is possible to do so without using javascript?

Upvotes: 0

Views: 1551

Answers (2)

Christoph
Christoph

Reputation: 51201

Block elements expand to the full width of their parent-element's width. To make them respect their childrens with you can either declare:

display: inline-block;

or

position:absolute;

on your body-element.

EDIT: after you clarified your question - simply add the white-space declaration to your body:

white-space:nowrap;

Demo

Upvotes: 2

LonelyWebCrawler
LonelyWebCrawler

Reputation: 2906

Try this:

body{
height: 40px;
display: inline-block;
}

http://jsfiddle.net/7cS2R/6/

Upvotes: 0

Related Questions