Solved

Text appearing outside of relative div container

Posted on 2011-03-17
4
676 Views
Last Modified: 2012-05-11
I have some nested div containers built from simple html & css.  One of the div tags is positioned relatively within the containing div, which is floated in the page.  The text in this child div (with the class StoreMapPOS) is appearing well outside of the container.  I've tried various display tags for the child div's class, but it ends up messing up the displayed box's relative position.  

The graphic boxes appear as they should, the text "ACK!" appears outside of its containing div tag in FireFox.  I haven't tested in IE yet.  I would like "ACK!" to appear within the small black box.

Example:
http://www.thomas-clayton.com/Test.asp

HTML:
<link rel="stylesheet" type="text/css" href="styles.css" />
<Html>
<body>
<div class="StoreMap">Problem Container<br>
<div class="StoreMapFront">
Floor Front</div>
<div class="StoreMapMiddle">
Floor Mid</div>
<div class="StoreMapBack">
Floor Back</div>
<div class="StoreMapOther">
Stock Other</div>
<div class="StoreMapPOS">
AcK!</div>
<br>
</body>
<html>

Open in new window


CSS:
body
{
background-color:rgb(180,190,110);
margin:0em;
}
.StoreMap
{
width:310px;
height:120px;
float:left;
}
.StoreMapRight
{
width:310px;
height:120px;
float:right;
}
.StoreMapFront
{
text-align:center;
border-color:black;
color:white;
border-style: solid;
border-width: 1px;
font-weight:bold;
width:73px;
height:98px;
float:left;
}
.StoreMapMiddle
{
text-align:center;
border-color:black;
color:white;
border-style: solid;
border-width: 1px;
font-weight:bold;
width:73px;
height:98px;
float:left;
}
.StoreMapBack
{
text-align:center;
border-color:black;
color:white;
border-style: solid;
border-width: 1px;
font-weight:bold;
width:73px;
height:98px;
float:left;
}
.StoreMapOther
{
text-align:center;
border-color:black;
color:white;
border-style: solid;
border-width: 1px;
font-weight:bold;
width:73px;
height:98px;
float:left;
}
.StoreMapPOS
{
text-align:center;
border-color:black;
background-color:black;
color:white;
border-style: solid;
border-width: 1px;
font-weight:bold;
width:48px;
height:48px;
position: relative;
top:25px;
left:88px;
}

Open in new window

0
Comment
Question by:von_rugen
  • 2
4 Comments
 
LVL 20

Expert Comment

by:Mark Brady
Comment Utility
add

overflow:hidden

to the problem container and nothing will show outside of it.
0
 

Author Comment

by:von_rugen
Comment Utility
Using "overflow:hidden" disrupts the black box's relative placement (moves it outside of the container).  I need the black box to remain where shown and the text "Ack!" to appear within the black box.
0
 

Author Comment

by:von_rugen
Comment Utility
BTW: If you're looking at my example with IE, it is ignoring the relative placement altogether.
0
 
LVL 6

Accepted Solution

by:
blueghozt earned 50 total points
Comment Utility
placing the mark-up for the div inside the .StoreMapMiddle div and making that position:relative allows you to use absolute positioning to get it just right - see below
<Html>
<head>
<style>
body
{
background-color:rgb(180,190,110);
margin:0em;
}
.StoreMap
{
width:310px;
height:120px;
position:relative;
overflow:hidden;
}
.StoreMapRight
{
width:310px;
height:120px;
float:right;
}
.StoreMapFront
{
text-align:center;
border-color:black;
color:white;
border-style: solid;
border-width: 1px;
font-weight:bold;
width:73px;
height:98px;
float:left;
}
.StoreMapMiddle
{
text-align:center;
border-color:black;
color:white;
border-style: solid;
border-width: 1px;
font-weight:bold;
width:73px;
height:98px;
float:left;
position:relative;
}
.StoreMapBack
{
text-align:center;
border-color:black;
color:white;
border-style: solid;
border-width: 1px;
font-weight:bold;
width:73px;
height:98px;
float:left;
}
.StoreMapOther
{
text-align:center;
border-color:black;
color:white;
border-style: solid;
border-width: 1px;
font-weight:bold;
width:73px;
height:98px;
float:left;
}
.StoreMapPOS
{
text-align:center;
border-color:black;
background-color:black;
color:white;
border-style: solid;
border-width: 1px;
font-weight:bold;
width:48px;
height:48px;
position: absolute;
top:25px;
left:12px;
}
</style>
</head>
<body>
<div class="StoreMap">Problem Container<br>
	<div class="StoreMapFront">
	Floor Front</div>
	<div class="StoreMapMiddle">
	   Floor Mid
          <div class="StoreMapPOS">AcK!</div>
        </div>
	<div class="StoreMapBack">
	Floor Back</div>
	<div class="StoreMapOther">
	Stock Other</div>
</div>
<br>
</body>
<html>

Open in new window

0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now