1

I am learning HTML and CSS and wanted to make a simple portfolio mockup page for myself and I am having a problem with the layout which I can't figure out.

![My page layout][1]: https://i.stack.imgur.com/EGsdM.png

The idea is that the boxes on left side of face and right side should be at the same height, but since something in my code is not quite right, they won't be when I apply same margin to a box on right and a box on left. On this picture through different margins I have gotten them pretty much to the right height but on bigger monitors the difference is more visible.

MY HTML code :

<!doctype html>
<html>
	<head>
		<title>Martin Hirvesaar</title>
		<meta charset="UTF-8" />
		<meta http-equiv="Content-type" content="text/html; charset=ut			f-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" href="style.css">
		<link rel="stylesheet" type="text/css" href="reset.css">
		<script type="text/javascript"	src="jquery-1.11.2.min.js"></script>
		<link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
	</head>
	<body>
		<div id="container">
			<img id="name" src="IMG/name.png" alt="Martin-Hirvesaar" />
			<img id="face" src="IMG/face.png" alt ="low-poly-face" />
			<div class="button" id="bio"><p><a href="">bio</a></p></div>
			<div class="button" id="portfolio"><p><a href="">portfolio</a></p></div>
			<div class="button" id="blog"><p><a href="">blog</a></p></div>
			<div class="button" id="contact"><p><a href="">contact me</a></p></div>

		</div>

	</body>

</html>

My CSS :

body{
	background-color:#80edc3;
	width:100%;
	height: 100%;
}
a{
	text-decoration: none;
	color:black;
}
a:hover{
	font-size: 1.3em;
}
#container{
	width:100%;
	height: 1000px;
	position: relative;
	margin: 0 auto;
}
#face{
	height:750px;
	width:400px;
	margin: 5% auto 0 ;
	display: block;
	padding-bottom: 10%;
}
#name{
	height:12%;
	width: 75%;
	margin:10% 20% 0 15%;
	display: block;

}
.button{
	height:20%;
	width:35%;
	display: block;
}
.button p{
	font-family: 'Permanent Marker', cursive;														
	font-size: 2.5em;
	position: relative;
	display: block;
	padding-top:15%;
	padding-left:9%;
	color:black;
}
#bio p{
	padding-left: 20%;
	display: block;
	position: relative;
}
#bio{
	margin-top: -50%;
	margin-left: 20%;
	background-color: #87BCEB;
	
}
#portfolio{
	margin-top: 5%;
	margin-left: 20%;
	background-color: #FFCE8A;
}
#blog p{
	float:right;
	padding-right: 15%;
}
#blog{
	margin-top: -32.5%;
	margin-left:50%;
	background-color: #FFAE8A;
}
#contact{
	margin-top:5%;
	margin-left:50%;
	background-color: #E77D99;
}
#contact p{
	float:right;
	padding-right: 4%
}

the webpage is online on : www.martinhirvesaar.com

1
  • Try margin-top in em not in percentage.
    – Hareesh
    Feb 7, 2015 at 14:33

2 Answers 2

0

Because you are using percentages for the margins the boxes will keep shifting depending on the size of the browser window. If you resize the window on your screen you can see how this will change. You'd want to use fixed pixel numbers to hold them in a specific place. (like margin-top: -20px; for example) Your image is a fixed size, while a lot of elements around it are moving around based %. I would redo the code to fix the elements in their positions around the image. You could then use @media query to resize for different screens.

2
  • But wouldn't that still mess up the layout, depending on different monitors and resolutions. Before I changed everything to percentages, it was even worse on bigger monitors as almost everything was out of place since 20px can look very different on a 15 inch laptop screen and 24 inch desktop monitor. Feb 7, 2015 at 15:17
  • I revised my answer to remove the first part, since I may have been confusing. It looks like your page layout revolves around a fixed size image with various elements surrounding it. You'll need to fix them into place, then I'd use media queries to adjust for different screens if need be.
    – Tony Tambe
    Feb 7, 2015 at 15:49
0

Since you want the head image to "float" above the button blocks, position it absolutely in the middle with:

# face {
    position: absolute;
    left: 50%;
    margin-left: -200px;
}

Then put your button blocks in a container in the natural layout order: bio, blog, portfolio, contact. You can then give them float: left with proper margins to position them correctly relative to one another.

Then use a margin to position the button container on the page where you want it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.