[RESOLVED] Have 5 sections stretch to browser width...

**lazyminion** · 10-30-2012, 11:03 PM

Hello,

Sorry unsure on how to explain this properly...

But say i have a div and i only want 5 sections in there and have this fixed on the page so you cant scroll past it...

How would i make it so that each section is separated equally depending on the size of the browser, of course having a min-width....

So try saying it again section 1 always touching the top of browser windows, section 5 always touching bottom of the browser windows, so margin auto changing between the sections...

Just what i got if you wanna add to it...

Code:

<div id="container">
<div id="test">
					<section>
						<hgroup>
							<h2> Steel </h2>
						</hgroup>
						<p> Te bla is cool </p>
					</section>
					<hr />
					<section>
						<hgroup>
							<h2> Plastic </h2>
						</hgroup>
						<p> always cool c word! </p>
					</section>
					<hr />
					<section>
						<hgroup>
							<h2> Orange </h2>
						</hgroup>
						<p> yes sounds goo ain! </p>
					</section>
					<hr />
					<section>
						<hgroup>
							<h2> purple </h2>
						</hgroup>
						<p> Purple is cool so **** your dick slut </p>
					</section>
					<hr />
					<section>
						<hgroup>
							<h2> Blue </h2>
						</hgroup>
						<p> Some monkeys have blue butts!! WTF RIGHT?</p>
					</section>
					<hr />
					<section>
						<hgroup>
							<h2> Red </h2>
						</hgroup>
						<p> Red Knobs can be mistaken for cherry sause......</p>
					</section>
				</div>	
</div>

Code:

#container {
width:25%;
z-index:-1;
position:fixed;
margin-left:75%;
float:right;
height:100%;
background-color:purple;
}

#test {
padding: 10px;
}

**jedaisoul** · 10-31-2012, 07:30 AM

As you are using position: fixed, the way to set up the 5 sections is:

HTML

<div id="container>
<div id="s1">
section 1
</div>
<div id="s2">
section 2
</div>
<div id="s3">
section 3
</div>
<div id="s4">
section 4
</div>
<div id="s5">
section 5
</div>
</div>

CSS

#s1 {
position:absolute;
width: 100%;
top: 0;
bottom:80%;
left:0;
right:0;
}
#s2 {
position:absolute;
width: 100%;
top: 20%;
bottom:60%;
left:0;
right:0;
}
#s3 {
position:absolute;
width: 100%;
top: 40%;
bottom:40%;
left:0;
right:0;
}
#s4 {
position:absolute;
width: 100%;
top: 60%;
bottom:20%;
left:0;
right:0;
}
#s5 {
position:absolute;
width: 100%;
top: 80%;
bottom:0;
left:0;
right:0;
}

All %s are relative to the containing <div>.
I haven't tested it, but I think that should work.