I´m trying to set a background color on a div that is stretched (using negative margins) to the full width of its outermost parent div.
Here´s a simplified example: http://jsfiddle.net/U5dnd/
The white div .featured-wrapper covers the full width of the black div .site, but its background color doesn´t. I suppose the margins are transparent.
Is there a way to make the whole .featured-wrapper div white, including its (negative) margins? (Or is there another way to accomplish this?)
Thanks!
.featured-wrapper {
background-color: white;
height:50px;
margin: 20px 0px 0 0px;
position:absolute;
width:100%;
z-index:100;
left:0;
}
Check this
JS Fiddle
CSS:
.site {
background-color:black;
padding: 0 40px;
height:300px;
width:320px;
}
.site-content {
width:100%;
overflow:hidden;
}
.wrapper {
overflow:hidden;
background-color:red;
height:100%;
}
.featured-wrapper {
background-color: white;
height:50px;
margin: 20px 0 0 -40px;
position: absolute;
width: 399px;
}
HTML:
<div id="page" class="site">
<div id="main" class="wrapper">
<div id="primary" class="site-content">
<div class="featured-wrapper">
<p>This is the featured wrapper</p>
</div>
</div>
</div>
</div>
Related
I'm trying to overlay this card that says "A, Snare" with a 30% top and 30% left over the canvas but get this trailing white space to the right of the canvas. I've attached a picture with the "div.content" highlighted to show you what I mean. How can I get this card to float above the canvas without any resulting whitespace?
Trailing white space.
#canvas{
background:black;
width:100%;
height:100%;
position:absolute;
z-index: -1;
}
body, html{
height:100%;
margin:0;
}
.content{
display:inline-block;
width:100%;
left: 30%;
top:30%;
right:-30%;
position:relative;
}
.card{
background-color:green;
width:3%;
height 100%;
border: white solid 2px;
}
<body>
<canvas id="canvas" resize hidpi=off></canvas>
<div class="content">
<div class="card">
<h1 class="card__title">A</h1>
<p class="card__description">
Snare
</p>
</div>
</div>
</body>
You currently have the width of the content set to 100%. This means that this div has a width of 100% of the screen.
Your margin-left is 30%, making the total width 130%. Make your contenta width of 70% and the problem is solved, as that totals to 100%.
Edit: I made the card wider to show the text, just so you know.
#canvas{
background:black;
width:100%;
height:100%;
position:absolute;
z-index: -1;
overflow: hidden;
}
body, html{
height:100%;
margin:0;
}
.content{
display:inline-block;
left: 30%;
top:30%;
width: 70%;
position:relative;
}
.card{
background-color:green;
width:10%;
height 100%;
border: white solid 2px;
}
<body>
<canvas id="canvas" resize hidpi=off></canvas>
<div class="content">
<div class="card">
<h1 class="card__title">A</h1>
<p class="card__description">
Snare
</p>
</div>
</div>
</body>
I want to fill the sides of a centered div with another div or span on each side.
I'm using margining to center the div as shown in this fiddle.
HTML
<div id='A>
<div id='Ad'>
</div>
</div>
CSS
#A{
z-index: 3000;
position: fixed;
width: 100%;
height: 40px;
background: rgba(0,0,0,0.05);
}
/*
div or span to the left
*/
/*
centered div
*/
#Ad{
z-index: 3000;
width: 400px;
height: 40px;
margin-left: auto;
margin-right: auto;
border-left: solid 1px #ff0000;
border-right: solid 1px #ff0000;
}
/*
div or span to the right
*/
How can I have a div that always takes up the remaining space on the left and another div that takes up the remaining space on the right.
Clarification:
Center column needs to be constant width. Left and Right Columns vary with the window size.
This would achieve what you want - it allows you to have a fixed width central div with left and right columns that fill up the remaining space:
HTML:
<div id="A">
<div id="Ad">Centre</div>
<div id="left">Left</div>
<div id="right">Right</div>
</div>
CSS:
#A {
z-index: 3000;
position: fixed;
width: 100%;
height: 400px;
background: rgba(0, 0, 0, 0.05);
}
/*
centered div
*/
#Ad {
z-index: 3000;
width: 400px;
height: 400px;
margin-left: auto;
margin-right: auto;
border-left: solid 1px #ff0000;
border-right: solid 1px #ff0000;
}
#left, #right {
position:absolute;
left:0;
top:0;
right:50%;
margin-right:200px;
background:#F00;
height: 400px;
}
#right {
left:50%;
right:0;
margin-left:200px;
margin-right:0;
}
The key is that the margin on the left/right is half of the central column's total width, so adjust it to take into account any borders or padding.
Working example: http://jsfiddle.net/2AztF/
I would just use 3 <div>s floated within the main container
HTML:
<div id='A'>
<div id='AdLeft'></div>
<div id='Ad'></div>
<div id='AdRight'></div>
</div>
CSS:
#A { overflow:auto }
#AdLeft { float:left; width:25%; }
#Ad { float:left; width:50%; }
#AdRight { float:left; width:25%; }
Here is a modified jsfiddle.
Make 3 divs :
<div id="A"></div>
<div id="B"></div>
<div id="C"></div>
<div style="clear:both"></div>
CSS:
#A,#B,#C{
float:left;
width:10%;
}
#B{
width:80%;
}
Here, B is you main div.
It is good practice to clear when you use float property.
To fill space on the right and left side of your div code use and make sure you have no margin or padding on those sides.
float:right;
float:left;
HTML:
<div class='container'>
<div class='left'></div>
<div class='center'></div>
<div class='right'></div>
</div>
CSS:
.container { overflow: hidden; margin:0; padding:0; }
.right { float: right; width: 150px; }
.center{ float: right; width:50px; margin-right: 50px; }
.left{ float: left; width: 150px; }
The margin-right of .center will fill the space accordingly.
I have a container <div> that wraps around 5 other <div>s. I would like to apply a box-shadow: inset property to the container div, so it looks like all the elements within that container are beneath it and the shadow is 'on top' of them.
Problem is, it seems that the <div> elements within the container appear on top, and hide the shadow. I have tested the container <div> to ensure that the box-shadow effect is being applied properly by removing any one of the divs within it. I have also tried adjusting the z-index's of all of the elements in order to adjust what elements are on top of what.
Am I able to accomplish this effect using the HTML structure I have now? Would resorting to a position:absolute div positioned over the container be able to create this effect?
Please see example - http://jsfiddle.net/mDcKz/
Many thanks SO
Yes try this:
.container {
position:absolute; display:block;
margin:0px;
padding:0px;
height:100%; width:100%;
box-shadow:inset 0 0 20px #000000;
background:none;
z-index:10 !important;
pointer-events:none;
}
Try this code
.container {
position:absolute; display:block;
margin:0px;
padding:0px;
height:100%; width:100%;
box-shadow:inset 0 0 20px #000000;
background:none;
z-index:10 !important;
}
.subcontainer {position:absolute; display:block;z-index:5 !important;height:100%; width:100%;}
<div class="container">
<div class="clear"></div>
</div>
<div class="subcontainer">
<div class="divider red"></div>
<div class="divider yellow"></div>
<div class="divider green"></div>
<div class="divider orange"></div>
<div class="divider gray"></div>
</div>
I was facing a similar issue applying box-shadow to a container, this is the solution that worked for me:-
HTML Code
<div class="graph">
<section>
<div>
<span class="danger" style="height: 29.33333333333333%;">Failed</span>
</div>
<div>
<span class="safe" style="height: 70.66666666666667%;">Sent</span>
</div>
</section>
</div> <!-- END GRAPH -->
CSS Code
.graph {
width: 280px;
height: 300px;
position: aboslute;
box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
z-index: 999;
}
.graph section {
width: 100%;
height: 100%;
display: table;
text-align: center;
position: relative;
z-index: -1;
background: orange;
margin: 0;
padding: 0;
}
.graph section div {
display: table-row;
position: relative;
}
.graph section span {
display: table-cell;
vertical-align: middle;
position: relative;
z-index: 1;
}
With this the box-shadow overlays the child elements and the child element is accessible too.
I a blue div set to display: inline-block; so that it shrink wraps to its content. I am trying to center the blue div in the middle of the red div.
hi
<div class="dim">
<div class="test">
<div> test </div>
<div> 2nd </div>
</div>
</div>
.dim {
height:100%;
width:100%;
position:fixed;
left:0;
top:0;
z-index:1 !important;
background-color:red;
opacity: 0.5;
}
.test {
border: solid;
display: inline-block;
background-color:blue;
}
Jsfiddle link to code
I tried this in your fiddle. It worked.
.test {
border: solid;
display: inline-block;
background-color:blue;
position: fixed;
margin-top: 50%;
margin-left:50%
}
It will break once you resize the div. If you don't set a size to your div, the only way it will stay in the center without an stablished size is with JavaScript.
But, you don't have to look too hard to find better answers.
I need help in centering one DIV withing a DIV.
I want to have one container DIV that is auto width to take up the whole width of the screen (lets call it headerContainer.
Within headerContainer, I want 3 more DIVs:
A Left DIV (400px wide)
A Center DIV (100px wide)
A right DIV (200px wide).
I want the center DIV directly in the middle of the screen. Right now I can only get it to center between the left and right DIV.
Thanks for any help.
CSS:
.leftDiv{
float: left;
width: 400px;
}
.rightDiv{
float: right;
width: 200px;
}
.centerDiv{
width: 100px;
margin: 0 auto;
}
HTML:
<div>
<div class="leftDiv">left</div>
<div class="rightDiv">right</div>
<div class="centerDiv">center</div>
</div>
DEMO:
Code: http://jsfiddle.net/Xxwrm/6/
Fullscreen: http://jsfiddle.net/Xxwrm/6/show
This works.
.headerContainer{
width:auto !important;
}
.leftDiv{
float:left;
width:400px;
}
.rightDiv{
float:right;
width:200px;
}
.centerDiv{
display:inline;
width:100px;
margin-left:auto;
margin-right:auto;
}
.
<div class="headerContainer">
<div class="leftDiv"></div>
<div class="centerDiv"></div>
<div class="rightDiv"></div>
</div>
What you could do is add another div at the end which makes both sides equal, and set visibility: hidden; (not display: none;); this way it would centre the middle div.
For example in this case you'd have one # 400px, another # 100px, another # 200px and another one, hidden, # 200px.
Regards,
Richard
<div class="headerContainer">
<div class="leftDiv">left</div>
<div class="rightDiv">right</div>
<div class="centerDiv">center</div>
</div>
This HTML with this CSS will work. I colored the DIV's to make it obvious.
.headerContainer{
width:auto;
}
.leftDiv{
float:left;
width:400px;
background:pink;
}
.centerDiv{
width:100px;
/*
margin-left:auto;
margin-right:auto;
*/
margin:0 auto;
background:cyan;
}
.rightDiv{
float:right;
width:200px;
background:lightgray;
}
However, if the screen is not 700px wide, you will get some wrapping.
Here is a fiddle for it, too: http://jsfiddle.net/johnpapa/9bN2p/
You can use a modern solution due the flex concept of css3.
.parent {
display: flex;
height: 300px;
/* Or whatever */
background-color: green;
}
.child {
width: 100px;
/* Or whatever */
height: 100px;
/* Or whatever */
margin: auto;
/* Magic! */
background-color: yellow;
}
<div class="parent">
<div class="child ">Div1</div>
</div>