I have a div inside another div and when I set margin and padding to the inner div it overlaps with parent.
How can I prevent the inner div overlapping?
Here is a fiddle of the below:
.outer {
border: 1px;
border-style: solid;
width: 250px;
height: 250px;
}
.inner {
padding: 5px;
margin: 5px;
height: 100%;
width: 100%;
border: 1px;
border-style: solid;
}
<div class="outer">
<div class="inner">inner</div>
</div>
Method 1: Try position:relative for the parent div and position:absolute for the inner div and add 5px each to the top,left,bottom and right, to push it from all sides:
.outer {
border:1px;
border-style:solid;
width:250px;
height:250px;
overflow:hidden;
position:relative;
}
.inner {
padding:5px;
left:5px;
top:5px;
bottom:5px;
right:5px;
position:absolute;
border:1px;
border-style:solid;
}
Fiddle: http://jsfiddle.net/7kcaavzt/2/
Method 2 Add display:table to the parent div and add 5px padding to it than adding margin to the inner div.
Fiddle: http://jsfiddle.net/7kcaavzt/4/
remove margin:5px; for .inner
add padding: 5px parent .outer
add box-sizing for .inner - 100% + padding 5px > 100%
.outer {
border:1px;
border-style:solid;
width:250px;
height:250px;
padding: 5px;
}
.inner {
padding:5px;
height:100%;
width:100%;
border:1px;
border-style:solid;
box-sizing: border-box;
}
<div class="outer">
<div class="inner">inner</div>
</div>
The inner div overlaps because you introduced a 5px offset via margin, yet set its height and width to 100%, which is the parent's height, 250px.
You can try setting the height and width to 100% - 2 * margin using CSS3:
.inner {
height:calc(100% - 2 * 5px);
}
jsfiddle
Related
I have a block position absolutely within its parent. The parent has a border left and right. This causes the absolutely positioned block (which also has borders) to be 2px too small.
What is the best way to go about fixing this?
Goal:
I basicly want the two blocks to align. Their borders should basicly look like 1 border. The problem is that even with border-box the child div is smaller and thus doesn't align.
html
<div class="container">
<div class="diagonal"></div>
</div>
css
* {
box-sizing: border-box;
}
body {
background-color:red;
}
.container {
width:1170px;
margin:0 auto;
margin-top:200px;
height:700px;
position:relative;
z-index:3;
background-color:white;
border-style:solid;
border-color:transparent #D2D8DE #D2D8DE #D2D8DE;
border-width:0 1px 1px 1px;
}
.diagonal {
width:100%;
height:400px;
transform:skewY(-10deg);
position:absolute;
top:-200px;
left:0;
background-color:white;
border-style:solid;
border-color:transparent #D2D8DE;
border-width:0 1px;
z-index:-1;
}
JSFiddle
I think you're looking for this:
* {
box-sizing: border-box;
}
This property tells the browser to account for any border and padding in the value you specify for width and height
EDIT :
If you want to have different borders for inner and outer div and you want them to align, then set .diagonal{ left:-1px; } where 1px is width of inner div's border.
I've changed width and color so that result would be easier to notice. NB: In this case you don't need box-sizing: border-box;
body {
background-color: red;
}
.container {
width: 1170px;
margin: 0 auto;
margin-top: 200px;
height: 700px;
position: relative;
z-index: 3;
background-color: white;
border-style: solid;
border-color: transparent black black black;
border-width: 0 3px 3px 3px;
}
.diagonal {
width: 100%;
height: 400px;
transform: skewY(-10deg);
position: absolute;
top: -200px;
left: -3px;
background-color: white;
border-style: solid;
border-color: transparent blue;
border-width: 0 3px;
z-index: -1;
}
<div class="container">
<div class="diagonal"></div>
</div>
This is blowing my mind. I have a wrapper div and 2 divs inside it, one of the divs its height is 100% but does not stretch to fit the wrapper.
Here is a JSFIDDLE
The HTML:
<div class="wrapper">
<div class="inner_left">
Just<br />Some<br />Words
</div>
<div class="inner_right">
Anything
</div>
</div>
The CSS:
.wrapper {
width:auto !important;
height:auto !important;
margin:auto;
float:left;
padding:0;
background-color:#ccc;
}
.inner_left {
background-color:#f0f0f0;
width:270px;
height:auto !important;
border:1px solid #666;
float:left;
margin:auto;
padding:10px;
text-align:center;
}
.inner_right {
background-color:#f0f0f0;
width:200px;
height:100%;
border:1px solid #666;
float:right;
margin:auto;
padding:10px;
text-align:center;
}
I need the div (inner_right) to auto fit the height of the wrapper. So whenever the wrapper's height shrinks or stretches, this div stretches to the maximum height of the wrapper.
Anyone knows why my code isn't working? Appreciate any help.
Here is a solution using display:table and display:table-cell
.wrapper {
display: table;
width: 100%; /* whatever you want */
padding: 0;
background-color: #ccc;
}
.wrapper > div {
display: table-cell;
border: 1px solid #666;
background-color: #f0f0f0;
padding: 10px;
text-align: center;
}
.inner_left {
width: 270px;
}
.inner_right {
width: 200px;
}
<div class="wrapper">
<div class="inner_left">Just
<br />Some
<br />Words</div>
<div class="inner_right">Anything</div>
</div>
#showdev is right, the parent element needs to have its height explicitly set in order for the height of the child element to work the way you want it to.
Try to set 100% height to whole document:
html,body {
height: 100%;
}
and for wrapper class:
.wrapper {
width:auto !important;
height: 100%;
margin:auto;
float:left;
padding:0;
background-color:#ccc;
}
fiddle
I have two divs inside a div. One of the two is floated to the left and it has some links in it. It has a width of 200px The second of the two has a value of overflow:hidden and it has a width of rest to the right. It has some content in it which makes its height longer than first div.
I want first div to expand to parent's or the second div's height according to the increment of the second div's height
<div id ="main">
<div id ="first">
Link
Link
Link
Link
</div>
<div id ="second">
Link
Link
Link
Link
Link
Link
Link
Link
</div>
</div>
.
#main{
overflow:hidden;
border:1px solid black;
}
#first{
border:1px solid black;
width:200px;
float:left;
}
a{
display:block;
padding:10px;
}
#second{
border:1px solid black;
overflow:hidden;
}
JSFiddle
The solution for your problem is: first you have to give a height to the parent div and then set the height of the child, #first to min-height: 100%, the code would be like this:
#main {
overflow:hidden;
border:1px solid black;
height: 400px;
}
#first {
border:1px solid black;
width:200px;
float:left;
min-height: 100%;
}
You can use display: table; applied to the #main container and display:table-row; and display:table-cell; applied to #first and #second to make the first child container take the height of its sibling container #second. Remember to add overflow:auto; to allow the first container to make it expand its height until the bottom.
CSS
#main{
overflow:hidden;
border:1px solid black;
display:table;
width:100%;
}
#first{
border:1px solid black;
width:200px;
float:left;
display:table-row;
overflow:auto;
height:100%;
}
a{
display:block;
padding:10px;
}
#second{
border:1px solid black;
overflow:hidden;
height:400px;
display:table-cell;
width:100%;
}
DEMO http://jsfiddle.net/a_incarnati/djobkh7t/7/
I've removed the floats and changed the display types on your divs to fix the problem. See example CSS + fiddle:
#main{
border: 1px solid black;
display: table;
width: 500px;
}
#first{
border: 1px solid black;
width: 25%;
display: table-cell;
}
#second{
border: 1px solid black;
width: 75%;
display: table-cell;
}
http://jsfiddle.net/djobkh7t/13/
You can set the display type of 'table' on the parent div, then 'table-cell' on the child div's.
I need your help,
How can the CSS code below be modified, such that I would be able to have a parent (container) div at 100% width while the 2 inner divs are 70% and 30% width inside the box? As it stands now, it seems that the 2nd div is pushing out of the container div?
<style type="text/css">
#containerdiv {
width:100%;
}
#outerdiv {
height:300px;
border: 1px solid blue;
position: relative;
}
#innerdiv1 {
height:300px;
float:left;
border: 1px solid red;
width: 70%;
}
#innerdiv2 {
height:300px;
border: 1px solid green;
width: 30%;
}
</style>
<div id="outerdiv">
<div id="innerdiv1">
</div>
<div id="innerdiv2">
</div>
</div>
SOLUTION :
I updated your CSS code in this FIDDLE
EXPLANATION :
The 1px border you put around the inner-divs increases the with of these divs to prevent that and include the border in the CSS width property, You can use box-sizing:border-box; with float:left on both inner divs.
You can learn more about box-sizing property here
CSS :
#containerdiv {
width:100%;
}
#outerdiv {
height:300px;
border: 1px solid blue;
position: relative;
}
#innerdiv1 {
height:300px;
float:left;
border: 1px solid red;
width: 70%;
box-sizing:border-box;
}
#innerdiv2 {
height:300px;
border: 1px solid green;
width: 30%;
box-sizing:border-box;
float:left;
}
for one your innderdiv2 needs float: left; in the code you provided, but besides that it looks like you're experiencing the pains of the box-model. Your divs are indeed 30% and 70% width of the parent container, however they each have a 1px border, which causes them each to be 2px too large. Try using box-sizing: border-box;. I generally do something like this:
*,
*:before,
*:after {
box-sizing: border-box;
}
See here:
JSFiddle
The 1px borders push the divs past 100%, because they add to the overall width.
Use -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; on your inner divs so you can add attributes such as padding and borders without contributing extra to the dimensions.
Borders increases the size of the element you give it to.
Remove the borders and it should work like you want it to.
And you dont need the double-width.
#containerdiv {
width:100%;
}
#outerdiv {
height:300px;
background-color:blue;
position: relative;
}
#innerdiv1 {
height:300px;
float:left;
background-color:red;
width: 70%;
}
#innerdiv2 {
height:300px;
background-color:green;
width: 30%;
}
JSFiddle
on your innserdiv2 you can use a margin-left attribute as well to fix this...
#innerdiv2 {
height:300px;
border: 1px solid green;
width: 30%;
box-sizing:border-box;
margin-left:70%;
}
and you dont need to have a width:100% on #containerdiv. jsut have width:100% in #outerdiv.
your #innerdiv1 looks like
#innerdiv1 {
height:300px;
float:left;
border: 2px solid red;
width: 70%;
box-sizing:border-box;
}
this takes care of your border from overflowing as well outside the div. hopefully this helps. I know you have alrdy accepted an answer.
Here is my code for css div based layout. I want a search box inside the #header div. But when I add margin or padding to the #header .search class, it will add this to height of #header div. Please help me how can I get it correctly. I want the search box at 10px margin-bottom from where #header div ends.
#container {
margin:0px auto;
width:984px;
border-left:#FFFFFF solid 1px;
border-right:#FFFFFF solid 1px;
}
#header {
height:150px;
background: url(./images/header.png) no-repeat;
border-bottom:#FFFFFF solid 1px;
}
#header .search {
margin:0px auto;
text-align:center;
width:620px;
}
You could position the search box absolutely inside the #header
#container {
margin:0px auto;
width:984px;
border-left:#FFFFFF solid 1px;
border-right:#FFFFFF solid 1px;
}
#header {
height:150px;
background: url(./images/header.png) no-repeat;
border-bottom:#FFFFFF solid 1px;
position:relative; // parent container
}
#header .search {
margin:0px auto;
text-align:center;
width:620px;
position:absolute;
left:0; bottom:10px;
}
This way your search box won't ever affect the parent containers.
Demo: http://jsfiddle.net/fparent/AyyZG/
insert a display on both tags, and add a margin-bottom. should work