PDA

View Full Version : Positioning divs inside a horizontal Scroll Bar


Goody
06-10-2011, 12:10 PM
Hey guys,

sorry if im asking a pretty obvious question here, but im struggling to figure out how to get this to work, and im new to css!

Basically im Creating a horizontal scrollbar to display images, which themselves are contained within divs so i can algin images and text titles next to each other.

I understand how to apply css to the multiple Divs contained within the scrollbar, BUT im unsure whether the scrollbar is defined as the parent...if that makes any sense...Basically there are properties that i want the content/item Divs to inherit from the scrollbar e.g Height 100%.

}
#BodyArea #BodyScroll {
height: 400px;
overflow-x: Scroll;
overflow-y: Hidden;

}
#BodyArea #BodyScroll #Scrollitems {
position:absolute;
height: 400px;
width: 3000px;
}

#item1, #item2, #item3 {
float: left;
position: relative;
width:300px; need this to be 100%?
height: 300px;
}


Im really not great at this stuff but i am trying my best to learn, Please let me know if theres somthing fundamental that i am getting wrong/obviously dont know about... thankyou!

Goody
06-10-2011, 01:03 PM
sorry, that red text should be next to height, obviously...

m1a2x3x7
06-10-2011, 01:49 PM
You're pretty close.

This is how I would do it.

Your CSS


#bodyScroll{
height:400px;
width:300px;
position:relative;
overflow:scroll;
overflow-y:hidden;
}

#bodyArea{
height:400px;
width:1500px;
position:absolute;
}

.item{
float:left;
width:300px;
height:400px;
}
Your HTML


<div id="bodyScroll">
<div id="bodyArea">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
Instead of creating an ID style for each item, create a class. You can use a class multiple times.

Goody
06-10-2011, 02:06 PM
Ah, i've been playing around with classes for a while but thought i was going about it the wrong way... though that worked straight away, thanks buddy!!

m1a2x3x7
06-10-2011, 04:07 PM
No problem. Glad it's working.