My HTML:
<!-- Content -->
<div class="content">
<!-- Content left -->
<div class="content-left"></div>
<!-- Content center -->
<div class="content-center">
</div>
<!-- Content right -->
<div class="content-right"></div>
</div>
My CSS:
.content
{
background-color: black;
height: auto;
margin: 80px auto 0px auto;
min-height: 100px;
padding: 10px 10px;
width: 1200px;
}
.content-center
{
-khtml-box-shadow: 0px -3px 5px rgba(0,0,2,2);
-moz-box-shadow: 0px -3px 5px rgba(0,0,2,2);
-webkit-box-shadow: 0px -3px 5px rgba(0,0,2,2);
background-color: #ffffff;
border-left: 1px solid;
border-right: 1px solid;
border-color: #999999;
box-shadow: 0px -3px 5px rgba(0,0,2,2);
height : 900px;
float: left;
width : 800px;
}
.content-left
{
background-color: #fff;
float: left;
height: 300px;
width: 190px;
}
.content-right
{
background-color: #fff;
float: left;
height: 300px;
width: 190px;
}
My problem is DIV with class "content" don't have same height with other element as child of this tag. I want div with class "content" have dynamic height according to "content-center", "content-left" or "content-right". I have use min-height and height : auto in class "content" but it still not correct.
Add overflow:auto to .content
.content{
width: 1200px;
min-height: 100px;
height: auto;
margin: 80px auto 0px auto;
background-color: black;
padding: 10px 10px;
overflow:auto
}
DEMO
Try this:
* {
margin: 0;
padding: 0;
}
html, body {
height:100%;
}
.content {
width: 1200px;
min-height: 100px;
height: auto;
margin: 80px auto 0px auto;
background-color: black;
padding: 10px 10px;
display:table;
overflow:hidden;
height:100%;
}
Demo Here
Related
I am trying to get two inline-block elements to position where the left side #faqBlock remains positioned fixed and then #blueBox is positioned relative. This basic functionality is working in the snippet, but the containerRight is overtaking containerLeft.
How can I main the containers width and inline-block display while having #faqBlock being positioned fixed?
#page-wrap {
margin-top: 70px;
max-width: 100%;
}
#containerLeft,
#containerRight {
display: inline-block;
vertical-align: top;
box-sizing: border-box;
height: 200vh;
}
/*-- Container Left --*/
#containerLeft {
width: 40%;
position: fixed;
}
#faqBlock {
width: 70%;
height: 75vh;
margin: 50px auto;
display: block;
background: #b82222;
box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.12);
}
#blueBlock {
width: 70%;
height: 75vh;
margin: 50px auto;
display: block;
background: blue;
box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.12);
}
/*-- Container Right --*/
#containerRight {
width: 60%;
position: relative;
}
<div id="page-wrap">
<div id="containerLeft">
<div id="faqBlock">
gfsag
</div>
</div>
<div id="containerRight">
<div id="blueBlock">
gfsag
</div>
</div>
</div>
Elements with position fixed aren't in the regular flow, so it won't ever take up space in the way you are imagining. You can add margin-left: 40%; (equal to the width of the left container) onto the right container to make it look like it's holding space.
If this isn't what you are looking for, let me know!
#page-wrap {
margin-top: 70px;
max-width: 100%;
}
#containerLeft, #containerRight {
display: inline-block;
vertical-align: top;
box-sizing: border-box;
height: 200vh;
}
/*-- Container Left --*/
#containerLeft {
width: 40%;
position: fixed;
}
#faqBlock {
width: 70%;
height: 75vh;
margin: 50px auto;
display: block;
background: #b82222;
box-shadow: 10px 5px 5px rgba(0,0,0,0.12);
}
#blueBlock {
width: 70%;
height: 75vh;
margin: 50px auto;
display: block;
background: blue;
box-shadow: 10px 5px 5px rgba(0,0,0,0.12);
}
/*-- Container Right --*/
#containerRight {
width: 60%;
position: relative;
margin-left: 40%;
}
<div id="page-wrap">
<div id="containerLeft">
<div id="faqBlock">
gfsag
</div>
</div><div id="containerRight">
<div id="blueBlock">
gfsag
</div>
</div>
</div>
All you need to assign is left:40% to your containerRight as it's already positioned relative
As your width of fixed container is 40%.
#page-wrap {
margin-top: 70px;
max-width: 100%;
border: 1px solid;
}
#containerLeft,
#containerRight {
vertical-align: top;
box-sizing: border-box;
height: 200vh;
border: 2px solid red;
}
/*-- Container Left --*/
#containerLeft {
width: 40%;
position: fixed;
}
#faqBlock {
width: 70%;
height: 75vh;
margin: 50px auto;
display: block;
background: #b82222;
box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.12);
}
#blueBlock {
width: 70%;
height: 75vh;
margin: 50px auto;
display: block;
border: 2px solid orange;
background: blue;
box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.12);
}
/*-- Container Right --*/
#containerRight {
left: 40%;
width: 60%;
position: relative;
}
<div id="page-wrap">
<div id="containerLeft">
<div id="faqBlock">
gfsag
</div>
</div>
<div id="containerRight">
<div id="blueBlock">
gfsag
</div>
</div>
</div>
I have an outer div with box-shadow and I want this to appear over an inner div. But it always appears under it. The jsfiddle is here.
My HTML is:
<div class="wrapper">
<div class="inner">
</div>
</div>
And CSS:
.wrapper {
width: 200px;
height: 100px;
border: 1px grey solid;
box-shadow: inset 40px 0 10px -10px #bbbbbb;
}
.inner{
width: 180px;
height: 80px;
margin: 10px;
background-color: lightblue;
}
Is it possible to get it so that the box-shadow appears over the inner blue div? The semantics of the HTML cannot change.
Set the position of the child to relative and the z-index to -1:
.wrapper {
width: 200px;
height: 100px;
border: 1px grey solid;
box-shadow: inset 40px 0 10px -10px #bbbbbb;
}
.inner {
width: 180px;
height: 80px;
margin: 10px;
background-color: lightblue;
position:relative;
z-index:-1;
}
<div class="wrapper">
<div class="inner">
</div>
</div>
update the styles of inner class with position absolute and give z-index: -1;;
.inner {
width: 180px;
height: 80px;
margin: 10px;
background-color: lightblue;
position:relative;
z-index:-1;
}
Here is the updated jsFiddle
You can do what you are wanting without the inner container as well.
http://codepen.io/creativenauts/pen/rLWZqp
* {
box-sizing: border-box;
}
.wrapper {
width: 200px;
height: 100px;
border: 20px solid #fff;
background-color: lightblue;
box-shadow: 0px 0px 1px rgba(#000, 0.5);
position: relative;
&:before {
position: absolute;
content: '';
width: 100%;
height: 100px;
top: -20px;
left: -20px;
box-shadow: inset 40px 0 10px -10px #bbbbbb;
}
}
I am attempting to code a blog page with a header, a navigation, a left sidebar, a right sidebar, and content. All of these sections are child divs being wrapped in an outer div. However, not all the properties of the parent div are being recognized, and bgSide is appearing overtop of the wrapper instead of underneath it and I cannot for the life of me figure out why.
I do not have any floats and I have already run my code through a program to ensure there's nothing wrong with the markup. overflow: hidden does nothing.
UPDATE ONE: Solved width property not inheriting. Still need solutions for wrapper height not working, left and right aligning to body instead of wrapper, and image showing up on top instead of behind.
UPDATE TWO: Solved height property not working by changing height: 100%; to height: 100vh;
<!DOCTYPE html>
<head>
<style>
body
{
background:{color:background};
background-repeat: no-repeat;
background-position: center top;
background-image: url('{image:background}');
margin: 0px;
padding: 0px;
word-wrap: break-word;
}
#bgside img
{
position: fixed;
z-index: 1;
margin-left: 0px;
margin-bottom: 0px;
height: 100%;
padding: 0px;
}
#wrapper
{
z-index: 2;
height: 100%;
min-height: 300px;
width: 60%;
min-width: 600px;
max-width: 900px;
margin: 0px auto; /* center the body */
padding: 0px;
border: 1px solid {color:side link border};
border-top: 0px;
border-bottom: 0px;
text-align: center;
background: {color:background};
-moz-box-shadow: 0px 0px 20px 20px #000
-webkit-box-shadow: 0px 0px 20px 20px #000;
box-shadow: 0px 0px 20px 20px #000;
}
#header
{
background: {color:header background};
position: fixed;
z-index: 3;
top: 0px;
width: 60%;
min-width: 600px;
max-width: 900px;
height: 100px;
padding: 0px;
border: 1px solid {color:side link border};
border-width: 0px 1px;
text-align: center;
vertical-align: center;
}
#header img
{
background: transparent;
width: 100%;
min-width: 600px;
max-width: 900px;
height: 100px;
min-height: 100px;
max-height: 100px;
}
#nav
{
background: {color:navigation background};
position: fixed;
z-index: 4;
top: 100px;
width: 60%;
min-width: 600px;
max-width: 900px;
height: auto;
padding: 10px 0px 15px 0px;
border: 1px solid {color:side link border};
text-align:center;
line-height:5px;
-moz-box-shadow: 0px 0px 10px 0px #000;
-webkit-box-shadow: 0px 0px 10px 0px #000;
box-shadow: 0px 0px 10px 0px #000;
}
#nav a
{
background: {color:top link bg};
padding: 2px 15px 3px 15px;
margin: 4px;
font-family: calibri;
font-size: 11px;
text-transform: uppercase;
text-decoration: none;
text-align: center;
color: {color:top link text};
-webkit-transition: all 0.5s ease-in-out;
}
#nav a:hover
{
color:{color:top link text hover};
background:{color:top link bg hover};
-webkit-transition: all 0.5s ease-in-out;
}
#right
{
background: {color:sidebar background};
position: fixed;
z-index: 3;
top: 135px;
right: 0px;
height: 100%;
width: 10%;
min-width: 150px;
text-align: center;
-moz-box-shadow: 0px 0px 10px 0px #000;
-webkit-box-shadow: 0px 0px 10px 0px #000;
box-shadow: 0px 0px 10px 0px #000;
}
#left
{
background: {color:sidebar background};
position: fixed;
z-index: 3;
top: 135px;
left: 0px;
height: 100%;
width: 10%;
min-width: 150px;
text-align: center;
-moz-box-shadow: 0px 0px 10px 0px #000;
-webkit-box-shadow: 0px 0px 10px 0px #000;
box-shadow: 0px 0px 10px 0px #000;
}
#content
{
/* Not coded yet */
}
</style>
</head>
<body>
<div id="bgside"><img src="{image:bgside}" alt="bgSide"/></div>
<!-- START OF CONTAINER -->
<div id="wrapper">
<div id= "header"><img src="{image:header}" alt="header"/></div>
<div id= "nav">
A BUNCH OF LINKS
</div>
<div id="left">
CONTENT
</div>
<div id="right">
CONTENT
</div>
<div id="content">
CONTENT
</div>
</div>
<!-- END OF CONTAINER -->
</body>
</html>
Try adding inherit to things inside the wrap that don't cascade. Some programs do this for you. For example:
height:inherit;
background:inherit;
color:inherit;
This may take a while but it works for me!
SOLUTIONS:
Width property not inheriting:
Change width properties of #nav and #header to width: inherit;
Height property not being recognized in wrapper:
In wrapper CSS, change height: 100%; to height: 100vh;
Left and Right ignoring wrapper and aligning to body:
Remove this code:
position: fixed;
z-index: 3;
top: 135px;
right: 0px;
and replace with float: right; and do the same with #left while assigning left instead of right. Then add overflow: hidden; to #wrapper
bgside ignoring z-index and layering on top:
Change z-index: 0; to z-index: -1;
I have 3 boxes and the first one it's a bit up then the other 2..
The other 2 boxes are ok next to eachother and in the same line.. but first box its not on the same line with the other 2.. its a few pixels up.
This is the css code
#services1 {
float:left;
width: 33%;
padding: 100px 0px 0px 0px;
text-align: center;
background-color: black;
height: 400px;
}
#services2 {
float:left;
width:33%;
padding: 80px 0px 0px 0px;
text-align: center;
background-color: black;
height: 400px;
}
#services3 {
float:left;
width: 33%;
padding: 80px 0px 0px 0px;
text-align: center;
background-color: black;
height: 400px;
}
How i can fix that?
use this css -
box-sizing: border-box;
on each box. This help you produce desired and accurate result.
Fiddle
Reduce the padding on the first box to 80px(Same as other two boxes). The padding value adds to the overall height of the box.
#services1 {
float:left;
width: 33%;
padding: 80px 0px 0px 0px;
text-align: center;
background-color: lightblue;
height: 400px;
}
#services2 {
float:left;
width:33%;
padding: 80px 0px 0px 0px;
text-align: center;
background-color: tomato;
height: 400px;
}
#services3 {
float:left;
width: 33%;
padding: 80px 0px 0px 0px;
text-align: center;
background-color: lightblue;
height: 400px;
}
<div id="services1"></div>
<div id="services2"></div>
<div id="services3"></div>
Update the first block, you need padding 100px to 80px
#services1 {
float:left;
width: 33%;
padding: 80px 0px 0px 0px;
text-align: center;
background-color: red;
height: 400px;
}
Its because of padding-top: 100px; other two boxes were having 80px padding.. Demo
As all the boxes were of 400px height with padding, you can adjust height or change the padding to 80px of 1st box.
#services1 {
float:left;
width: 33%;
padding: 100px 0px 0px 0px;
text-align: center;
background-color: red;
height: 380px; / *changed value*/
}
I want to place boxshadow on an image. I'm trying following but it just adds it behind the image, making it not visible. How that can be done?
CSS and HTML:
.box2 {
float: left;
height: 150px;
width: 150px;
box-shadow: inset 0px 0px 0px 10px #f00;
}
<div class="box2"><img src="https://farm1.staticflickr.com/502/18386328915_c63c4f6c7f_q.jpg" /></div>
Problem:
JSFiddle Demo:
http://jsfiddle.net/Lwm95h7q/
You can do this with :after, for example.
.box1{
height: 150px;
width: 150px;
background: green;
box-shadow:inset 0px 0px 0px 10px #f00;
float: left;
margin-right: 50px;
}
.box2 {
position: relative;
float: left;
height: 150px;
width: 150px;
box-shadow: inset 0px 0px 0px 10px #f00;
}
.box2:after {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: '';
box-shadow: inset 0px 0px 0px 10px #f00;
z-index: 1;
}
Take a look at the fiddle:
http://jsfiddle.net/skeurentjes/Lwm95h7q/5/
Just replace box-shadow with
outline: 10px solid #f00;outline-offset:-10px;
.box1{
height: 150px;
width: 150px;
background: green;
box-shadow:inset 0px 0px 0px 10px #f00;
float: left;
margin-right: 50px;
}
.box2 {
float: left;
height: 150px;
width: 150px;
outline: 10px solid #f00;
outline-offset:-10px;
}
<div class="box1">some text</div>
<div class="box2"><img src="https://farm1.staticflickr.com/502/18386328915_c63c4f6c7f_q.jpg" /></div>
This can be achieved by using an :after pseudo element with the box-shadow over the top of the img:
Add position: relative; to .box2 to allow the pseudo element to be positioned relatively to it
Add .box2:after with position: absolute; to take it out of the document flow. Set the height and width equal to the height and width of .box2 and position it to the top and left of .box2. Apply the box-shadow to this
.box1 {
background: green;
box-shadow: inset 0px 0px 0px 10px #f00;
float: left;
height: 150px;
margin-right: 50px;
width: 150px;
}
.box2 {
float: left;
height: 150px;
position: relative;
width: 150px;
}
.box2:after {
box-shadow: inset 0px 0px 0px 10px #f00;
content: "";
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
}
<div class="box1">some text</div>
<div class="box2">
<img src="https://farm1.staticflickr.com/502/18386328915_c63c4f6c7f_q.jpg" />
</div>
you have not given padding so.. add this css
.box2 {
float: left;
height: 150px;
width: 150px;
box-shadow: inset 10px 10px 10px 10px #f00;
padding: 10px;
}