fluid page and fixed width before scrolling

[insei]

im not really sure how to explain this the best way, but if you take a look at this frontpage,

http://badoo.com/

you can see that even tho the "background" which is not a singe background picture but information gathered from a database, but when you resize the window the width scroller doesnt appear until a fixed width size.

how can this be achieved?

regards,
alex

[xetea]

Use the min-width css property.

[insei]

its that simple? thanks!

XOXO

[insei]

i tried to do this but couldnt make it work..

here is what i have so far:

http://www.migo.no/

the site is ignoring the left side when scrolling, but not the right side. i guess when the distances are too far the scroll kicks inn :S

i basicly want the scrolling to kick in when the window size is less then the green zone.. im kind of stuck here.. hope i can get some advice here

best of regards,
alex

here is the css:

/* ///////////////////// WRAPPERS ///////////////////// */

#page_wrapper {
    position: relative;
    /* overflow: hidden; */
    width: 980px;
    height: 400px;
    background-color: green;
    margin: 23px auto 0px auto;
}

/* ///////////////////// IMG FRAMES ///////////////////// */

#f1_48, #f2_48, #f3_72, #f4_72, #f5_120, #f6_48, #f7_72,
#f8_32, #f9_48, #f10_120, #f11_72, #f12_72, #f13_32,
#f14_72, #f15_120, #f16_72, #f17_48, #f18_120, #f19_32,
#f20_32, #f21_72, #f22_72, #f23_72, #f24_48, #f25_48,
#f26_32, #f27_48, #f28_72, #f29_120, #f30_72, #f31_48,
#f32_48, #f33_32, #f34_48, #f35_32 {
    position: absolute;
    background-color: #fff;
    border: 1px solid #bfbfbf;
    padding: 2px;
    
    -moz-box-shadow: 0px 0px 2px #cbcbcb;
    -webkit-box-shadow: 0px 0px 2px #cbcbcb;
    box-shadow: 0px 0px 2px #cbcbcb;
}

#f1_48 {
    top: 82px;
    left: -103px;
    width: 48px;
    height: 48px;
}
#f2_48 {
    top: 0px;
    left: 27px;
    width: 48px;
    height: 48px;
}
#f3_72 {
    top: 58px;
    left: 3px;
    width: 72px;
    height: 72px;
}
#f4_72 {
    top: 58px;
    left: 85px;
    width: 72px;
    height: 72px;
}
#f5_120 {
    top: 10px;
    left: 167px;
    width: 120px;
    height: 120px;
}
#f6_48 {
    top: 82px;
    left: 297px;
    width: 48px;
    height: 48px;
}
#f7_72 {
    top: 58px;
    left: 379px;
    width: 72px;
    height: 72px;
}
#f8_32 {
    top: 16px;
    left: 461px;
    width: 32px;
    height: 32px;
}
#f9_48 {
    top: 82px;
    left: 485px;
    width: 48px;
    height: 48px;
}
#f10_120 {
    top: 10px;
    left: 826px;
    width: 120px;
    height: 120px;
}
#f11_72 {
    top: 58px;
    left: 957px;
    width: 72px;
    height: 72px;
}
#f12_72 {
    top: 58px;
    left: 1145px;
    width: 72px;
    height: 72px;
}
#f13_32 {
    top: 140px;
    left: -145px;
    width: 32px;
    height: 32px;
}
#f14_72 {
    top: 140px;
    left: -45px;
    width: 72px;
    height: 72px;
}
#f15_120 {
    top: 140px;
    left: 37px;
    width: 120px;
    height: 120px;
}
#f16_72 {
    top: 140px;
    left: 167px;
    width: 72px;
    height: 72px;
}
#f17_48 {
    top: 270px;
    left: 167px;
    width: 48px;
    height: 48px;
}
#f18_120 {
    top: 140px;
    left: 249px;
    width: 120px;
    height: 120px;
}
#f19_32 {
    top: 270px;
    left: 295px;
    width: 32px;
    height: 32px;
}
#f20_32 {
    top: 270px;
    left: 337px;
    width: 32px;
    height: 32px;
}
#f21_72 {
    top: 140px;
    left: 379px;
    width: 72px;
    height: 72px;
}
#f22_72 {
    top: 222px;
    left: 379px;
    width: 72px;
    height: 72px;
}
#f23_72 {
    top: 140px;
    left: 461px;
    width: 72px;
    height: 72px;
}
#f24_48 {
    top: 222px;
    left: 461px;
    width: 48px;
    height: 48px;
}
#f25_48 {
    top: 222px;
    left: -103px;
    width: 48px;
    height: 48px;
}
#f26_32 {
    top: 140px;
    left: 826px;
    width: 32px;
    height: 32px;
}
#f27_48 {
    top: 140px;
    left: 868px;
    width: 48px;
    height: 48px;
}
#f28_72 {
    top: 270px;
    left: 875px;
    width: 72px;
    height: 72px;
}
#f29_120 {
    top: 140px;
    left: 957px;
    width: 120px;
    height: 120px;
}
#f30_72 {
    top: 58px;
    left: 957px;
    width: 72px;
    height: 72px;
}
#f31_48 {
    top: 270px;
    left: 1029px;
    width: 48px;
    height: 48px;
}
#f32_48 {
    top: 140px;
    left: 1087px;
    width: 48px;
    height: 48px;
}
#f33_32 {
    top: 198px;
    left: 1087px;
    width: 32px;
    height: 32px;
}
#f34_48 {
    top: 270px;
    left: 1145px;
    width: 48px;
    height: 48px;
}
#f35_32 {
    top: 304px;
    left: 461px;
    width: 32px;
    height: 32px;
}

and the html:

<div id="page_wrapper">
    
    <div id="f1_48">

    </div>

    <div id="f2_48">

    </div>

    <div id="f3_72">

    </div>

    <div id="f4_72">

    </div>

    <div id="f5_120">

    </div>

    <div id="f6_48">

    </div>

    <div id="f7_72">

    </div>

    <div id="f8_32">

    </div>

    <div id="f9_48">

    </div>

    <div id="f10_120">

    </div>

    <div id="f11_72">

    </div>

    <div id="f12_72">

    </div>

    <div id="f13_32">

    </div>

    <div id="f14_72">

    </div>

    <div id="f15_120">

    </div>

    <div id="f16_72">

    </div>

    <div id="f17_48">

    </div>

    <div id="f18_120">

    </div>

    <div id="f19_32">

    </div>

    <div id="f20_32">

    </div>

    <div id="f21_72">

    </div>

    <div id="f22_72">

    </div>

    <div id="f23_72">

    </div>

    <div id="f24_48">

    </div>

    <div id="f25_48">

    </div>
    
    <div id="f26_32">

    </div>    

    <div id="f27_48">

    </div> 

    <div id="f28_72">

    </div>

    <div id="f29_120">

    </div> 

    <div id="f30_72">

    </div> 

    <div id="f31_48">

    </div> 

    <div id="f32_48">

    </div>

    <div id="f33_32">

    </div>

    <div id="f34_48">

    </div>

    <div id="f35_32">

    </div>

</div>

[xetea]

Do you have Firebug? It's really awesome when you want to figure out how a site's layout works.

Anyway, this html should work:

<div style="width: 100%; min-width: 980px; overflow: hidden;">
<div id="page_wrapper">
    
    <div id="f1_48">

    </div>

    <div id="f2_48">

    </div>

    <div id="f3_72">

    </div>

    <div id="f4_72">

    </div>

    <div id="f5_120">

    </div>

    <div id="f6_48">

    </div>

    <div id="f7_72">

    </div>

    <div id="f8_32">

    </div>

    <div id="f9_48">

    </div>

    <div id="f10_120">

    </div>

    <div id="f11_72">

    </div>

    <div id="f12_72">

    </div>

    <div id="f13_32">

    </div>

    <div id="f14_72">

    </div>

    <div id="f15_120">

    </div>

    <div id="f16_72">

    </div>

    <div id="f17_48">

    </div>

    <div id="f18_120">

    </div>

    <div id="f19_32">

    </div>

    <div id="f20_32">

    </div>

    <div id="f21_72">

    </div>

    <div id="f22_72">

    </div>

    <div id="f23_72">

    </div>

    <div id="f24_48">

    </div>

    <div id="f25_48">

    </div>
    
    <div id="f26_32">

    </div>    

    <div id="f27_48">

    </div> 

    <div id="f28_72">

    </div>

    <div id="f29_120">

    </div> 

    <div id="f30_72">

    </div> 

    <div id="f31_48">

    </div> 

    <div id="f32_48">

    </div>

    <div id="f33_32">

    </div>

    <div id="f34_48">

    </div>

    <div id="f35_32">

    </div>

</div>
</div>

[insei]

thank you so much, that was really helpful!

i dont have firebug, never tried it before, gonna install it now. thanks for the advice!

[xetea]

i dont have firebug, never tried it before, gonna install it now. thanks for the advice!

Check out the inspect function in Firebug, I can't live without it. It's addictive.