Trouble with <div> placement after adjusting margins


#1

I can't get my divs in the spot I want. Setting margins is the primary way to place these in different spots on the page, right? Both .left and .right have the same top margin value but .right just doesn't seem to cooperate with the margins. This is my first time posting on here so I'm not sure if I've done this correctly.


#2

No one will complain if you post a screenshot of your code (well, they shouldn't at least...) but most people copy/paste their code into the post. You can format it to look like code using `s around it or highlighting it and pressing the sixth button from the left in the formatting options.

Margins can be very very useful, but the easiest way to set a div's position is by setting its CSS position attribute to 'absolute' and then setting the actual position using attributes like left: 30px or top: 10px. More on that here.
This could look something like:
.right{
position: absolute;
left: 30px;
top: 10px
}

I hope this helped!


#3

Could you copy paste your code to the forum? Anyway, you can read this, it is an answer i wrote about positioning and margin and left/top etc.

@e467j please be careful with the use of w3schools for good reasons


#4

Oh I didn't know that the site's a bad resource, thank you for telling me! I use stackexchange and this site sometimes but have been looking a lot up on w3schools, but I'll stick to the first two now.


#5

w3schools isn't all bad, but be careful. I would recommend MDN, might seem a bit more complex/difficult, but the solutions on there are general much better. And w3c (which is in no way related w3schools) is also a very good resource. Stackexchange/stackoverflow is also fine of course


#6

Oh ok, I thought (until reading what you linked before) that w3c is connected to w3schools. Thanks again for the suggestions!


#7

No, and that is one the problems with w3schools (among other things, like you have read) that you are getting the impression it is related to w3c, and they never wanted to publish on there site they where not related


#8

Thanks for the input. I guess I'm just frustrated because I'm modeling this after the example resume that's given in the lesson and while you are offering a solution that seems to work, it bothers me that I'm not able to appropriately place my div's using the same uhhh functions(?) as codeacademy both taught me and used in the example.


#9

if you post your code, i might still be able to give you some tips (suggestions? what is the right word?)


#10

div {
	border-radius: 5px;
}

#header {
	z-index: 1;
	position: fixed;
	width: 97.5%;
	margin-top: -20px;
	height: 60px;
	background-color: #668284;
	margin-bottom: 10px;
}

#name {
	float:left;
	margin-left: 5px;
	padding-top: 5px;
	font-size: 16px;
	font-family: Verdana, sans-serif;
	color: white;
}

#email{
	float:right;
	margin-right: 5px;
	padding-top: 5px;
	font-size: 16px;
	font-family: Verdana, sans-serif;
	color: #ffffff;
}

h4 {
	margin-left: 5px;
	margin-bottom: 15px;
	font-family: Verdana, sans-serif;
}

.right p {
	margin-left: 5px;
	margin-right: 5px;
	margin-top: -10px;
	font-family: Garamond, serif;
	color: #000000;
}

li {
	list-style-type: square;
}

a:hover {
	font-weight: bold;
}

.left {
	position: relative;
	float: left;
	margin-top: 50px;
	width: 10%;
	height: 400px;
	background-color: #B9D7D9;
	margin-bottom: 10px;
}

.right {
	position: relative;
	float: right;
	margin-top: 50px;
	width: 88%;
	height: 400px;
	background-color: #F4EBC3;
	margin-bottom: 10px;
}

#footer {
	position: relative;
	height: 50px;
	background-color: #668284;
	clear: both;
	font-family: Verdana, sans-serif;
	font-size: 14px;
	text-align: center;
	color: #ffffff;
}

#footer p {
	position: relative;
	padding-top: 15px;
}

#11

Doesn't look like I pasted the code in the right format but I tried what was described above to no avail.


#12

This looks already much better, one tip for starters, remove your body's margin:

body {
  margin: 0;
}

for next time, use one of the two following options to make your code/indent is visible:

select your code and press ctrl + shift + c (or cmd + shift + c if you use a mac)

if this instructions are unclear, you can also insert 3 backticks before and after your code, like so:

```
<p>visible</p>
```

the backtick is located above the tab key on your keyboard