[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 685
  • Last Modified:

Text appearing outside of relative div container

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
von_rugen
Asked:
von_rugen
  • 2
1 Solution
 
Mark BradyPrincipal Data EngineerCommented:
add

overflow:hidden

to the problem container and nothing will show outside of it.
0
 
von_rugenAuthor Commented:
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
 
von_rugenAuthor Commented:
BTW: If you're looking at my example with IE, it is ignoring the relative placement altogether.
0
 
blueghoztCommented:
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

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now