Question

I’m learning HTML/CSS and I’m having a little trouble finding a way to set elements relative to a container.

I’ve read up on the difference between “relative” and “absolute” positioning. “relative” positioning, positions the element relative to where the default position should be. However is there a way to position elements relative to a container (in this case, the orange box?)

For example, is there a way to position all the text and img’s inside the orange box, so whenever i decide to move the orange box around, all the elements inside will stay put?

HTML:

        <div class="container">


        <div id="snappyText">
            <p>Ever think,"Where are the most mediocre places to eat around here? I want me some of that."</p>
        </div>
        <div id="response">
            <p>-Yeah, neither do we.</p>
        </div><!--end Snappy Text-->

        <div id="iphonePic">
            <img src="images/iphone.png" alt="phone" />
        </div><!--end iphonePic-->

        <div id="dashVideo">
            <img src="images/videoThumbnail.png" alt="video" />
        </div><!--end dashVideo-->

        <div id="appStoreIcon">
            <img src="images/appstore.png" alt="appstore" />
            <!--<img src="images/free.png" alt="free" />-->
        </div><!--end appStoreIcon-->

        <div id="explanatoryText">
            <p>Dash is the quickest way to find good places to eat. In a world with too many choices and too much information, Dash clears the clutter and offers only the best in your area.</p>  
        </div><!--end explanatoryText-->

        <ul id="menu">
            <li><a href="about.html">About</a></li>
            <li><a href="http://boxoutdev.com/">Blog</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>

        <div id="socialMedia">
            <a href="http://twitter.com/#!/thedashapp"><img src="images/twitter.png" alt="twitter" /></a>

            <a href="http://www.facebook.com/"><img src="images/facebook.png" alt="facebook" /></a>
        </div><!--end socialMedia-->

    </div><!--end 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;
}

/*orange box*/

#snappyText{
color:white;
font-size:30px;
font-family:Helvetica;
font-weight:lighter;
padding-top:30px;
padding-left:50px;
padding-right:50px;
line-height:30px;

}

#response{
color:white;
font-size:40px;
font-family:Helvetica;
font-weight:lighter;
padding-left:260px;
padding-right:50px;
padding-top:50px;

}

#iphonePic{
position:relative;
left:64px;
bottom:-50px;
}

#dashVideo{
position:relative;
left:350px;
top:-460px;
}

#appStoreIcon{
position:relative;
left:350px;
top:-420px;
}

Answer 1

If you use absolute positioning, all those elements inside the box will stay positioned relative to the containing box since you set that containing box to ‘position:relative’. For that matter, you can have them positioned relative inside the container, too.