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.
Related
I'm trying to get several inline and inline-block components aligned vertically in a div. How come the span in this example insists on being pushed down? I've tried both vertical-align:middle; and vertical-align:top;, but nothing changes.
HTML:
<div>
<a></a><a></a>
<span>Some text</span>
</div>
CSS:
a {
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
}
div {
background:yellow;
vertical-align:middle;
}
span {
background:red;
}
RESULT:
FIDDLE
vertical-align applies to the elements being aligned, not their parent element. To vertically align the div's children, do this instead:
div > * {
vertical-align:middle; // Align children to middle of line
}
See: http://jsfiddle.net/dfmx123/TFPx8/1186/
NOTE: vertical-align is relative to the current text line, not the full height of the parent div. If you wanted the parent div to be taller and still have the elements vertically centered, set the div's line-height property instead of its height. Follow jsfiddle link above for an example.
Give vertical-align:top; in a & span. Like this:
a, span{
vertical-align:top;
}
Check this http://jsfiddle.net/TFPx8/10/
Simply floating both elements left achieves the same result.
div {
background:yellow;
vertical-align:middle;
margin:10px;
}
a {
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
float:left;
}
span {
background:red;
display:inline-block;
float:left;
}
For fine tuning the position of an inline-block item, use top and left:
position: relative;
top: 5px;
left: 5px;
Thanks CSS-Tricks!
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/
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;
}
One for the CSS gurus - is it possible for a div to 'escape' the constrained in the boundaries of a div with fixed dimensions and overflow:hidden?
Ive recreated the example here: http://jsfiddle.net/Wt3q4/1/
Ive tried setting z-indexes on all the elements, and assigning the div with class b position:absolute with no joy.
Since .b is nested with an element that's position:relative;, setting .b to absolute won't do anything. That I know of, with the element structure you have defined, there isn't going to be a CSS work around.
Without knowing more about your layout and what you're trying to accomplish, it's difficult to advise. You could try setting up a "double container" if that makes sense, and use a jQuery function to move the element out of the overflow:hidden; element when you want to show it.
http://jsfiddle.net/Wt3q4/3/
HTML
<div class="a">
<div class="b">
<div class="c">
</div>
</div>
</div>
<div id="show" class="button">Show!</div>
<div id="hide" class="button">Hide!</div>
CSS
.a{
position:relative;
height:200px;
width:200px;
border:3px solid #f00;
background:#ccc;
}
.b{
position:relative;
height:200px;
width:200px;
background:#ccc;
overflow: hidden;
}
.c{
width:50px;
height:300px;
border:3px solid #00f;
background:#dad;
margin:30px;
position:absolute;
z-index:333;
}
.hidden{
display: none;
}
.button {
width: 50px;
padding: 5px;
text-align: center;
border: 3px solid #aaa;
background: #ddd;
margin: 20px;
float: right;
}
jQuery
$('#show').on('click', function(){
$('.c').prependTo('.a');
$('.b').addClass('hidden');
});
$('#hide').on('click', function(){
$('.c').prependTo('.b');
$('.b').removeClass('hidden');
});
Based on my understanding of CSS's block formatting context, your div.b is a child of div.a, which means that div.a sets the block formatting context for div.b. Once you set overflow: hidden on the parent element, any child content that flows out of the parent content box will not be visible.
This is more apparent if you set outline: 1px solid black on the parent container so that you can see the extend of the content box, both with overflow hidden and visible.
Your question does touch on the essentials of CSS's visual formatting model.
How about something like:
.menu > li > ul {
position: absolute; /* you still need this here */
background-color: #9F26B4;
width: 10000000000000000px;
margin-left: -100000px;
padding-left: 100000px;
list-style: none;
z-index: 1000;
top: 0;
left: 0;
}
This, for example, overflows the entire page from left to right (assuming that the body overflow-x is set to hidden) and then set element width to enormous width, margin it to negative left to fill any left content, and padding to the left to move object inside the element to desirable X position. What you think?
My outer div is position:relative and inner div is positioned absolute.
I want to set my inner div center align vertically and thinking to use top:auto and bottom:auto but it is not working. Please advice me how it can be done.
div.Container div.Right
{
width:50%;
float:right ;
border: 01px dashed green;
height:95px !important;
position:relative !important;
}
div.header-search
{
overflow:auto;
display:inline;
border:0px dashed blue;
position:absolute;
top:auto;
bottom:auto;
right:0px;
}
<div class="Right">
<div class="header-search">
<input type="text" class="searchbox" />
<input type="button" class="searchbutton" value="›" />
</div>
</div>
You can use line-height:95px; in the outer div and vertical-align: middle; in the inner div like this:
div.Right
{
width:50%;
float:right ;
border: 01px dashed green;
line-height:95px !important;
display: block;
}
div.header-search
{
overflow:auto;
border:0px dashed blue;
vertical-align: middle;
}
You can play with it here: http://jsfiddle.net/leniel/5Mm67/
If you want to horizontal align the content of the inner div, just add this in div.Right:
text-align: center;
Here's the result: http://jsfiddle.net/leniel/5Mm67/1/
the best way to achieve what you are after would be to remove the bottom:auto; style and replace the top:auto; with top:50%; . After that work out the height of the search bar that you are trying to center (say its 20px) and add a negative margin styles for half of its height, so if it was 20px the style would be margin-top:-10px;
your css would look like this:
div.header-search
{
overflow:auto;
display:inline;
border:0px dashed blue;
position:absolute;
top:50%;
height:20px;
margin-top:-10px;
right:0;
}
set .header-search to top:50% or bottom:50% then use margin-top:-(half of div height) or margin-bottom:-(half of div height); respectively. I also sometimes just simply use top:50% or bottom: 50% without the negative margins.
For example:
div.header-search
{
overflow:auto;
display:inline;
border:0px dashed blue;
position:absolute;
top:50%;
height: 500px;
margin-top:-250px;
right:0px;
}
So yeah, in this case you would have to set a fixed height.
Set in the div with position absolute: "top:50%;"
It will display the div a litle bit to low (top od the absolute div should be exacly on the 50% of parent height - relative div) but there are ways to go around this.
For example:
Do even one more div with position relative and move it higher with half of absolute div height (this doesnt look very nice in code) - You must know the divs height, if you dont you can measure the size in sth like jQuery and move div a litle higher.
Easiest way: Maybe try 45% instead of 50% (if its not pixel to pixel design).
Propably somebody has better solutions, if so I would like to see them to :)
This should work:
div.header-search
{
overflow:auto;
display:inline;
border:0px dashed blue;
position:absolute;
top:50%;
right:0px;
}
Hie, there are several methods to vertical centering of div its done through the magic of CSS.... Here is the examples and it works fine i have tested... and it works fine.
HTML:
<div id="parent">
<div id="child">Content here</div>
</div>
CSS:
#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
Here is other methods click here to see complete reference
Hope, it will helps you. Cheers. !!
Try setting the inner div to margin: auto 0;