I'm trying to float a div over another one but in the center (width).
EDIT: I want the container div to be over the top div and centered.
Current CSS:
body {
background-color: #FFF;
margin: auto;
}
#top {
background-color: #F2F2F2;
border-bottom: 1px solid #CCC;
height: 150px;
position: relative;
}
#container {
background-color: #FFF;
border: 1px solid #CCC;
width: 920px;
height:300px;
position: absolute;
top:0;
right:auto;
}
This is what i get:
set left:50%
and margin-left:-460px (half the width of the div)
Try this. It's untested but you basically need to set the container div to relative and then the div inside that to absolute.
body {
background-color: #FFF;
margin: auto;
}
#top {
background-color: #F2F2F2;
border-bottom: 1px solid #CCC;
top: 50%;
left: 50%;
position: absolute;
}
#container {
background-color: #FFF;
border: 1px solid #CCC;
width: 920px;
height:300px;
position: relative;
right:auto;
}
I would suggest setting #top's position attribute to absolute and using a little javascript to set the left attribute to #container's left + half of #container's width - half of #top's width.
i.e, after including jQuery (untested):
$(document).ready(function(){
var topLeft = $("#container").css("left") + ($("#container").css("width")/2) - ($("#top").css("width")/2);
$("#top").css("left", topLeft);
});
In the case that left is zero, like the example you gave, that $("#container").css("left") term is unnecessary.
EDIT: You'll also have to be sure to set the z-index attributes of the two divs appropriately.
Related
im trying to set this up as a div block centered in a section, not sure how to make the divs borders look like so. The top right and left corner have the crisscross effect. Was thinking maybe two divs with absolute positioning, then a div wrapping both of them with relative positioning
You could use a pseudo element for the second border:
.crisscross {
border: 1px solid #aaaaaa;
height: 50px;
position: relative;
width: 50px;
}
.crisscross:after {
border: 1px solid #aaaaaa;
content: "";
height: 100%;
margin: 5px;
position: absolute;
width: 100%;
}
<div class="crisscross"></div>
Imagine the following CSS:
#foo {
border: 1px solid black;
border-right: 1px solid blue;
}
In this case, at least under Chrome, the top and bottom right corner pixels of the element are blue, not black. Is it possible to make them black?
You can't do it with the normal CSS border options, but if you want to, you can still have a pure CSS solution:
Basically, what you are going to do is create two pseudo elements with CSS, and cover the corners:
#foo {
border: 100px solid black;
border-right: 100px solid blue;
height:300px;
position:relative;
}
#foo:after, #foo:before{
content:'';
background:black;
width:100px;
height:100px;
display:block;
position:absolute;
}
#foo:after{
bottom:-100px;
right:-100px;
}
#foo:before{
top:-100px;
right:-100px;
}
It might be a little messy, but it works. Set the :after and :before elements width height and position to the width of the border.
And that gives this effect:
JSFiddle Demo
I hope my crappy photoshop skills explain borders to you.
If you look in the 4 corners of the square you can see little lines, thats where one border starts and the next one begins.
This will always be in issue :P
You could either make it a background image (crappy way)
or you can use other divs to make the borders (crappy as well)
The first solution would be using a pseudo-element, which you will position absolutely to cover the right border. In order to ensure that it covers the border entirely, you will have to offset its top, bottom and right positions by the negative value of the border width. In this case I have used a width of 5px to better illustrate the example:
#foo {
background-color: #eee;
border: 5px solid grey;
width: 100px;
height: 100px;
position: relative;
}
#foo::before {
content: '';
position: absolute;
top: -5px;
bottom: -5px;
right: -5px; /* move by border width */
background-color: blue;
width: 5px;
}
<div id="foo"></div>
Alternatively, you can use CSS box shadow:
#foo {
background-color: #eee;
box-shadow: inset 0 0 0 5px grey;
width: 100px;
height: 100px;
position: relative;
}
#foo::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 5px;
background-color: blue;
}
<div id="foo"></div>
As others have pointed out, your problem is how borders are drawn in CSS.
<div id="foo">Problem</div>
#foo {
border: 30px solid black;
border-right: 30px solid blue;
}
The simplest way to work around this is to use a pseudo element. Since this workaround is entirely dependent on the value of the border-width, I’ll show an example using an SCSS variable to help make it clear where that width value is coming in.
Note: You don’t need SCSS to solve this problem, using a variable just helps readability/maintainability.
HTML:
<div id="foo"></div>
SCSS:
/* Set SCSS variable */
$border-width: 30px;
#foo {
border: $border-width solid black;
position: relative; /* anchor the absolute positioned ::after element */
}
#foo:after {
content: '';
background: blue;
width: $border-width;
height: 100%;
position: absolute;
right: -$border-width;
}
Demo: http://jsbin.com/cimaxe/6
Hopefully it’s clear that everywhere you see $border-width you can replace it with a value like 30px.
I've been struggling for hours to try and get this simple border to appear on top of a div of a set height, but it's just not happening. I've checked out z-indexing and ':after', but nothing seems to be working.
The content's parent is: (establishes the content to be in the middle of the page)
#content {
position: relative;
margin-left:auto;
margin-right:auto;
top: 50px;
width:800px;
}
The content is then filled by the div-class "greycontent":
.greycontent {
position: relative;
z-index: 1;
height: 350px;
background: url(images/stacked_circles.png) repeat;
}
The area that is now covered by the background URL attempts to contain a border (away from edges):
.fill {
position:relative;
z-index: 2;
border-style: solid;
border-width: 2px;
border-color: red;
}
It just won't work. If my description was unclear, this image should clear up what I'm trying to convey:
Thank you!
JsFiddle
Just in case you do not want to put a ::before or ::after elements, you can simply use the background-clip property.
.myDiv {
background-clip: padding-box;
}
Exemple: https://codepen.io/geekschool/pen/JBdpdj
Is this what your trying to achieve? jsFiddle
#content {
position: relative;
margin: 0 auto;
top: 50px;
width:800px;
overflow:hidden;
background:#ccc;
width:800px;
}
.greycontent {
position: relative;
z-index: 1;
height: 350px;
width:350px;
border:1px solid #fff;
background:#ccc;
margin:0 auto 60px;
}
Updated your jsFiddle.
Related to this question.
Here's a fiddle: http://jsfiddle.net/DRbRS/
Notice how the red-outlined list div does not align at the bottom of the green container div.
The problem is that there is no way of knowing ahead of time what the resulting height of the list ought to be, even if the height of the header is known.
Is there any way to deal with this without resorting to javascript?
What we need is a style like height: fill;
Using position: absolute and setting top, left, right, and bottom: http://jsfiddle.net/QARC9/
This article describes why it works.
http://www.alistapart.com/articles/conflictingabsolutepositions/
Replace your CSS with this
#container {
left: 50px;
width: 200px;
position: fixed;
height: 90%;
border: 2px dashed green;
}
#header {
height: 30px;
line-height: 30px;
text-align: center;
border: 2px dashed blue;
margin-left:-2px;
margin-top:-2px;
width:200px
}
#list {
border: 2px dashed red;
overflow: auto;
height: 91%;
width:200px;
margin-left:-2px;
margin-top:-2px;
}
or see the demo here http://jsfiddle.net/enve/DRbRS/3/
I am trying to vertically center one div (containing a search bar) inside another (a top banner). I was under the impression that to do so you did the following:
#banner {
height: 35px;
width: 100%;
}
#searchbar {
height: 15px;
position: relative;
top: 50%;
margin-top: -7.5px; /* half of the height */
}
This works fine until you add the margin-top at which point it is applied to the #banner as well.
Is there an alternative way to do this, or am I just doing it wrong?
Here's a jsFiddle of my actual code.
I use line-height with the value being the same as height of parent div.
As seen here: http://jsfiddle.net/vkJ78/24/
CSS:
#banner {
background-color: #770E17;
height: 35px;
width: 100%;
border-bottom: 1px solid #333;
}
#src {
width: 300px;
height: 15px;
border: 1px solid #333;
padding: 3px;
}
#srcdiv {
width: 308px;
margin: 0px auto;
position: relative;
line-height: 35px;
}
EDIT: Per recommendation from NGLN, this will also fix horizontal centering, #srcdiv and #src having equal widths.
You have to add overflow: hidden to #banner. To clear the float, I guess.
Then, modify the negative margin to margin-top: -11px in #srcdiv (you have to sum the div height, the border, and the padding for the total height)
http://jsfiddle.net/vkJ78/1/
Give margin:0px and padding:0px and remove margin-top
body {
margin:0px;
padding:0px;
}