Serenity Serenity - 2 months ago 9
CSS Question

Error with DIV Classes

So, I'm trying to make a faq page for my tumblr and I want the same size box, font, and icon for each question/answer so I am using classes and I was having a hard time with the text but I finally managed to get it! The problem is, the icon. I've been trying forever to get it to repeat and position evenly? (like down a bit as it's too high compared to the text) but I just can't figure it out. I've tried margin positioning, position:absolute; and floating but nothing seems to workout.



<head>

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">


</head>


<style>
body{
background-color: #fff;
margin: auto;
}

#container{
background-color: #000;
width: 700px;
height: 900px;
padding: 20px;
margin-top: 20px;
margin-left: 480px;
}



#mainbox1{
width: 675px;
height: 100px;
background-color: #ffffff;
padding: 20px;
margin-top: -8px;
margin-left: -8px;

}


#iconone{
width: 130px;
height: 130px;
background-color: #D4A190;
margin-top: -15px;
margin-left: -15px;

}

#minidescription{
width: 450px;
height: 120px;
background-color: #D4A190;
margin-top: -130px;
margin-left: 120px;
padding: 5px;
text-align: center;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
line-height: 20px;
word-spacing: 2px;

}


#linkguide{
width: 105px;
height: 130px;
background-color: #C390D4;
margin-top: -130px;
margin-left: 585px;

}

#navigation {
width: 105px;
line-height: 14px;
}


#navigation a:link, #navigation a:visited, #navigation a:active {
display: block;
font: 7px "small fonts", "century gothic";
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
background-color: #111;
color: #fff;
padding: 7px 3px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
-ms-transition: all .5s ease-out;
transition: all .5s ease-out;
}

#navigation a:hover {
background-color: #8CC21F;
color: #000;
padding: 7px 9px;
}

.question{
width: 705px;
height: 50px;
background-color: #A1D490;
margin-left: -8px;
margin-top: 10px;
padding: 5px;
}

.questionicon{
background-image: url("http://i66.tinypic.com/2u5qhe8.png");
width: 16px;
height: 16px;
position: absolute;
top: 200px;
left: 510px;
}



.answer{
background-color: #90C3D4;
width: 705px;
height: 50px;
margin-left: -8px;
margin-top: 10px;
padding: 5px;
}


.answericon{
background-image: url("http://i65.tinypic.com/qod4kx.png");
width: 16px;
height: 16px;
position: absolute;
top: 260px;
left: 510px;
}

p.center {
text-align: center;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
word-spacing: 2px;

}

</style>


<body>

<div id="container">

<div id="mainbox1">

<div id="iconone"><IMG SRC="http://i67.tinypic.com/vhxls9.png" ALT="icon"></div>

<div id="minidescription">ellentesque non semper leo. Aliquam eu ultricies tellus. Ut rutrum fringilla rhoncus. Vestibulum bibendum quam at orci bibendum placerat. Etiam lectus nisl, ullamcorper ac aliquam vitae, efficitur eu mauris. Suspendisse porttitor euismod tempus. Quisque eleifend nulla vel auctor dictum. Ut posuere condimentum odio. Aliquam erat volutpat. Sed in laoreet odio. Mauris quis feugiat dolor.</div>


<div id="linkguide">
<div id="navigation">
<a href="http://google.com">Link 1</a><br>
<a href="http://yahoo.com">Link 2</a><br>
<a href="http://bing.com">Link 3</a><br>
<a href="http://bing.com">Link 4</a><br>

</div>


</div>
</div>

<!-- Question One -->

<div class="question"><div class="questionicon"></div>
<p class="center">This paragraph will be red and center-aligned.</p>
</div>

<div class="answer"><div class="answericon"</div></div>
<p class="center">This paragraph will be red and center-aligned.</p>
</div>

<!-- Question two -->

<div class="question"><div class="questionicon"></div>
<p class="center">This paragraph will be red and center-aligned.</p>
</div>

<div class="answer"><div class="answericon"</div></div>
<p class="center">This paragraph will be red and center-aligned.</p>
</div>



































</div>



</body>





You can find the full/original view here

Answer

I just made this fiddle with your code. Take a look.

I fixed the layout by using position: relative and display: flex.

When you set position: relative on an element, any of its children with position: absolute will be positioned relative to it.

For a great guide and example for how display: flex works, check out css-tricks: guide to flex box. It's really useful for centering elements vertically and/or horizontally.