I have an element inside another element, and I would like that inner element to be wider than the parent by a set amount - lets say 40px. So it would look like this if the parent was 500px wide:
But if the parent is 600px wide, for example, I'd like the child to be 640px wide.
Without tying the outer element to any particular width, I'd like the inner element to always be 40px wider than the outer element. Is there a CSS only way to achieve this?
You can use calc for this.
For inner div, just provide following details
.inner {
width: calc(100% + 40px);
}
I don't know about the width increase, but you can give padding of inner div via css which may work for you.
You can give your inner div css like
.innerDiv {
/*padding-right: 20px; */
padding:20px; /*this will give to left and right side 20px padding*/
}
How to increase an width:auto DIV's width by X pixels using pure CSS
you can try this
HTML
<div id="parent">Parent Content
<div id="child">Child content</div>
</div>
CSS
#parent {
width:500px;
min-height:200px;
border:2px solid green;
color:green;
font-weight:bold;
}
#child {
width:100%;
min-height:200px;
padding:0 20px;
border:2px solid red;
color:red;
}
Fiddle Sample
Another Demo
you can use calc functionality in CSS.
div.parent {
height:150px;
width:300px;
background:#f00;
}
div.child {
height:100px;
width:calc(100% + 40px);
z-index:1;
background:#0f0;
}
<div class="parent">
<div class="child"></div>
</div>
Hope this helps
Related
Please look into the
Demo
to get a picture of issue i'm facing.
<div class="row">
<div class="outer cols-md-12">
<div class="inner1">Inner1</div>
<div class="inner2">Inner2</div>
</div>
</div>
I have two div inside a parent div . Parent div is having a height so as first inner div.
I'm giving 100% height from second inner div, but it exceeds the parent boundary.
I have given overflow hidden to fix the issue, but is it the right way or anything else i need to do ?. I'm using bootstrap 3
100% height assumes full height of the parent. In this case, inner2 will take 400px height. This is the reason that it overflows the outer div.
This can be fixed by allotting 50% height each to inner1 and inner2.
.outer {
height:400px;
width:400px;
border:solid 1px red;
}
.inner1 {
height:50%;
width:100%;
border:solid 1px green;
}
.inner2 {
height:50%;
width:100%;
border:solid 1px yellow;
background:beige;
}
Check this fiddle: http://jsfiddle.net/GM9VQ/
I had faced problem in right content center of page.
my HTML page is 2 column page left column is Fixed (height 100% and width 350px ) and right side content width is 575px so i want to right side content center in all screen for example screen width is 1600px so its take right side content center in 1250px (1600px-350px.
Thank you advanced
http://jsfiddle.net/md3Dp/5/
http://caniuse.com/#feat=calc
calc() is a native CSS way to do math. We can now set a dynamic width to the content column.
Desktop support for calc() is fairly ok. Added a fall back when calc() is not supported. Based on the max-width of 1600px of the parent added % width fall back.
html,body {
margin:0;
padding:0;
height:100%;
}
.left {
width:21.875%;/* fall back */
width:-moz-calc(350px);
width:-webkit-calc(350px);
width:calc(350px);
float:left;
background:red;
}
.main {
width:100%;
max-width:1600px;
margin:auto;
min-height:100%;
position:relative;
overflow:hidden;
}
.content {
width:78.125%;/* fall back */
width:-moz-calc(100% - 350px);
width:-webkit-calc(100% - 350px);
width:calc(100% - 350px);
float:left;
background:green;
}
You can use a relative parent.
Have a container for right content, absolutely position it and apply left equal to the fixed width of the left div, and apply right:0 to extend it to the remaining width.
Then simply make use of the old (hence having more browser support) margin:0 auto to position the content in center of right container div...
<div id='wrap'>
<div id='left'>one</div>
<div id='right'>
<div id='content'></div>
</div>
</div>
css
html, body {
height:100%;
}
#wrap {
position:relative;
height:100%;
}
#left {
display:inline-block;
width:150px; // in your case 350
height:100%;
border:1px solid;
}
#right {
position:absolute;
top:0;
left:150px; // width of left content
right:0px;
height:100%;
}
#content {
width:575px;
height:100%;
margin:0 auto;
border:1px solid;
}
JSFiddle
use jquery to calculate the width on the basis of screen resolution and then apply the width dynamically if you put the code here i can tell you the jquery code to how to apply the dynamically.
calculate the width on the basis of resolution you can get from this function in javascript:
window.innerWidth
Remove the float: left property from right_content div and add the text-align: center on the parent div i.e right one div.
example:
<div id="parent">
<div id="top">
</div>
<div id="mid">
</div>
</div>
http://jsfiddle.net/VTNxe/
i want the green div to be under the yellow one, and his height should be always that high to exactly fill the parent div.
exampke: parent-height:300 & yellow height:100 => green-height:200
or : parent-height:350 & yellow height:50 => green-height:300
this should even be if the yellows or the green height is changed dureing runtime with javascript for example.
is it possible to archieve this only with css?
thx
If you want to stick with pixels, I think this is the closest you can get with only css:
#mid{
position:absolute;
background:green;
width:100%;
top:100px;
bottom:0px;
}
http://jsfiddle.net/Pevara/VTNxe/4/
Note that I set the top property the same as the height of the #top div. This means that the height of #top has to be fixed. As you state in your question, you might want to change this height with javascript or something. Perhaps you could consider changing the top at the same time then?
http://jsfiddle.net/VTNxe/1/
Play a bit around with position:absolute;: the #top div is always fixed size at the same place. and then use a height: 100% for the #mid div.
#parent{
position:relative;
border: 1px solid red;
height: 300px;
width: 200px;
}
#top{
position:absolute;
background:yellow;
height: 100px;
width:100%;
top:0px;
bottom:0px;
z-index: 1; /* necessary, else the #mid would lay over it */
}
#mid{
background:green;
width:100%;
height: 100%;
}
The short answer to your question is yes, it is possible to do with just CSS. One way might be to make the green box with a height:100%; and do overflow:hidden; in the parent div. Then changing the height of the yellow will make it look like they vary proportionally.
I've got the following problem:
I want to have a relative container element that contains some child elements each with margin.
If i dont set the height of the container, it resizes height / width by its containing children.
Problem is that it seems to ignore the margin on them.
here some code:
css:
.container{
position:relative;
}
.child {
position:relative;
float:left;
width:200px;
height:50px;
margin-bottom:20px;
}
html:
<div class="container">
<div class="child">hello world</div>
</div>
The container should now resize height to 50+20 = 70px,
so if i put another element below it should be ok but it isn't.
Margin seems not to resize containers height, how to change this?
Not getting your question quiet well but you are probably missing to clear your floats...
Demo
.container{
position:relative;
border: 1px solid #f00;
overflow: hidden;
}
Alternatively you can also use clear: both;
Demo
Depending on the effect you are trying to achieve, either:
1) Add 'overflow:hidden' to the .container div
or
2) Use padding-bottom instead of margin-bottom on the .child div
<div class="out">
<div class="inner"></div>
</div>
In the above code, out div must be set with:
padding:0;
margin:0;
Then I want the inner div take all the place of the out with a certain margin.
This is the effect I want
In the exmaple,I position the inner div with top,bottom,left,right attributes,however it is not supported in ie6.
How to make it work cross-browser?
BTW,I do not want to use the absolute size like
height:1px
width:1px;
Is changing out's padding definitely not allowed? It would be very easy if you can: http://jsfiddle.net/rrMjj/2/
Use this css
.inner{
border: 10px solid red;
width: 250px;
height: 250px;
background-color:gray;
}
Link DEMO