http://i.imgur.com/TLJrmz0.png
border is part of a div called wrapper, and is cut off by other div/elements. Border is not an absoulte.
How can i make the border come above all other layers/elements/divs on the page?
condensed/simplified html/css:
http://pastebin.com/AsdAiLt3
Thanks.
.wrapper {
max-width: 800px;
min-width: 800px;
border: 3px solid #000000;
margin: 10px 0px auto;
padding: 10px 12px;
}
.page {
min-width: 100%;
margin: 0px auto;
position: relative;
background-color: #f00;
display: inline-block;
}
Demo here
Try adding overflow:hidden to the container with the border or make it wide enough not to be overlayed assuming the elements are in that container
Related
I'm currently stuck on an design issue that has had me scratching my head for a bit too long.
I have a two-column layout with one column for content (left) and a side bar that lists some sports venues (right) and this column's content exceeds that of the content column.
Basically what I'm looking to achieve is to make the content column match the left hand column.
Much like the one I quickly did up over on Codepen http://codepen.io/anon/pen/iLJAe
Any advice on how to do this would be greatly appreciated.
Thanking you in advance
Stu :)
Here what I have in my style.css for the two columns.
style.css
.content {
border: 1px solid #e8e8e8;
float: left;
margin: 5em 0 0;
padding: 1em;
height: 100%;
}
.sidebar {
border: 1px solid #e8e8e8;
float: left;
margin: 5em -0.1em 0;
padding: 1em;
height: 100%;
}
You can use css display: table; property.
First put the two divs in a wrapper (act as a parent div for both)
Like:
<div id="#wrapper">
<div class="content"></div>
<div class="sidebar"></div>
</div>
Then in your css, use display: table to the wrapper div and display:table-cell; to the column divs (this will make the both divs behave like <td> in a table) to get them to same height.
Like:
.wrapper{
height: 100%;
width: 100%;
display: table;
float:left;
}
.content {
border: 1px solid #e8e8e8;
margin: 5em 0 0;
padding: 1em;
height: 100%;
background: red; /* for test */
display: table-cell;
}
.sidebar {
border: 1px solid #e8e8e8;
margin: 5em -0.1em 0;
padding: 1em;
height: 100%;
background: blue; /* for test */
display: table-cell;
}
WORKING SAMPLE
I have this code JSFiddle :
HTML
<div id="logo"></div>
<div id="menu"></div>
CSS
#logo {
width: 400px;
height: 100px;
margin: auto;
background-color: beige;
}
#menu {
width: 200px;
height: 100px;
margin: auto;
background-color: green;
}
#menu:hover {
border-top: 15px #f39539 solid !important;
margin-top: -15px;
}
It works very good but when i was playing with CSS values i found something that i didn't understand.
My question is why when i put value lower than -15px in margin-top, my menu div don't go up when i hover over it ?
why margin-top: -30px; is the same that margin-top: -15px; ?
P.S : 15px is also the value of my border-top-width.
UPDATE
and what is weird is when i drop border-top: 15px #f39539 solid !important; when i hover, My DIV go up without problem even when i put margin-top: -50px; ! JSFiddle
#menu:hover {
/* border-top: 15px #f39539 solid !important; */
margin-top: -50px;
}
I think if I understand what you are asking is....
What you are seeing is margin collapse.
It's when you have two adjoining margins, the largest wins - the smallest is lost.
More details here: http://reference.sitepoint.com/css/collapsingmargins
I'm trying to get a fixed-sidebar-with-fluid-content layout working. I've run into a problem where the sidebar is at height: 100%, but it doesn't seem to be filling the whole window.
See this fiddle: http://jsfiddle.net/samselikoff/ZqycY/2/. The green sidebar should go all the way down.
Any ideas what's happening?
I think it's the issue with height: 100%; setting. When you resize the browser to shorten it, that sidebar will just cover the whole height of the browser window. You may try the following alternative CSS:
/*html, body { height: 100%}*/
body { background-color: #1db34f;}
#side-panel {
float: left;
width: 240px;
padding: 10px 20px 10px 20px;
/* height: 100%;
background-color: #1db34f;
border-right: 1px solid #dddddd; */
text-align: center;
}
#center-panel {
margin-left: 280px;
background-color: #ddd;
text-align: center;
border-left: 1px solid #dddddd;
}
#center-panel .row-fluid {overflow: auto;}
#center-panel .large {height: 400px; padding: 10px; background-color: #f17f49;}
Since you are looking for a fixed sidebar, it should be #side-panel { position: fixed; }. Hope this is what you want
I have tried multiple methods found on this website, and nothing seems to help.
I am trying to center 2 divs that are floating left and right in a container that has a 100% width.
CSS Snippet:
#body-container {
background: none;
height: 100%;
width: 100%;
margin: 0 auto;
}
#body-inner {
float: left;
width: 550px;
left: 325px;
margin: 0 auto;
background: none;
padding-top: 3%;
padding-left: 10px;
padding-right: 10px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
#bodybox {
margin: 0 auto;
width: 200px;
height: 100%;
right: 325px;
background: none;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
}
You need to do some research about how floats work, because I think you have the wrong idea. Floating one div left and one right, there is no way to center them, because they are floated. The left and right properties don't work unless the element is positioned (absolute, fixed, or relative with some implications). Also, it looks like you're trying to get the right edge of #bodybox to line up with the left edge of #body-inner. This won't work, because the right property is calculated from the right edge of the screen, not the left edge. Also, you're mixing fixed box dimensions with a fluid container width. This is fine, if you account for what happens to them when they collide.
If you're just trying to align the two <div> beside each other, centered on the page. In this case, inline-block is probably your friend. There are numerous implications and workarounds regarding white space, font sizes, order of content, etc., but essentially you would do:
#body-container {
width: 100%;
text-align: center;
}
#body-inner {
width: 550px;
}
#bodybox {
width: 200px;
}
In the above, the two <div>s would sit next to each other as long as the container is wide enough, once the container is too small, they will display one before the other, each centered in the container.
Could this be what you're looking for? Click here...
If I understand your question, you're trying to center a <div> that has 2 more <div> parents...
Code Snippet:
#body-container {
background: none;
height: 100%;
width: 100%;
/*margin: 0 auto;*/
/* testing border and height, could be deleted */
border: solid;
height: 500px;
}
#body-inner {
width: 550px;
margin: 0 auto;
background: none;
padding-top: 3%;
padding-left: 10px;
padding-right: 10px;
/*border-left: 1px solid #000000;
border-right: 1px solid #000000;*/
/* testing border and height, could be deleted */
border: solid;
height: 400px;
}
#bodybox {
margin: 0 auto;
width: 200px;
height: 100%;
/*right: 325px;*/
background: none;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
/* testing border and height, could be deleted */
border: solid;
height: 400px;
}
I have a div inside of another div. #outer and #inner. #outer has curved borders and a white background. #inner has no curved borders and a green background. #inner extends beyond the curved borders of #outer. Is there anyway to stop this?
#outer {
display: block;
float: right;
margin: 0;
width: 200px;
background-color: white;
overflow: hidden;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#inner {
background-color: #209400;
height: 10px;
border-top: none;
}
<div id="outer">
<div id="inner"></div>
<!-- other stuff needs a white background -->
<!-- bottom corners needs a white background -->
</div>
No matter how I try it still overlaps. How can I make #inner obey and fill to #outer's borders?
edit
The following hack served the purpose for now. But the question stands (maybe to the CSS3 and webbrowser writers): Why don't child elements obey their parent's curved borders and is there anyway to force them to?
The hack to get around this for my needs for now, you can assign curves to individual borders. So for my purposes, I just assigned a curve to the top two of the inner element.
#inner {
border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px;
border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px;
}
According to the specs:
A box's backgrounds, but not its
border-image, are clipped to the
appropriate curve (as determined by
‘background-clip’). Other effects that
clip to the border or padding edge
(such as ‘overflow’ other than
‘visible’) also must clip to the
curve. The content of replaced
elements is always trimmed to the
content edge curve. Also, the area
outside the curve of the border edge
does not accept mouse events on behalf
of the element.
http://www.w3.org/TR/css3-background/#the-border-radius
This means that an overflow: hidden on #outer should work. However, this won't work for Firefox 3.6 and below. This is fixed in Firefox 4:
Rounded corners now clip content and images (if overflow: visible is not set).
https://developer.mozilla.org/en/CSS/-moz-border-radius
So you'll still need the fix, just shorten it to:
#outer {
overflow: hidden;
}
#inner {
-moz-border-radius: 10px 10px 0 0;
}
See it working here: http://jsfiddle.net/VaTAZ/3/
What would be wrong with this?
#outer {
display: block; float: right; margin: 0; width: 200px;
background-color: white; overflow: hidden;
}
#inner { background-color: #209400; height: 10px; border-top: none; }
#outer, #inner{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
If you want sharp edges on the bottom:
Use these :
border-top-left-radius: 10px;
border-top-right-radius: 10px;
-moz-border-radius-topleft
-moz-border-radius-topright
have you tried making the position:relative for the inner div ???
that is:
#inner {
background-color: #209400;
height: 10px;
border-top: none;
position: relative;
left: 15px;
top: 15px;
}
You can simply use
border-radius: inherit;
to follow the parent
.parent {
width: 100px;
height:100px;
border:1px solid green;
border-radius: 16px 16px 0 0;
padding: 10px;
}
.child {
width:100px;
height: 100px;
border: 1px solid red;
background: blue;
border-radius: inherit;
}
<div class="parent">
<div class="child">
</div>
</div>