Search code examples
htmlcssposition

What kind of CSS positioning can I use that isn't going to have (many) side effects?

I'm currently building a website and and I can't find a CSS positioning method that works, meaning any CSS positioning element that doesn't make other HTML elements behave weirdly. Is there any CSS positioning methods that would position an HTML element precisely, accurately and not cause (many) issues with other elements? So far float and position: absolute; don't work well. Thanks!

Since apparently what I'm asking is unclear, I'm asking "What kind of positioning can I use that doesn't have any (or few) side effects?"

Here's the Code I'm working on:

li {
	display: inline-block;
}

ul {
	display: inline-block;
	margin: 0px;
	padding: 0px;
}

#main_nav, logo {
	display: inline-block;
	padding: 0px;
	margin: 0px;
}

nav li a:link {
	font-weight: bold;
	display: inline-block;
	text-decoration: none;
	font-family: times;
	font-size: 24px;
	list-style: none;
	padding: 5px;
	border: 2px solid black;
	border-radius: 5px;
	color: black;
}

nav li a:visited {
	color: rgba(0,0,0,0.7);
}

nav li a:hover {
	background-color: rgba(0,0,0,0.6);
	color: white;
}

nav li a:active {
	color: black;
	border-color: black;
}

nav {
	width: 1000px;
	height: 130px;
	background-color: rgba(255,255,255,0.7);
	padding: 10px;
	margin: 0px auto;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

input[type=search] {
	font-size: 16px;
}

#searchbox {
	position: absolute;
	right: 0px;
	top: 0px;
}

#searchbox_div {
	position: relative;
	display: inline-block;
	padding: 0;
	width: 100%;
}

#logo {
	display: inline-block;
	width: 200px;
	font-family: arial;
	margin: 0px;
	padding: 0px;
	font-size: 26px;
}

#logo_jeff, #logo_arries, #logo_website {
	margin: 0px;
}

#logo_jeff {
	letter-spacing: 35.5px;
}

#logo_arries {
	letter-spacing: 11px;
}

#logo_website {
	letter-spacing: 4px;
}












body {
    background-image: url("../pictures/jeff_skiing.jpg");
    background-color: red;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 500px;
	margin: 0px;
	padding: 0px;
}

aside {
	position: absolute;
	right: 0px;
	background-color: rgba(255,255,255,0.9);
	width: 170px;
	height: 600px;
	margin: 0;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	padding: 10px;
}














#main_content {
	width: 1000px;
	min-height: 600px;
	display: block;
	background-color: rgba(255,255,255,0.7);
	margin: 0 auto;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	position: relative; top: 0px;
	padding: 10px;
}

#here_you_can_learn {
	font-size: 47px;
	color: gray;
	margin: 0 auto;
	margin-bottom: 10px;
	text-align: center;
}


#welcome {
	text-align: center;
	color: rgb(0, 0, 110);
	font-size: 100px;
	margin: 0;
padding: 10px 10px 20px 10px;
}

#down_arrow {
	height: 50px;
	margin: auto;
	display: block;
	padding: 10px;
}

#most_frequent {
	width: 600px;
	vertical-align: top;
	display: inline-block;
	background-color: rgba(0,0,0,0.1);
	border-radius: 3px;
}

#m_f_heading {
	font-size: 30px;
	margin: 10px;
	padding: 5px;
	text-align: center;
	background-color: rgba(0,0,0,0.2);
	border-radius: 5px;
}



#m_f_show_more {
	font-size: 20px;
	margin: 10px;
	padding: 5px;
	text-align: center;
	background-color: rgba(0,0,0,0.2);
	border-radius: 5px;
}


#recent_activity {
	width: 375px;
	display: inline-block;
	background-color: rgba(0,0,0,0.1);
	border-radius: 3px;
}

#r_a_heading {
	font-size: 30px;
	margin: 10px;
	padding: 5px;
	text-align: center;
	background-color: rgba(0,0,0,0.2);
	border-radius: 5px;
}

#r_a_body {
	font-size: 15px;
	margin: 10px;
	padding: 5px;
	text-align: center;
	background-color: rgba(0,0,0,0.2);
	border-radius: 5px;
}

#r_a_show_more {
	font-size: 20px;
	margin: 10px;
	padding: 5px;
	text-align: center;
	background-color: rgba(0,0,0,0.2);
	border-radius: 5px;
}

#r_a_show_more_link:visited {
 color: black;
}

#r_a_show_more_link:hover {
  color: gray;
  background-color: rgba(0,0,0,0.9);
}

#r_a_show_more_link:active {
  color: black;
}
<!DOCTYPE html>

<head>
<title>Home | Jeff's Website</title>

<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />

</head>


<body>

<!--Main Nav-->
<header>
	<nav>
		<div id="searchbox_div">
			<form action="" id="searchbox">
				<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
				<input type="submit" value="Search!">
			</form>
		</div>
		
		<div id="logo">
			<h1 id="logo_jeff">JEFF</h1>
			<h1 id="logo_arries">ARRIES</h1>
			<h1 id="logo_website">WEBSITE</h1>
		</div>
		
		<div id="main_nav">
			<ul>
				<li><a href="">Home</a></li>
				<li><a href="">Blog</a></li>
				<li><a href="">Trips</a></li>
				<li><a href="">Politics</a></li>
				<li><a href="">Pictures</a></li>
				<li><a href="">Videos</a></li>
				<li><a href="">Computer</a></li>
				<li><a href="">Misc</a></li>
			</ul>
		</div>
	</nav>
</header>


<!--Welcome to jeff's website-->

<div>
	<h2 id="welcome">Welcome to my Website!</h1>
	
	<a href="#here_you_can_learn">
	<img src="pictures/down_arrow.png" id="down_arrow"/>
	</a>
</div>

<!--right side nav-->

<aside>
	<p>this is aside</p>

</aside>


<!--Main Content-->

<div id="main_content">
	<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>

<!--Most Frequently visited pages: on left side of page-->
	<div id="most_frequent">
		<p id="m_f_heading">Most frequently visted pages!</p>
		
		
		
		<a href=""><p id="m_f_show_more">Show More</p></a>
	
	</div>
	
<!--Recent Activity: on the right side of page-->
	<div id="recent_activity">
		<p id="r_a_heading">Recent Activity</p>
		
		
		<p id="r_a_body">test</p>
		
		
		<a href="" id="r_a_show_more_link"><p id="r_a_show_more">Show More</p></a>
	</div>

</div>

</body>

Solution

  • Each positioning method has a purpose and well-defined, if sometimes not intuitive, behavior. You cannot pick one that "won't mess things up". There's no shortcut like "always use relative", because each method accomplishes something different that cannot be accomplished by the other methods.

    I happen to think positioning in CSS is abysmally defined, but it's what we have to work with and the only thing you can do is learn what each one does and how they interact. There WILL be some things you cannot accomplish1, and until CSS layout matures that will continue to be the case.

    The only advice I can give you is to budget some time, say 8-16 hours over the next few weeks, to play with basic layouts and experiment with all the positioning methods. Use Firefox or Chrome's developer tools to examine in detail how things are laid out, and make specific changes one at a time until you start to develop a feel for how the options interact with each other. This is a highly complex mess and it will take some time to learn it. But once you do you will have a skillset that will serve you well.

    1 As I recently learned to my great disappointment. I did find some workarounds gross hacks that involved duplicating content but that way lies madness. I hope the new flex positioning stuff gets worked out with some sanity but I'm not holding my breath.