Style css width:inherit? - html

Question

I have some elements that are getting out of my parent div. Why?
Here is what I have
CSS:
.lightbox img {
margin-top: 2%;
}
.viewer-v3.lightbox {
overflow: auto;
display: block;
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: black;
background: rgba(0,0,0,0.8);
}
.viewer img {
margin-top: 2%;
max-width: 100%;
margin-bottom: 2%;
}
.borderLightbox
{
border:#cccccc;
border-width:1%;
border-top-style:none;
border-right-style:solid;
border-bottom-style :solid;
border-left-style:solid;
position:relative;
width: 80%;
background-color:#e5e5e5;
margin-left:auto;
margin-right:auto;
}
.headerLightbox
{
position:fixed;
background-color:#e5e5e5;
border:#cccccc;
border-width:1%;
width: inherit;
float:left;
border-top-style:solid;
border-right-style:none;
border-bottom-style :none;
border-left-style:none;
}
.actionsLightbox
{
background-color:#ffffff;
}
And HTML:
<div class="viewer-v3 lightbox">
<div class="borderLightbox">
<div class="headerLightbox">
HEADER
<div class="actionsLightbox">
ACTIONS
</div>
</div>
<img class="image" src="http://www.goldbergjones-or.com/blog/wp-content/uploads/2013/05/how-to-get-divorced.jpg">
</div>
</div>
The problem is with headers and action always getting out of parent div. I don't know why, because all the widhts are inherited from parent div, and my header and actions div are always getting out of parent?

Answer 1

UPDATE 3
The solution is to add a content box around the content and let him have the scrollbar.
See this example.
HTML
<div class="viewer-v3 lightbox">
<div class="borderLightbox">
<div class="headerLightbox">
HEADER
<div class="actionsLightbox">
ACTIONS
</div>
</div>
<div class="contentbox">
<img class="image" src="http://www.goldbergjones-or.com/blog/wp-content/uploads/2013/05/how-to-get-divorced.jpg">
</div>
</div>
</div>
CSS
.lightbox img {
margin-top: 2%;
}
.viewer-v3.lightbox {
overflow: auto;
display: block;
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
overflow: hidden;
text-align: center;
top: 0;
left: 0;
background: black;
background: rgba(0,0,0,0.8);
}
.viewer img {
margin-top: 2%;
max-width: 100%;
margin-bottom: 2%;
}
.contentbox {
height: 100%;
overflow: auto;
}
.borderLightbox
{
border:#cccccc;
border-width:1%;
border-top-style:none;
border-right-style:solid;
border-bottom-style :solid;
border-left-style:solid;
position:relative;
width: 80%;
height: 100%;
background-color:#e5e5e5;
margin-left:auto;
margin-right:auto;
overflow: visible;
}
.headerLightbox
{
position:fixed;
background-color:#e5e5e5;
border:#cccccc;
border-width:1%;
width: inherit;
float:left;
border-top-style:solid;
border-right-style:none;
border-bottom-style :none;
border-left-style:none;
}
.actionsLightbox
{
background-color:#ffffff;
}
UPDATE 2
Understood your requirements, and I am afraid it is not possible.
The reason for the behavior is that .viewer gets a scrollbar, therefore its content width won't equal to the width of the body.
Thus: 80% of viewer != 80% of body (which is what you have for the position: fixed .header)
To see what I mean, just remove the height: 100% from the .viewer, and everything pops into place (only that .viewer won't be scrollable which is a no go)
UPDATE 1
If you need it fixed: do pixel sizes help?
.borderLightbox {
width: 500px;
}
http://jsbin.com/AkAhawa/5
ORIGINAL
It is because you have the position: fixed; property.
Think about it as that takes it out of the context of its parent and makes the body its parent, so from then on, positioning and sizing the .headerLightbox will be relative to the viewport.
If you wish to simply display the header with width: 100% (regarding its parent) then use
.headerLightbox
{
width: 100%;
}