Weird Behavior with 100% Elements

Azercii · June 15, 2014

I'm having a weird issue with any elements that are given a width: 100% or width: auto. If the window is re-sized smaller. It seems to cut a chunk off and wreck hell upon the layout. I thought it was my code so I borrowed a few from tutorials etc with the same results. I've just installed FireFox also, thinking it was a Chrome bug, but that gives the same result too..

http://shanesdomain.byethost32.com/

I might be missing something obvious from lack of sleep, but could anyone assist this? :happy-04:

body
{
	background: url(../images/background.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}



#topbar-navigation
{
	width: auto;
	height: 48px;
	background: #080d10;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	top: 0;
	left: 0;
	right: 0;
	display: inline-block;
	text-align: center;
	border-bottom: 1px solid #262b2f;
	z-index: 1;
}



#adblock-warning
{
	width: auto;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	top: 0;
	left: 0;
	right: 0;
	background: #344152;
	font-family: 'sinkin_sans400_regular';
	color: #b6b6b6;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 49px;
	text-align: center;
	font-weight: normal;
	font-size: 10px;
	white-space: nowrap; 
}



#maincontainer
{
	width: 960px;
	height: 1000px;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	margin-top: 150px;
	top: 0;
	left: 0;
	right: 0;
	background: #f2f2f2;
}





.user-icon-notif
{
	height: 20px;
	width: 20px;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;
	top: 0;
	left: 875px;
	right: 0;
}



.user-register
{
	height: 20px;
	width: 20px;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;
	top: 0;
	left: 815px;
	right: 0;
	text-decoration: none;
	font-family: 'sinkin_sans400_regular';
	font-size: 11px;
	color: #99a0a8;
}



.user-register:hover
{
	color: #c9c9c9;
}


.user-login
{
	height: 20px;
	width: 20px;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;
	top: 0;
	left: 700px;
	right: 0;
	text-decoration: none;
	font-family: 'sinkin_sans400_regular';
	font-size: 11px;
	color: #99a0a8;
}



.user-login:hover
{
	color: #c9c9c9;
}

<!DOCTYPE html>

<html>

<head>
		
		
		
	<META HTTP-EQUIV="Content-Type" content="text/html; charset=utf-8">
	<META HTTP-EQUIV="content-language" content="EN">
	<META NAME="Rating" content="General">
	<META NAME="Designer" content="Shane Wilson">
	<META NAME="Keywords" content="Gamer, Community">
	<META NAME="revisit-after" content="7">
	<META NAME="Robots" content="index,follow">
	<META HTTP-EQUIV="Cache-Control" content="no-cache">
	<META HTTP-EQUIV="Expires" content="0">
	<META NAME="Author" content="Shane Wilson">
	
	
		
	<link rel="stylesheet" type="text/css" href="css/index.css">

	
	

</head>

<body>


	<div id="topbar-navigation">
		<a href="register" class="user-register">Register</a>  <a href="login" class="user-login">Login</a>
	</div>
	
	
	
	<div id="maincontainer">
		
	</div>
	
	
	
	
	
	
	
	
	
	<script type="text/javascript" src="http://shanesdomain.byethost32.com/js/advertisement.js"></script>
	
	
	<script type="text/javascript">

		if (document.getElementById("TestAdBlock") == undefined)

		{

			document.write('<div id="adblock-warning">Oops! It looks like you are using AdBlock. We know adverts can be annoying, but in order to keep the site running we have to display them</div>');

		}

	</script>
	

</body>

</html>

Azercii · June 15, 2014

Ahhhh, one Coffee later, I see it! :tease-03:

The error of my ways;

I was calling 100%, which would only fill 'x' amount of width depending on the windows size. Should have been calling a min-width

Sign In

Weird Behavior with 100% Elements

Recommended Posts

Azercii

Link to comment

Share on other sites

Azercii

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information