0

I am tinkering with a basic site I plan to host my blog on in the future and I cannot manage to get one of my div elements to align with the rest of the site properly. I have linked to the project on CodePen below. I cannot seem to eliminate the white space between .header and .main. I had thought simply making the display: inline-block and keeping the margin/padding/border small would do the trick but I am obviously mistaken. Thoughts?

http://codepen.io/Kpmfastball/pen/xOvBNB

Below is the CSS for .main, the div class I am struggling with, and .heading, which is the div located right above it on the webpage.

.main { display: inline-block; height: 800px; width: 82%; margin: 1px; padding: 1px; border-width: 1px; font-family: times; background-color: #29BA91; } .heading { display: block; font-family: times; width: auto; height: 150px; border-width: 1px; border-color: black; margin: 1px; padding: 1px; background-color: #0F8CB2; color: #ffffff; }
Improve this question
1
  • You should try Flexbox out, I'd give a link to documentation but I'm on mobile. Flexbox makes life so much easier when trying to center items, etc. Commented Sep 5, 2016 at 20:06

3 Answers 3

Reset to default
1

Just put this in .main:

vertical-align: top;
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

try to use HTML5 tags and also why don't you use css frameworks like Bootstrap or Foundation? it's a lot that you should do to make your website responsive. you're code was a little bit messy so i cleaned it up for you..

h1 {	font-size: 50px;	text-align: left; } HEADER {	display: block;	font-family: times;	width: auto;	height: 150px;	border-width: 1px;	border-color: black;	margin: 1px;	padding:1px;	background-color: #0F8CB2;	color: #ffffff; } MAIN{ display: flex; justify-content: space-between; } .nav {	display: flex; width: 200px;	font-family: times;	height: 900px;	border-width: 1px;	border-color: black;	margin: 1px;	padding: 1px;	background-color: #0A6D37;	color: #ffffff; } .main {	display: flex; flex:1;	height: 900px;	margin: 1px;	padding: 1px;	border-width: 1px;	font-family: times;	background-color: #29BA91; } .link1 {	color: #ffffff; }
<html> <head>	<title>A-Not-So-Well-Respected Man Blog</title>	<link rel="stylesheet" type="text/css" href="style.css"> </head> <body>	<header>	<h1 style="padding: 5px; border: 5px; margin: 5px">A-Not-So-Well-Respected Man</h1>	<h5>Random Thoughts and Musings</h5>	</header> <main> <div class="nav"> <h3 align="center">Menu</h3> <ul> <li>Posts A-Z</li> <li>Posts By Tag</li> <li>Newest Posts</li> <li>About Me</li> </ul> </div> <div class="main"> <a class="link1" href="https://anotsowellrespectedman.wordpress.com/2016/02/14/love-and-brutality-a-history-of-february-14th/">Latest blog post</a> </div> </main> </body> </html>

Hope it helps...

Improve this answer

2 Comments

Thanks so much. Yeah I am planning on working with bootstrap in the future, I just want to make sure I have the skill set to do it without frameworks just in case. Fairly new to web dev and I'm trying to absorb as much as possible!
np, if you think my answer helped you please mark it as correct answer so others can find the solution too.
0

you can add float:left; to class nav and class main, it will be like this:

.nav { display: inline-block; font-family: times; width: 200px; height: 900px; border-width: 1px; border-color: black; margin: 1px; padding: 1px; background-color: #0A6D37; color: #ffffff; float:left; } .main { display: inline-block; height: 800px; width: 82%; margin: 1px; padding: 1px; border-width: 1px; font-family: times; background-color: #29BA91; float:left; }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.