BuddyRoach BuddyRoach - 5 months ago 12
CSS Question

How do I set a DIV to be absolute within another specific DIV?

I have 3 DIVs that are wrapped inside a container. I had to wrap them in the container in order to center them on my page laid out the way I wanted them. Within these 3 DIVS are DIV headers to make title bars for each DIV. The title bar DIV headers are positioned to absolute so they expand across the top of the DIVs they are in. That works fine. But as soon as I put the 3 DIVS in the container, the header DIVs become children to the container and start expanding across it rather than their respective DIVs. Is there a way to get them to go back?

JSFIDDLE: https://jsfiddle.net/mh2ez7x9/2/



.main {
border: 2px solid red;
position: relative;
width: 740px;
right: 0;
left: 0;
top: 220px;
margin: 0 auto;
}
.update {
position: none;
display: inline-block;
background-color: #474747;
width: 700px;
height: 200px;
padding: 20px;
padding-top: 50px;
border: 1px solid black;
border-radius: 5px;
left: 280px;
top: 220px;
color: white;
font-size: 12pt;
text-shadow: 0px 0px 0 #000026, 0px 1px 0 #000026, 0px -1px 0 #000026, 1px 0px 0 #000026, 1px 1px 0 #000026, 1px -1px 0 #000026, -1px 0px 0 #000026, -1px 1px 0 #000026, -1px -1px 0 #000026, 0px 0px 0px #000026;
font-family: 'Muli', sans-serif;
box-shadow: 5px 5px 10px #000000;
z-index: 1;
}
.newmembers {
position: none;
display: inline-block;
margin-top: 10px;
background-color: #474747;
width: 350px;
height: 200px;
padding: 20px;
padding-top: 50px;
border: 1px solid black;
border-radius: 5px;
left: 280px;
top: 500px;
color: white;
font-size: 12pt;
text-shadow: 0px 0px 0 #000026, 0px 1px 0 #000026, 0px -1px 0 #000026, 1px 0px 0 #000026, 1px 1px 0 #000026, 1px -1px 0 #000026, -1px 0px 0 #000026, -1px 1px 0 #000026, -1px -1px 0 #000026, 0px 0px 0px #000026;
font-family: 'Muli', sans-serif;
box-shadow: 5px 5px 10px #000000;
z-index: 1;
}
.latest {
position: none;
display: inline-block;
margin-top: 10px;
background-color: #474747;
width: 300px;
height: 200px;
padding: 20px;
padding-top: 50px;
border: 1px solid black;
border-radius: 5px;
left: 680px;
top: 500px;
color: white;
font-size: 12pt;
text-shadow: 0px 0px 0 #000026, 0px 1px 0 #000026, 0px -1px 0 #000026, 1px 0px 0 #000026, 1px 1px 0 #000026, 1px -1px 0 #000026, -1px 0px 0 #000026, -1px 1px 0 #000026, -1px -1px 0 #000026, 0px 0px 0px #000026;
font-family: 'Muli', sans-serif;
box-shadow: 5px 5px 10px #000000;
z-index: 1;
}
.miniheaderA {
position: absolute;
right: 0;
left: 0;
top: 0;
border: 2px none red;
padding: 5px;
height: 20px;
background-image: url('../images/redboxtext.png');
box-shadow: 0px 2px 5px #000000;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.miniheaderM {
position: absolute;
right: 0;
left: 0;
top: 0;
border: 2px none red;
padding: 5px;
height: 20px;
background-image: url('../images/orangeboxtext.png');
box-shadow: 0px 2px 5px #000000;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.miniheaderU {
position: absolute;
right: 0;
left: 0;
top: 0;
border: 2px none red;
padding: 5px;
height: 20px;
background-image: url('../images/blueboxtext.png');
box-shadow: 0px 2px 5px #000000;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

<div class="main">

<div class="update">
<div class="miniheaderU">
<h3>News</h3>
</div>
Welcome to the all new website!
</div>


<td valign="top">
<div class="newmembers">
<div class="miniheaderM">
<h3>New Members</h3>
</div>
<?php echo "new members!"; ?>
</div>

<div class="latest">
<div class="miniheaderA">
<h3>Latest Content</h3>
</div>
<?php echo "new content"; ?>
</div>

</div>




Answer

I think the others have misunderstood your goals. Feel free to see my codepen:

http://codepen.io/anon/pen/MeyYWV?editors=1100

I did a bit of reorganization of the rules for you, and I added a class for my ease:

.update, .newmembers, .latest{
  padding:0 0 1em;
  position:relative;
  float:left;
  margin: 10px 20px;
  display: inline-block;
  background-color: #474747;
  border: 1px solid black;
  border-radius: 5px;
  color: white;
  font-size: 12pt;
  text-shadow: 0px 0px 0 #000026, 0px 1px 0 #000026, 0px -1px 0 #000026, 1px 0px 0 #000026, 1px 1px 0 #000026, 1px -1px 0 #000026, -1px 0px 0 #000026, -1px 1px 0 #000026, -1px -1px 0 #000026, 0px 0px 0px #000026;
  font-family: 'Muli', sans-serif;
  box-shadow: 5px 5px 10px #000000;
  z-index: 1;
}
.update {
  width: 700px;
  height: 200px;
}

.newmembers {
  width: 350px;
  height: 200px;
}
.latest {
  width: 300px;
  height: 200px;
}

Mohamed Athif was right on the H3, so I added in his rule.