CODEWITHSUNDEEP
htmlcsspositioncontainers
user2631279
user2631279

Reputation: 127

Absolute positioning a container inside other containers

I want to position this "description" container inside these other containers. My problem is that since its absolute positioning, its overflowing outside my main container.

Here is a screenshot of whats going on.

Screenshot

HTML

<div id="inventorycont">
 <div class="Content">
  <div class="cattitle">Trucks</div>

  <div id="container3">
    <a href="/Trucks/70017/70017.html"><img class="itemthumb" src="/Trucks/70017/70017.JPG" alt=""></a>
    <div class="Itemtitle">
    <div class="main"> GMC Dump Truck </div>
    <br>
    <b>Stock #:</b> 70017
    <br>
    <b>Price:</b> Call
    <br><br>
    <a href="/Trucks/70017/70017.html"><b>Full Details</b></a> 
    </div>
    <div id="container4">
    <div class="Itemdesc">
    <b>Description:</b><br>1989 GMC Dump Truck, Model 7000 Top Kick, 3280T Cat Diesel, 10spd. Roadranger, Tag Axle, 20' Lined Box, Hydraulic Winch, 46000# GVWR, Only 68427 Miles
    </div>
    </div>
  </div>

  <div id="container3">
    <a href="/Trucks/12017/12017.html"><img class="itemthumb" src="/Trucks/12017/12017.jpg" alt=""></a>
    <div class="Itemtitle">
    <div class="main"> Peterbilt Truck Tractor </div>
    <br>
    <b>Stock #:</b> 12017
    <br>
    <b>Price:</b> Call
    <br><br>
    <a href="/Trucks/12017/12017.html"><b>Full Details</b></a> 
    </div>
    <div id="container4">
    <div class="Itemdesc">
    <b>Description:</b><br>Truck Tractor, NTC 350 Cummins, 13 spd. Roadranger, Like New
    </div>
    </div>
  </div>

    <div id="container3">
    <a href="/Trucks/80004/80004.html"><img class="itemthumb" src="/Trucks/80004/80004.jpg" alt=""></a>
    <div class="Itemtitle">
    <div class="main"> International Truck Tractor </div>
    <br>
    <b>Stock #:</b> 80004
    <br>
    <b>Price:</b> Call
    <br><br>
    <a href="/Trucks/80004/80004.html"><b>Full Details</b></a> 
    </div>
    <div id="container4">
    <div class="Itemdesc">
    <b>Description:</b><br>International 8100, 6 spd, DT 466 Engine
    </div>
    </div>
  </div>

 </div>
</div>

CSS

/*Inner Item Container*/
#container3 {
    position: abosolute;
    width: 750px;
    height: 150px;
    overflow: hidden;
    margin-top: 15px;
    margin-right: 0px;
    background: #ffffff;
    border: 2px solid #000000;
}

/*Outer Container*/
#inventorycont {
    width: 800px;
    height: 510px;
    overflow: hidden;
    margin-top: 5px;
    margin-right: 30px;
    background: #EEEEEE;
    border: 3px solid #000000;
}

/*Inner Item Container for description*/
#container4 {
    position: absolute;
    width: 300px;
    height: 95px;
    overflow: hidden;
    margin-top: 50px;
    margin-left: 400px;
    margin-right: 5px;
    background: #ffffff;
    border: 1px solid #000000;
    float:left;
}

Upvotes: 0

Views: 584

Answers (1)

MarianaAFSilva
MarianaAFSilva

Reputation: 445

You need to add the position:relative to your main container (where you want the div inside), so the absolute position will be relative to it.

Upvotes: 1

Related Questions