Solved

Text appearing outside of relative div container

Posted on 2011-03-17
4
680 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 20

Expert Comment

by:Mark Brady
ID: 35160508
add

overflow:hidden

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

Author Comment

by:von_rugen
ID: 35160842
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
ID: 35160854
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
ID: 35164300
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

726 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