Horizontal Scrolling Taskbar

1

I’m trying to make a taskbar that you can scroll.

Here’s the html:

<!Doctype html>
<html>
	<title>
		
	</title>
	
	<head>
		<link href = "PracticeTaskbar_Css.css" rel = "stylesheet" type = "text/css"/>
	</head>
	
	<body>
		<div id = "Container">
			<div id = "Header">
			
			</div>
			
			<div id = "Taskbar">
				<div id = "TaskbarLinks">
					<a href = "#"><div class = "addToTaskbar">Home</div></a>
					<a href = "#"><div class = "addToTaskbar">About Us</div></a>
					<a href = "#"><div class = "addToTaskbar">Contact Us</div></a>
					<a href = "#"><div class = "addToTaskbar">Buy Our Product</div></a>
					<a href = "#"><div class = "addToTaskbar">Far From Home</div></a>
					<a href = "#"><div class = "addToTaskbar">Definitely Not About Us</div></a>
					<a href = "#"><div class = "addToTaskbar">Please Don't Contact Us</div></a>
					<a href = "#"><div class = "addToTaskbar">Buy Our Product If You Insist</div></a>
					<a href = "#"><div class = "addToTaskbar">*Sigh...</div></a>
					<!--<a href = "#"><div class = "addToTaskbar"><li><img src = "Head.gif" height = "80"/></li></div></a>-->
					<a href = "#"><div class = "addToTaskbar">Search</div></a>
				</div>
			</div>
			
			<div id = "Center">
				<div id = "LeftColumn">
					<div id = "InnerLeft">
						<p>______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ________________ . 
						       __________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ________________ . 
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ________________ . 
						         ________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ________________ .
						   ________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ________________ .
						   ________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ________________ .
						   ________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ________________ .
						   </p>
					</div>
				</div>
			
				<div id = "RightColumn">
					<div id = "InnerRight">
						<p>______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ________________ . 
						       __________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ________________ . 
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ________________ . 
						         ________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ________________ .
						   ________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ________________ .
						   ________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ________________ .
						   ________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ______________________________________________________________ <br/>
						   ________________ .
						   </p>
						
					</div>
				</div>
			</div>
			
			<div id = "Footer">
			
			</div>
			
		</div>
	</body>
</html>

Here’s the css:

body
{
	margin: 0;
	padding: 0;
	background-color: #00e68a;
}

.addToTaskbar
{
	float: left;
	width: 300px;
	height: 50px;
	display: inline-block;
}

#Center
{
	height: 600px;
	background-color: #00e68a;
}

#Header
{
	width: 100%;
	height: 150px;
	background-color: #00e68a;
}

#Taskbar
{
	width: 100%;
	height: 50px;
	background-color: #333333;
	white-space: nowrap;
	overflow: auto;
}

#TaskbarLinks a
{
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	float: left;
}

#TaskbarLinks a:hover
{
	background-color: #777;
}

#LeftColumn
{
	width: 400px;
	height: 400px;
	background-color: #00cc99;
	margin-left: 12px;
	margin-top: 12px;
	float: left;
}

#InnerLeft
{
	width: 392px;
	height: 392px;
	overflow: scroll;
	margin-right: 7px;
	margin-left: 4px;
	background-color: #ffffff;
}

#RightColumn
{
	width: 850px;
	height: 400px;
	background-color: #00cc99;
	margin-top: 12px;
	float: right;
}

#InnerRight
{
	width: 842px;
	height: 392px;
	overflow: scroll;
	background-color: #ffffff;
	margin-left: 7px;
	margin-right: 12px;
}

::-webkit-scrollbar
{
	width: 0px;
	height: 0px;
}

::-webkit-scrollbar-track
{
	background-color: #008060;
}

#Footer
{
	height: 250px;
	width: 100%;
	background-color: #333333;
}

How do I get the taskbar to scroll horizontally?

2

Giving some fixed width to #TaskbarLinks a and then setting appropriate width to #Taskbar, would resolve this issue. like so,

#Taskbar
{
    width:1000px;
    overflow-x:scroll;    
    height: 50px;
    overflow-y:hidden;
    background-color: #333333;
	white-space: nowrap;
}
#TaskbarLinks a
{
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	float: left;
	width: 200px;
}

we can use calc to find the dynamic width for Taskbar.

3

This didn’t quite work. Not all of the links are showing up and when I actually specify the task bar width to the size of my computer screen, it no longer scrolls. For example, this is what I tried first.

Same html as before.

Css:

body
{
	margin: 0;
	padding: 0;
	background-color: #00e68a;
}

.addToTaskbar
{
	float: left;
	width: 300px;
	height: 50px;
	display: inline-block;
}

#Center
{
	height: 600px;
	background-color: #00e68a;
}

#Header
{
	width: 100%;
	height: 150px;
	background-color: #00e68a;
}

#Taskbar
{
	width: 1000px;
	height: 50px;
	background-color: #333333;
	white-space: nowrap;
	overflow-x: scroll;
	overflow-y: hidden;
}

#TaskbarLinks a
{
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	float: left;
	width: 200px;
}

#TaskbarLinks a:hover
{
	background-color: #777;
}

#LeftColumn
{
	width: 400px;
	height: 400px;
	background-color: #00cc99;
	margin-left: 12px;
	margin-top: 12px;
	float: left;
}

#InnerLeft
{
	width: 392px;
	height: 392px;
	overflow: scroll;
	margin-right: 7px;
	margin-left: 4px;
	background-color: #ffffff;
}

#RightColumn
{
	width: 850px;
	height: 400px;
	background-color: #00cc99;
	margin-top: 12px;
	float: right;
}

#InnerRight
{
	width: 842px;
	height: 392px;
	overflow: scroll;
	background-color: #ffffff;
	margin-left: 7px;
	margin-right: 12px;
}

::-webkit-scrollbar
{
	width: 0px;
	height: 0px;
}

::-webkit-scrollbar-track
{
	background-color: #008060;
}

#Footer
{
	height: 250px;
	width: 100%;
	background-color: #333333;
}

and I got this result:

TaskbarWebpage
TaskbarWebpage1360×654 33.6 KB

And this is what I have now:

body
{
	margin: 0;
	padding: 0;
	background-color: #00e68a;
}

.addToTaskbar
{
	float: left;
	width: 300px;
	height: 50px;
	display: inline-block;
}

#Center
{
	height: 600px;
	background-color: #00e68a;
}

#Header
{
	width: 100%;
	height: 150px;
	background-color: #00e68a;
}

#Taskbar
{
	width: 1366px;
	height: 50px;
	background-color: #333333;
	white-space: nowrap;
	overflow-x: scroll;
	overflow-y: hidden;
}

#TaskbarLinks a
{
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	float: left;
	width: 200px;
}

#TaskbarLinks a:hover
{
	background-color: #777;
}

#LeftColumn
{
	width: 400px;
	height: 400px;
	background-color: #00cc99;
	margin-left: 12px;
	margin-top: 12px;
	float: left;
}

#InnerLeft
{
	width: 392px;
	height: 392px;
	overflow: scroll;
	margin-right: 7px;
	margin-left: 4px;
	background-color: #ffffff;
}

#RightColumn
{
	width: 850px;
	height: 400px;
	background-color: #00cc99;
	margin-top: 12px;
	float: right;
}

#InnerRight
{
	width: 842px;
	height: 392px;
	overflow: scroll;
	background-color: #ffffff;
	margin-left: 7px;
	margin-right: 12px;
}

::-webkit-scrollbar
{
	width: 0px;
	height: 0px;
}

::-webkit-scrollbar-track
{
	background-color: #008060;
}

#Footer
{
	height: 250px;
	width: 100%;
	background-color: #333333;
}

But now the scroll doesn’t work.

4

@Alioune01, Try disabling

::-webkit-scrollbar
{
	width: 0px;
	height: 0px;
}

::-webkit-scrollbar-track
{
	background-color: #008060;
}
5

That didn’t work. It just made the scroll bar appear. I don’t think it has any effect on the functionality of the scroll itself