Why is the circle dropped down?


#1


sorting your friends .8

Why is the first div class friend not staying at the top it moved down.

Replace this line with your code. 

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>My Social Network</title>
	</head>
	<body>
		<!--Add your HTML below!-->
		<div class="friend" id="best_friend"><p>name</p></div>
		<div class="family"></div>
		<div class="enemy" id="archnemesis"></div>
	</body>
</html>



div {
	position: relative;
	display: inline-block;
	margin-left: 5px;
	margin-top: 5px;
	text-align: center;
	height: 100px;
	width: 100px;
	border-radius: 100%;
	border: 2px solid black;
	
}

div p {
    position: relative;
    margin-top: 40px;
    font-size: 12px;
}

.friend {
    border: 2px dashed #008000;
}

.family {
    border: 2px dashed #0000FF;
}

.enemy {
    border: 2px dashed #FF0000;
}

#best_friend {
    border: 4px solid #00C957;
}

#archnemesis {
    border: 4px solid #CC0000;
}

* {
    border: 2px solid black;
}


#2

because of how display: inline-block works under the hood.

you can simply give all elements a paragraph:

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>My Social Network</title>
	</head>
	<body>
		<!--Add your HTML below!-->
		<div class="friend" id="best_friend"><p>name</p></div>
		<div class="family"><p>name</p></div>
		<div class="enemy" id="archnemesis"><p>name</p></div>
	</body>
</html>

that will work.

You can also decide to ditch inline-block all together, and go for float: left instead.

Or you can do tricky positioning, this is also possible


#3

I had the same problem and after reading your answer I have set "float: left" and it helped. But isn't there a better solution??


#4

such as? Why is using float not an easy solution?

You can also give all elements a paragraph, then everything is fine as well :slight_smile:


#5

yeah i should of given all a paragraph lol derp derp ><
i will play around with this float property thank you.


#6

you can also gives the div a relative position, the paragraphs an absolute position and position the paragraphs with and top, that will also work.


#7

Yeah that is really an easy solution. I guess I missed something. Or perhaps it is very important to improvise in coding :slight_smile:


#8

I can think of way more complicated solutions.

not really, your program has to be well designed, if you start improvising without thinking it through, your program becomes a tangled mess.


#9

hey all

thank you for the replies I read them all.

I just tried to add paragraphs to all the divs and it fixed it.


#10

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.