I'm currently learning HTML/CSS and facing a challenge in setting elements relative to a container.
After reading about the differences between "relative" and "absolute" positioning, I understand that "relative" positions an element relative to where it should default. But is there a way to position elements within a container (like the orange box in this case)?
For instance, is there a method to keep all text and images inside the orange box so that when I move the box around, the elements inside stay in place?
Here's the HTML:
<div class="container">
<div id="snappyText">
<p>Ever wonder, "Where are the most average places to eat around here? That's what I crave."</p>
</div>
<div id="response">
<p>-Yeah, not really.</p>
</div><!--End of Snappy Text-->
// More HTML code omitted for brevity
</div><!--End of Container-->CSS:
#logo{
display:block;
margin-left:auto;
margin-right:auto;
position:relative;
top:40px;
}
#main .container{
background-image: url(images/orangeBackground.png);
background-repeat: no-repeat;
top:90px;
}
/* Styling for the orange box */
#snappyText{
color:white;
font-size:30px;
...
Feel free to experiment with different CSS properties to achieve the desired effect!