Demo of problem on jsbin.com
I want the child, including it's padding and borders, to be fully contained in the parent.
I want a solution that allows me to specify the child's width as 100%, as in the demo.
Screenshot
HTML
<div class="container">
<div class="child">
some content
</div>
</div>
CSS
.container {
max-width:400px;
padding:0px;
border:1px solid green;
}
.child {
padding: 10px;
width:100%;
border:30px solid #f2f2f2;
text-align:right;
}
Use box-sizing: border-box. Include the -moz- prefix for Firefox which still requires it:
.child {
padding: 10px;
width:100%;
border:30px solid #f2f2f2;
text-align:right;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
Related
I want to make div side by side , I can achieve this but when I add som margin or padding they can disturb the lay out, I just want that two div display side by side with padding and margin property.
#center{
width:100%;
border:1px solid gray;
overflow:hidden;
display:inline-block;
}
#leftdiv{
height:200px;
width:50%;
background-color:gray;
float:left;
margin:2px;
}
#rightdiv{
height:200px;
width:50%;
background-color:yellow;
float:left;
margin:2px;
}
<div id="center">
<div id="leftdiv"></div>
<div id="rightdiv"></div>
</div>
To use padding on the <div>s you can set the box-sizing property to border-box so the padding is included in the width of the <div>. But the margin is more difficult to include in the width because it is on the outside of the box. So you have to calculate the margin on the width (see example on #leftdiv):
#center{
width:100%;
border:1px solid gray;
overflow:hidden;
display:inline-block;
}
#leftdiv{
height:200px;
width:calc(50% - 20px); /** 20px = sum of margin left and right */
background-color:gray;
float:left;
padding:10px;
margin-right:20px;
box-sizing:border-box;
}
#rightdiv{
height:200px;
width:50%;
background-color:yellow;
float:left;
padding:10px;
box-sizing:border-box;
}
<div id="center">
<div id="leftdiv"></div>
<div id="rightdiv"></div>
</div>
border-box: The width and height properties include the content, the padding and border, but not the margin.
content-box: This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin.
source: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#Values
You can see the box model on the Chrome Developer Tools:
There you can see the margin surrounding the border. The width and height is calculated until the border and doesn't include the margin.
just add
#rightdiv,#leftdiv{
box-sizing:border-box;
}
You are going to have to change their display type from block
and css is:
#center{
width:100%;
border:1px solid gray;
overflow:hidden;
display:inline-block;
}
#leftdiv{
height:200px;
width:50%;
background-color:gray;
float:left;
margin:2px;
display: inline-block;
}
#rightdiv{
height:200px;
width:50%;
background-color:yellow;
float:left;
display: inline-block;
margin:2px;
}
This should allow them to respond and align side by side.
margin will apply (space) to the outside of the boxmodel.
padding will apply (space) to the inside of the boxmodel - use in conjuction with box-sizing: border-box; to negate additional padding affecting the inherit height and width of the element.
Where alignment is concerned, in this case, you have a few options to explore:
#center {
width: 100%;
border: 1px solid gray;
overflow: hidden;
}
.inline-div {
height: 200px;
width: 48%;
display: inline-block;
margin: 2px;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.flex-wrapper {
display: flex;
justify-content: space-between;
}
.flex-wrapper .inline-div {
flex: 1;
}
#leftdiv {
background-color: gray;
}
#rightdiv {
background-color: yellow;
}
<h1>Inline</h1>
<div id="center">
<div id="leftdiv" class="inline-div"></div>
<div id="rightdiv" class="inline-div"></div>
</div>
<h1>Float</h1>
<div id="center">
<div id="leftdiv" class="inline-div float-left"></div>
<div id="rightdiv" class="inline-div float-right"></div>
</div>
<h1>Flex</h1>
<div id="center" class="flex-wrapper">
<div id="leftdiv" class="inline-div"></div>
<div id="rightdiv" class="inline-div"></div>
</div>
Let's first examine #center's css. You are set width to 100% and 1px for border(1px on the left and 1px on the right) which mean that actual width will be 100% + 2px, which might be not exactly what you want. To solve this you can use either box-sizing:border-box; or width:calc(100% - 2px). Also you might not need "overflow:hidden" and "display:inline-block"
Box-sizing is really useful property. You can read more here: https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
#center { #center {
width:100%; width:calc(100% - 2px);
box-sizing:border-box; or border:1px solid gray;
border:1px solid gray; }
}
Then in order to have 2 children side by side you can use either flex layout or float layout as you did, but again you have assume that "width:50%" is actually without the margin so real width will be 50% + 4px (2px left + 2px right) margin. In order to solve this you can use again calc();
#leftdiv { #rightdiv {
height:200px; height:200px;
width:calc(50% - 4px); width:calc(50% - 4px);
background-color:gray; background-color:gray;
float:left; float:right;
margin:2px; margin:2px;
}
Also have in mind that because the children elements are floated, the parent element will have a height of 0. In order to make parent element to wrap its children you must either set some height of #center element (in your case 204px, 200px for children and 4px for its margin) or to use the following css which does the trick. The css will add empty block element right after both children(because it has propeerty "clear") and because it is block element, the parent will extend.
#center:after {
content:"";
display:block;
clear:both;
}
First of all you have to divide this within 100% width with margin as i have done!
#center{
width:100%;
border:1px solid gray;
overflow:hidden;
display:inline-block;
}
#leftdiv{
height:200px;
width:48.5%;
background-color:gray;
float:left;
margin:1%;
margin-right:0px;
}
#rightdiv{
height:200px;
width:48.5%;
background-color:yellow;
float:left;
margin:1%;
}
<div id="center">
<div id="leftdiv"></div>
<div id="rightdiv"></div>
</div>
My html is :
<div id="outer">
<header><h1>The Header</h1></header>
<div id="contenttab">
<table>
blablabla
</table>
</div>
</div>
My CSS :
#outer{
height:70%;
width:900px;
left:50%;
margin:0 auto;
position:absolute;
top:20px;
z-index:1001;
transform:translate(-50%, 0);
-webkit-transform:translate(-50%, 0);
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
header{
background-color:#f6f7f9;
padding:10px;
font-size:15px !important;
font-weight:bold !important;
text-align:center;
width:100%;
}
#contenttab{
height:100%;
overflow-y:auto;
}
why my contenttab exceeded the height of #outer div ? how to fix that? I have try adding border-box css to parent div but not solve my problem . . .
I just tried out your posted html/css and your #contenttab div is exceeding the height of it's container because of your css rule of height: 100% on the #contenttab;
It's a lot easier to see/debug the issue using borders on your elements, add the following:
#outer {
border: 1px solid #000;
}
#contenttab {
height: 100%;
overflow-y: auto;
border: 1px solid #ffa500;
}
You are telling the #contenttab to have 100% full height of it's container, however then you are also adding additional content(the header element) which causes the internal elements to have more than 100% height than it's container can hold.
Either change the height rule on the #contenttab to auto or less than 100%. Or add css rule overflow: hidden(or auto) to your #outer css rule.
Even though I used float, my two div classes do not want to align side-by-side. How to do it?
Basically the entire width is 520px and each box is 250px in width with a margin between the boxes of 20px.
<div id="car-box">
<div class="well-car">
<div class="add_box">
<h1 class="add_heading">car model</h1>
</div>
</div>
<div class="car-brand">
<a class="button" href="www.placehold.it">car brand</a>
</div>
</div>
And CSS:
.car-box {
width:520px;
height:500px;
border:5px dashed blue;
margin-right:10px;
float:left
}
.well-car {
width:250px;
height:250px;
border:10px solid red;
}
.car-brand {
width: 250px;
height:250px;
border:10px dashed blue;
font-size: 20px;
float:left
}
Here Fiddle...Fiddle
Your border width gets added to the content widths. 250+2*10 + 250+2*10 == 540.
(You can read here https://developer.mozilla.org/en/docs/Web/CSS/box-sizing how do browsers calculate block elements' sizes)
For your custom styles it's usually best to set box-sizing: border-box(http://www.paulirish.com/2012/box-sizing-border-box-ftw/)
Edit: and yes, also float:left on the .well-car class, as others pointed out.
You need to float .well-car as well:
http://jsfiddle.net/b3kd9mwf/26/
You just need to add float: left; to your div with the class "well-car".
.well-car {
width:250px;
height:250px;
border:10px solid red;
float: left;
}
You are not floating your elements correctly. Class wellcar should be floated to the left and class car-brand should be floated to the right. The following code should work.
#car-box {
width:520px;
height:500px;
border:5px dashed blue;
margin-right:10px;
}
.well-car {
width:250px;
height:250px;
border:10px solid red;
float: left;
}
.car-brand {
width: 250px;
height:250px;
border:10px dashed blue;
font-size: 20px;
float:right;
}
I understand that in css if you use the ">" then the tag has to be a direct child, however if you use just a space then it will be a sibling selector and as long as the tag is within the other tag the css will be applied. So why is it in the below code, the text in my sidebar is not centering unless I make the sidebar-header div a direct child of the sidebar div?
Relevant CSS:
.sidebar {
float:right;
width:24%;
margin-right:1%;
margin-top:20px;
background-color: #e5e5e5;
min-height:400px;
border-radius: 6px;
box-shadow: 4px 4px 10px #999
}
.content-padding {
float:left;
padding:10px;
}
.sidebar .sidebar-header {
text-align:center
}
Relevant HTML:
<div class="sidebar">
<div class="content-padding">
<div class="sidebar-header">Favorites</div>
</div>
</div>
The reason it is isn't working when it is a child of content-padding is because the element is being floated. When a floated element has a width of auto, it has a 'shrink-to-fit' width. Thus, the child element technically is being centered, you just can't tell. If you want it to work as expected, either don't float the element, or give it a width of 100%.
Example Here
.content-padding {
float:left;
padding:10px;
width: 100%;
}
Remove float:left; to .content-padding
JSFiddle - DEMO
CSS:
.sidebar {
float:right;
width:24%;
margin-right:1%;
margin-top:20px;
background-color: #e5e5e5;
min-height:400px;
border-radius: 6px;
box-shadow: 4px 4px 10px #999
}
.content-padding {
padding:10px;
}
.sidebar .sidebar-header {
text-align:center
}
I'm using box-sizing property to align left div, right div and center div within container div. The div's are not aligning. Below is the code i have tried. I also tried using px. I am using Firefox to check.
I have also added in jsfiddle, http://jsfiddle.net/F9ds9/
<!DOCTYPE html>
<html>
<head>
<style>
.container{
width:100%;
}
#left{
-moz-box-sizing: border-box;
margin-top:12px;
float:left;
border:1px solid #000000;
width:20%;
}
#right{
-moz-box-sizing: border-box;
margin-top:12px;
float:left;
border:1px solid #000000;
width:20%;
}
#center{
-moz-box-sizing: border-box;
margin:12px;
float:left;
border:1px solid #000000;
width:60%;
}
</style>
</head>
<body>
<div class="container">
<div id="left">LEFT</div>
<div id="center">CENTER</div>
<div id="right">RIGHT</div>
</div>
</body>
</html>
border-box is not margin-box (which by the way does not exists :) so just remove margin:12px; or deal with it:)
In this demo I just modified margin:12px; for the center element to margin-top:12px; (just like the other elements). If you need the margin that you need to do some math regarding your element's widths!
_____ _____________ _____
20% 12px 60% 12px 20%
even using border-box ends up to a sum of 100%+24px
.container{
width:100%;
}
#left{
-moz-box-sizing: border-box;
margin-top:12px;
float:left;
border:1px solid #000000;
width:20%;
}
#right{
-moz-box-sizing: border-box;
margin-top:12px;
float:left;
border:1px solid #000000;
width:20%;
}
#center {
-moz-box-sizing: border-box;
border: 1px solid #000000;
float: left;
margin-top: 12px;
width: 50%;
}
The box-sizing:border-box or whatever box sizing you are using the box model is
width + padding + border = actual visible/rendered width of an element's box,
height + padding + border = actual visible/rendered height of an element's box.
See this demo https://css-tricks.com/box-sizing/#demo
adding excess margin to child will make this property useless
Please Check the fiddle
<body>
<div class="container">
<div id="left">LEFT</div>
<div id="center">CENTER</div>
<div id="right">RIGHT</div>
</div>
</body>
There are some things which you should know
Total:100% for the container
Left and right :20%
Center :60%
so total 100% will come inside the container
and on top of that you have given border
so it will add extra 6px for the three container making it exceed more than the 100% width of container so the right section will jump down.
And for center container you have not given margin top
Please refer CSS box modelling you will understand.
and use firbug in firefox for debugging it will be easier.