Horizontal Scrolling Window

HTML & CSS
1

I’m creating a page with a window, similar to the screenshot window you get on the iTunes App Store pages, showing a horizontally scrolling, wider page of information.

Have looked at, and successfully implemented the example documented here http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/

On my implementation I have 3 ‘post’ sections, the middle one double width.

Below is the layout I’m trying to achieve, the 3rd ‘post’ is omitted, as is the outer container just for clarity as it’s quite messy. ‘post’ sections in red.

820×300 2.87 KB

The first section is not a problem, the second one is and I’m struggling to get the boxes lined up.

Firstly, should I not expect to see them lined up until I have ALL the divs in the section in place? I’m thinking that might be right as the boxes affect each other.

Is there any frameworks available that would make this easier? I can see it’s just a case of a grid, sections of 84 pixels, with each box breaking out of the grid. I’ve had a quick look at Bootstrap, but wasn’t sure if that would help.

HTML

<div id="horizon">
		<div class="post">
        <div id="oneHead">
        Box oneHead
        </div>
        <div id="oneCont">
		Box oneCont
		</div>
        <div id="oneFoot">
        <span class="lstPrice">Box lstPrice</span>
        </div>
		</div>
		<div class="post-w">
        	<div id="twoHead">Box twoHead</div>
        	<div id="twoSubHead">Box twoSubHead</div>
            <div id="twoSpacer">Box twoSpacer</div>
            
            <div id="twoImgHead">
            	
            </div>
            
            <div id="twoBar"></div>
            <div id="twoImgFoot">
            	
			</div>
            
		</div>

		<div class="post">
            		
		</div>

	</div>

CSS

#horizon {
	width: 80%;
	height: 504px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	overflow-x: auto;
	overflow-y: hidden; 
	
	border-style: solid;
	border-width: 1px;
	border-color: #333;
}

.post {

	width: 504px;
	height: 504px;
	margin-right: 5px;
}

.post-w {

	width: 1008px;
	height: 504px;
	margin-right: 5px;
}

#onehead {

	/*position: relative;*/
	width: 504px;
	height: 84px;
	background-color: #333;
	color: #FFF;
	font-size: 28px;
	padding-left: 4px;
}

#oneCont {

	/*position: relative;*/
	width: 504px;
	height: 336px;
}

#oneFoot {

	/*position: relative;*/
	width: 504px;
	height: 84px;
	background-color: #333;
	color: #FFF;
}

#twoHead {

	/*top: 0px;
	left: 0px;*/
	width: 164px;
	height: 84px;
	background-color: #333;
	color: #FFF;
	font-size: 28px;
	padding-left: 4px;
	margin-right: 4px;
	float: left;
}

#twoSubHead {

	/*top: 0px;
	left: 0px;*/
	width: 164px;
	height: 84px;
	background-color: #BF8885;
	color: #FFF;
	font-size: 28px;
	padding-left: 4px;
	margin-right: 4px;
	float: left;
}

#twoSpacer {

	top: 0px;
	left: 0px;
	width: 164px;
	height: 42px;
	/*float: left;*/
}
#twoBar {

	top: 0px;
	left: 0px;
	width: 504px;
	height: 48px;
	background-color: #333;
	/*float: left;*/
	margin-top: 4px;
	margin-bottom: 4px;
}

#twoImgFoot {

	width: 336px;
	height: 224px;
	/*float: left;*/
}

.twoImgHead {

	top: 0px;
	left: 0px;
	width: 336px;
	height: 224px;
	/*float: left;*/

}

Any tips, suggestions, help, ideas, or even links to things that would help would be appreciated.

2

First, a word of caution. Horizontal scrolling is not widely used because visitors hate it. Also, that it may not be responsive. Responsive design is based on floats, ems or % and things like that. Positioning may be included, depending on the design and type of positioning you use but normally it will not.

Once I’ve said this, it is good that you have removed/commented your floats.

Floats will not work here because a float calculates if it can be placed on the side if there’s enough width in the window to do so. Since part of your content will be hidden, you can’t use floats. Everything will be based on positioning.

With the second section, do you mean the whole second red rectangle, with all those little rectangles in it?

edit: I went to the iTunes page and I didn’t find what you were talking about. Maybe you have to be logged in to see that, don’t know

3

Hi, thanks for responding.

Yes, that’s correct, the second red rectangle with the little rectangles in it. It does look messy drawn out like that.

Apologies I should have included an example. So, for example this app page when opened in a browser rather than iTunes. The screenshots section.

The ‘post’ and ‘post-w’ sections are all fixed sized, and the content within them will be fixed too, only everything within ‘horizon’ will be partially hidden. So I’m guessing that the floats would be affected by the hiding caused by ‘horizon’?

I did try using ‘position: absolute;’ and ‘position: relative;’ but also had problems, however I think I may have had floats still in there too.

Is there a way when using ‘position: absolute;’ to have the ‘top: 0;’ ‘left: 0;’ be taken from the top left corner of the ‘post’ box, or is it always from the top left corner of the browser?

4

Ok. I think I have to think a bit about this and I still not sure of what look you want to achieve.

The reason that I wouldn’t use floats for this is because floats remove the floated box out of the regular flow and calculate its position in relation to the width of the box itself and the space available in the window, moving the container as far left/right as it can (normally, until it finds another floated element or till it finds the border of the window)

Simple Example: The browser window is 900px wide. I have three boxes.

The first is floated left and 150px wide
The second is floated left and 600px wide
The third is floated left too, but is 225px

150px+600px+225px > 900px

The third box doesn’t have enough room to be in the same line with the others, so it will move down (and floating it right wouldn’t change a thing)

This floated box may be on one of the “hidden” content but, if nothing else is floated and the element is floated left, it will go all the way to the left, with the visible content.

In addition to this, mixing floats and positions is also harder to control so it works better if you go all the way with positioning or all the way with floats.

5

Ok, great thanks for that.

I’ll keep pushing with my code too.

Thanks for your help.

6

Absolutely. :stuck_out_tongue: You just have to give the post box position: relative, meaning that the positioned children will now be placed in relation to the box.

I don’t really understand what your overall question is, though. Could you provide a tl;dr version?

8

Hi Ralphm.

Sorry, yes I realise I’m not often very good at explaining things.

Not really a specific question as such. I was looking for some tips and advice on getting the layout I wanted.

The smaller rectangles in the ‘post-w’ box were not positioning quite where I wanted or expected. Wanted to know where I’m going wrong.

I will try using the ‘position: relative;’ in post-w and see how that works, thank you. :smile:

9

Ralphm.

That was a brilliant suggestion, I wasn’t aware you could do absolute positioning within a div container like that. Showing up my poor CSS skills here, but learning.

Thank you very much.

10

You’re welcome.

OK, I see you were just trying to arrange the boxes as pictured.

You could use floats for this, but to do so, you’d need to add some wrapping divs. You’d start with three rows. In the image below, I’ve just highlighted the first row, which represents a container div:

Then within that, have two more floated divs:

Then within each of those, two more floated divs:

Then, within the left (pink) one, you’d have three divs (which just stack one atop the other).

11

That’s great stuff, thank you for that, and your time.

I shall try both methods, see which ones work out best.

Is there a preferred way of doing this, or is it just down to personal choice? Is there any benefits of one over the other?

12

There are lots of “well, depends” to consider. Firstly, your layout depends on a lot of fixed heights, which are dangerous in web design. Assuming you have fixed heights on those boxes, you layout will explode if someone resizes their base font size, for example. So as a general rule, be really careful of stuff like this. I wouldn’t consider a layout like that except, perhaps, for images.

As another general rule, I’d say avoid absolute positioning as much as possible, as it’s very inflexible. That said, I don’t think there’s a big argument either way for which to use in this situation.

Other options we could use here would be display: table and also display: flex (the latter is new kid on the block), but I’m not sure we need to go there at this stage.

There will also be grid layout coming along soon, which might also be an option one day, although I believe it’s more geared towards whole page layouts.