Floating big elements next to each other?_问答_开发者

Just a quick question regarding CSS positioning. I have several "segments" on my site which are 100% wide (fills the screen), and I want them floated next to each other. So only the first one will be visible, the other ones will be off-screen. I've tried playing around with positions and the overflow property without luck. Right now they just pop down bel开发者_JS百科ow each other instead of floating.

This would work perfectly if the elements did not exceed the screen width, but as they do, they just pop down as I said earlier. I've tried setting a huge width to the "wrapper", something like 99999px. And then setting the segments to 100%, but that will just fill the whole 99999px width instead of the screen.

Any ideas?

JSFiddle example: http://jsfiddle.net/9xGPb/

Do you mean like this?

Example Fiddle: here

I used my favourite alternative to floats, inline-blocks

if you actually take it out of the fiddle it has some pretty (gaudy?) colours which show that it allows for the min-width: 900px; on the centered_content div to work too, and I removed the absolute positioning for the menu so the content would go below it, for demo only but you may find it useful..

let me know if any good or if you have any questions

Updated with some jQuery and to make corrections for default word-spacing

New Example: here

re: the IE6/7 hack rightly mentioned in the comments;

.segment {
    display: inline-block;
    overflow: hidden;
    width: 0;
}
.segment {display: inline !ie7;}

needn't be a "parse hack" if that's your preference as long as that second rule is given to [lte IE 7] somehow, and separately at that it cannot be combined into the original rule with the * hack or anything, it won't work.. has to be in a separate ruleset.

I discovered word-spacing might be a problem if relying on width to hide, the natural behaviour of inline blocks is to put 3-4px between the elements like the space in between words, the workaround to this is to correct the word-spacing on the wrapper

.segment-wrapper {
   white-space: nowrap;
   word-spacing: -4px;
}

then restore it normal for the actual content divs, same place as you would restore the normal wrapping behaviour

.centered_content {
    width: 900px;
    margin: 0px auto;
    background: #fcf;
    white-space: normal;
    word-spacing: 0;
}

and last, apart from this was fun.. there's 2 effects in that new fiddle - uncomment and comment the other.. forgive me I was playing! :)

The meaning of float is to try to float to the right or left unless there is not room for it.

This means that you cannot ever float an element off the page.

If you need to keep the element off the page, you will need to use a different positioning mechanism like position: absolute.

It sounds like you're creating a horizontal one-page portfolio. I've recently been working on something similar.

Using your fiddle I've set the .segment class to

.segment {width:90%;height:90%;position:absolute;}

and then offset each left positioning further off the screen

#home {background-color:red;left:5%;}
#work {background-color:yellow;left:105%;}
#portfolio {background-color:green;left:205%;}
#contact {background-color:blue;left:305%;}

http://jsfiddle.net/9xGPb/2/

I also added some jQuery logic to switch views for the divs.

I'm still not entirely sure which segments you want to start off the page but this jsfiddle uses positioning to shove the #two div off to the right: http://jsfiddle.net/EdAZP/1/

Which part of your example did you want to start off the page?

Did you try to just hide the other elements and toggle them with some javascript (jQuery is much easier)?

http://api.jquery.com/toggle/