Hey so I'm trying to create a nested div element so that it lies within another div element but fills up its parent entirely except for a perfect border around it that 30 px or so like this http://s23.postimg.org/su2o83m7v/div.png
I've tried padding, margins and positioning with css but cant seem to keep its width and the bottom part of the padding, any suggestions?
Two ways to go about this.
1) Box-sizing
.OuterDiv {
box-sizing:border-box;
border:30px solid green;
}
.InnerDiv {
background-color:red;
border:4px solid blue;
}
Here is the jsFiddle for it.
2) Position absolute
.OuterDiv {
position:relative;
height:100px;
background-color:green;
}
.InnerDiv {
position:absolute;
top:30px;
left:30px;
right:30px;
bottom:30px;
background-color:red;
border:4px solid blue;
}
Here is the jsFiddle for that.
Personally I would choose the first option any day of the week (hell of a lot easier to maintain, and really you should use box-sizing:border-box; for everything), but if you desperately need IE7 support the second one will work there whereas the first is only IE8+.
Try the below code
<html>
<head>
<style>
.outer{
height:200px;
width:200px;
padding:30px;
background-color:#ff0000;
}
.inner{
height:100%;
width:100%;
background-color:#00FF00;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
I am giving the outer div padding of 30px, and rest is simple just made height & width 100%
used background-color to show the div differently
I found this too work as well
#parent
{
border:1px solid black;
background:#ddd;
display:inline-block;
}
#child
{
width:180px;
margin:30px;
background:grey;
}
http://jsfiddle.net/Y37su/
Related
I've seen several similar questions/answers to this problem on SO but none of the answers that I've checked have helped me.
I'm attempting to have a "Side-Bar" extend from 10px less than the top of the page, all the way to the bottom.
However (when using height:100%), the "Side-Bar" only reaches to the bottom of the loaded browser window, if there is content past the browser window that you scroll down to, the "Side-Bar" ends prematurely.
Basically, its height is only 100% of the browser window, I desire it to be 100% of the full page content.
I've created a JSFiddle that shows my problem:
http://jsfiddle.net/qaEzz/1/
My CSS:
#sidebar {
position:absolute;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}
i put the <div id="sidebar"></div>
into the <div id="content">
and added in the css
#topbar {
width:100%; <--this
height:20px;
background-color: red;
}
and this
#sidebar {
position:absolute;
right:16px; <--! extended to 16 px
width:200px;
height:100%;
overflow:hidden;
margin-top:-10px; <--!
background-color: yellow;
}
#content {
position: absolute;<--! and remove the marging: 10px just add a <br> in the html
width:100%
}
Here is the working Fiddle
If you change position:absolute; to position:fixed;, then it would stick to its position on the right.
For a sidebar that might have a longer length than the browser length itself, instead of the position attribute, use the float attribute.
http://jsfiddle.net/wK2Yh/
#sidebar {
float:right;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}
I'm working on the following layout structure:
<div id="wrapper">
<div id="header"></div>
<div id="pageContainer"></div>
<div id="footer"></div>
</div>
With the following CSS I set the footer to the bottom of the page:
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#pageContainer {
padding:10px;
padding-bottom:60px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#6cf;
}
If the content in the 'pageContainer div' is small, I don't want to show the scroll bars in the div but attach the footer to the bottom of the 'pageContainer div' (right not the footer is always at the bottom of the viewport)
If the content of the 'pageContainer div' is long I need the footer to remain visible in the viewport (at the bottom) and show the scroll bars in the 'pageContainer div'.
How do I do this? Any ideas? thanks!
PS: I need a solution that doesn't use JS.
If I read you correctly, you're describing behavior where positioning switches from relative to fixed, depending on the size of an element relative to the real-estate available in the viewport.
Quite certainly, you cannot achieve this without JavaScript.
But a solution where the footer is always at the bottom of the viewport is fairly common and easy to do without JavaScript. In case you do not already know how to do that:
#header, #pageContainer, #footer{
position:fixed;
left:0px;
right:0px;
}
#header{
top:0px;
height:100px;
background:#ff0;
}
#pageContainer {
top:100px;
bottom:60px;
overflow:auto;
}
#footer {
bottom:0px;
width:100%;
height:60px;
background:#6cf;
}
I guess you could do something like this:
#header {
background:#ff0;
padding:10px;
height: 15%;
}
#pageContainer {
padding:10px;
max-height: 70%;
overflow: auto;
}
#footer {
bottom:0;
width:100%;
height:15%;
background:#6cf;
}
Note that you need to specify your heights in percentages. Also padding might be an issue.
I'm tyring to nest three divs and have each. I want the appearance to look like each parent is 10px larger than it's child and be responsive when the horizontal width changes. When I do this with two DIVs everything works well.
CSS
#holder
{
margin:auto;
width:90%;
height:150px;
background-color:#999;
padding:10px;
border: 1px solid;
}
#inside
{
position:relative;
width:100%;
height:100%;
background-color:#9F0;
border: 1px solid;
}
HTML
When I add the third child, that's when it all goes wrong. The middle child (the green box) moves partially out of it's parent.
CSS
#holder
{
margin:auto;
width:90%;
height:150px;
background-color:#999;
padding:10px;
border: 1px solid;
}
#inside
{
position:relative;
width:100%;
height:100%;
background-color:#9F0;
border: 1px solid;
padding:10px;
}
#header
{
position:relative;
width:100%;
height:100%;
background-color:#C00;
}
HTML
<div id="holder">
<div id="inside">
<div id="header"/>
</div>
</div>
I do understand padding and margin and that those will add the "real" width and height of the box, but I can not figure out how to get these boxes inside of each other. things I have tried are below
playing with margins and padding
playing with different % on the widths of child boxes. This works to a point, but depending on the width of the browser window the ratio of the distance between the children changes.
Sounds like a cascade-type comment list.
Well... Remove the width from #inside and #header. DIVs are block-level elements.
Add
#holder div {
padding-left: 10px;
}
Every DIV under #holder will inherit the padding-left css property.
I think (and hope :P) that's what you were looking for.
suppose i have a div, i want it to be out of visible area of computer monitor screen, so that when i use CSS transitions to move it to a specific position, an effect of element moving in slowly from outside of screen is created, and i also would like to create its reverse effect.
position: absolute; then do something like left: -100px;
working example(hover over the box and wait): http://jsfiddle.net/fDnPj/
http://jsfiddle.net/DZFtt/
<div id="example"></div>
<div id="example2"></div>
<div id="example3"></div>
#example{
width:50px;
height:50px;
background-color: #386a95;
position:relative; /*Not moved*/
}
#example2{
width:50px;
height:50px;
background-color: rgb(177, 35, 35);
position:relative;
left:-25px; /*Pushed halfway off the screen*/
}
#example3{
width:50px;
height:50px;
background-color: green;
position:relative;
left:-50px; /*This is now totally hidden from view*/
}
IF you know the width of the div you can use the combination of position and left property like this
#my-div {
position:absolute;
left:-100px;
top:0;
width:100px;
background-color:red;
}
<div id="my-div">Hello</div>
Play here by adjusting the left property.
Here is the HTML Code:
<div id="header">
</div>
<div id="container">
<div id="leftbar">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
And here is what I want to achieved, even though it's not valid CSS, but I think you will understand my point:
html,body
{
min-width:800px;
max-width:1680px;
width:100%;
height:100%
}
#header
{
width:100%;
height:100px;
background:#CCCCCC url(images/header_bg.gif) repeat-x;
}
#footer
{
width:100%;
height:10px;
}
#container
{
width:100%;
height:100%-100px-10px; /* I want #container to take all the screen height left */
}
#leftbar /*fixed width, the height is always the same as the screen height*/
{
height:100%;
width:200px;
}
#content
{
height:100%;
width:100%-200px; /* take all the screen width left except the leftbar */
overflow:auto;
}
Someone just put this as an example:
http://limpid.nl/lab/css/fixed/header-and-footer
I do not think using <body>padding to exclude the header and footer is a good way to go, because I would like all the scroll bars appear inside the div#content, not for the whole <body> tag.
The normal width of a block element is 100% so all you should need to do is add a margin as appropriate. If I'm understanding your question properly.
Have you considered using position:fixed for the framework elements? Or are you stuck supporing IE6?
the horizontal bit can be achieved quite easily
#content {margin-left:200px;}
#left-bar {float-left;width:100px;}
The vertical bit is trickier as there is no vertical equivalent of float. A close approximation that might work is:
html,body
{
min-width:800px;
max-width:1680px;
width:100%;
height:100%
}
#header
{
width:100%;
height:100px;
background:#CCCCCC url(images/header_bg.gif) repeat-x;
position:absolute;
top:0;
left:0;
}
#footer
{
width:100%;
height:10px;
position:absolute;
bottom:0;
left:0;
}
#container
{
width:100%;
height:100%;
margin-top:100px;
margin-bottom:10px;
}
#leftbar
{
height:100%;
width:200px;
float:left;
}
#content
{
height:100%;
margin-left:200px;
overflow:auto;
}
You could use calc(), e.g.:
#container {
...
height: calc(100% - 100px - 10px);
}
And you could either use margins or fixed positioning to set the position of it to between the header and footer.
As for the scrollbars, just apply overflow: hidden to body and div#container and apply overflow: auto to div#content.