I'm having some troubles with the 'float' in css.
I have a wrapper div with a width of 960px.I want to add 5 child-div in it with the width of 960 / 5 = 192px. And this is what I've got:
https://i.stack.imgur.com/R6bsw.png
This is my lines of code. Can anyone tell me what's wrong with them?
HTML
#overall-info h1 {
text-align: center;
padding: 1em;
}
.box {
width: 192px;
height: 192px;
border: 1px solid green;
background-color: aquamarine;
float: left;
}
<section id="overall-info">
<div class="container">
<h1>Info</h1>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</section>
For each sub-boxes you have 1px of border which successively adds up to the total width.
So the container should have a width of (192+1+1)*5 = 970 and not 960 if you want all your sub-boxes to be contained on one line. You can also suppress the border or use a sub-box width of 190 (190+1+1=192)
Furthermore keeping 1px of free width space for the container can also help
About box-sizing:border-box:
The width and height properties (and min/max properties) includes content, padding and border, but not the margin.
For Fix it:
So, you must use box-sizing:border-box; because width of .box(192px) includes .box border width (1px for border-left and 1px for border-right).
if you don't add box-sizing:border-box,it will be added 2px(1px for border-left and 1px for border-right) to each .box,in the other words width .box gets width (192px + 2px = 194px).
* {
box-sizing:border-box;
}
* {
box-sizing: border-box;
}
.container {
width: 960px;
}
#overall-info h1 {
text-align: center;
padding: 1em;
}
.box {
width: 192px;
height: 192px;
border: 1px solid green;
background-color: aquamarine;
float: left;
}
<section id="overall-info">
<div class="container">
<h1>Info</h1>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</section>
Your 1px borders are adding-up to the width space of your boxes.
set in your css:
* {box-sizing: border-box; }
you can also use percentages widths btw to welcome yourself into the responsive era ;)
.box {
float: left;
box-sizing: border-box;
background: aquamarine;
border: 1px solid green;
width: 20%;
height: 100px;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
in which box-sizing set to border-box is used to account borders, paddings and width into the inner box model width of the targeted element.
If you plan to support IE7 (which is not needed today) than you'll have to manually subtract the border-width from the element width.
Related
This question already has answers here:
Flex items not respecting margins and box-sizing: border-box
(2 answers)
Display a div width 100% with margins
(6 answers)
Closed 1 year ago.
<style>
.parent {
width: 300px;
height: 300px;
border: 1px solid red;
padding: 20px;
}
.child {
box-sizing: border-box;
margin: 20px;
width: 100%;
height: 100%;
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="app">
<div class="parent">
<div class="child"></div>
</div>
</div>
</body>
I have a child div nested inside parent div which has a padding attribute. Child div has a margin attribute as well. I expected child div to be in the center like the image below.
however, when I run code, child div is skewed to the right bottom.
I set box-sizing attribute to border-box to calculate margin: 20px into the final width and height yet the result is the same. my question is 1)how do I center child div with margin applied 2)why border-box does not have any effects on child div?
Just remove margin and it will work. You have an explanation here in the answer: Flex items not respecting margins and box-sizing: border-box.
Keep in mind that box-sizing: border-box brings padding and borders into the width / height calculation, but not margins. Margins are always calculated separately.
.parent {
width: 300px;
height: 300px;
border: 1px solid red;
padding: 20px;
}
.child {
box-sizing: border-box;
width: 100%;
height: 100%;
border: 1px solid blue;
}
<body>
<div id="app">
<div class="parent">
<div class="child"></div>
</div>
</div>
</body>
If you want to make it center you should remove margin from child div as the margin is outside of child div and is pushing the child div to the left
This should work
<body>
<style>
.parent {
width: 300px;
height: 300px;
border: 1px solid red;
padding: 20px;
}
.child {
box-sizing: border-box;
width: 100%;
height: 100%;
border: 1px solid blue;
}
</style>
<div id="app">
<div class="parent">
<div class="child"></div>
</div>
</div>
</body>
You can also do this on parent div to center almost anything
/* display: flex;
align-items: center;
justify-content: center; */
Example: http://jsfiddle.net/5VCfm/2/embedded/result/
.container {
position: absolute;
border: 1px solid red;
max-width: 90%;
margin-bottom: 20px
}
.container + .container {
top: 260px;
}
.content-container {
border: 1px solid green;
max-height: 200px;
overflow: auto;
padding: 15px;
}
.content-wrap {
border: 1px solid navy;
}
.content {
border: 1px solid red;
padding: 10px;
}
html
<div class="container">
<div class="content-container">
<div class="content-wrap">
<div class="content">
<h2>No width</h2>
large content see http://jsfiddle.net/5VCfm/2/embedded/result/
</div>
</div>
</div>
</div>
<div class="container">
<div class="content-container">
<div class="content-wrap">
<div class="content" style="width:300px">
<h2>Width 300px</h2>
large content see http://jsfiddle.net/5VCfm/2/embedded/result/
</div>
</div>
</div>
</div>
If width of element inside container is specified, he takes off the edge of the parent creating a horizontal scrolling. What is most characteristic behaves in Mozilla and Chrome. But Opera and IE show all right.
How to solve the problem? Is a bug?
The parent container has a max-width:90%, means it will become smaller as much as it can but it will never surpass 90% of the viewport width.
When this 90% is smaller than 300px (child), the horizontal scroll bar is being created, this process is completely normal, you just have to realize that the child has a fixed width, it will not get smaller.
Use max-width:300px; on the .content, this will allow it to have a 300px width IF IT CAN, but when the parent (90%) is less, it will become tighter.
DEMO
I want box width and height to include all of the content, padding, border width, and margin by default. Is there a way to do this? Especially, I want to be able to specify something like width: 100% including everything up to the margin.
This is a vague question, but I'll answer the best I can.
Margin, by definition, is the area around the outside of your box; meaning there's no way to include margins inside of your div.
If you would like more padding on the inside of your box, but you don't want the box to resize, then use: box-sizing:content-box;
Or if you would like to include padding and the border, use: box-sizing:border-box;
A workable solution that preserves the size of your divs and removes overflow would look something like this:
#parent{
box-sizing:border-box;
width:100%;
height:200px;
padding:2em;
}
#child{
box-sizing:border-box;
width:100%;
height:100%;
padding:1em;
}
<div id="parent">
<div id="child"></div>
</div>
Just place the div you want to give margins to inside of another div that has padding. Thus creating faux margins.
if your margin is for example 10px you can use
width: calc(100% - 20px);
box-sizing: border-box;
browser support
w3schools.com reference
Set the CSS box-sizing property to border-box to make width and height include the content, border, and padding. This allows you to set width: 100% and still add padding or border. In other words box-sizing: border-box makes width include everything between the inner edges of the margin. There is no way to include the margin itself in such a way.
.example { box-sizing: border-box; width: 100%; padding: 10px }
Useful references
CSS Box Model visualization
CSS3 UI: box-sizing property
* { box-sizing: border-box } FTW
Maybe wrap another div around it and specified that div's width?
<div style="width: 100px; border: 1px solid blue;">
<div style="width: 100px; background:yellow; margin: 10px; border: 1px solid blue">
inner width 100px not including it's margin.
</div>
</div>
<div style="width: 100px; border: 1px solid blue">
<div style="background:yellow; margin: 10px; border: 1px solid blue">
inner width's 100px including it's margin.
</div>
</div>
Use display: flex; for the parent tag.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
border: 1px solid black;
width: 100%;
overflow: auto;
box-sizing: border-box;
display: flex; /* it can put children in one line */
}
.left {
border: 1px solid black;
width: 20%;
float: left;
box-sizing: border-box
}
.right {
border: 1px solid black;
width: 80%;
margin: 0 10px;
float: left;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="center">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
I'm intentionally pushing my link text below their containing <div class="box">
The problem is that the wrapper doesn't include the link text. How do I get it to encompass said text?
Here's the fiddle.
<div id="wrapper">
<div class="box lowest">Home</div>
<div class="box medium">About</div>
<div class="box">Products</div>
<div class="box medium">Services</div>
<div class="box lowest">Contact</div>
</div>
#wrapper{
width: 600px;
margin: 0 auto;
text-align: center;
border: solid 1px green;
position:relative;
white-space: nowrap;
letter-spacing: 15px;
}
.box a{
padding-top: 105px;
display: block;
}
.box{
width:75px;
height: 100px;
background-color:red;
border: solid 1px black;
display: inline-block;
vertical-align: top;
letter-spacing: normal;
}
.lowest{
margin-top:50px;
}
.medium{
margin-top:25px;
}
Screenshot
To #wrapper, add:
padding-bottom: 30px;
The problem here is that you've already set a specfic height to your .box div and pushing your anchor tag by a padding of 105px. This increases the size of your div, height is set fixed at 100px, the wrapper still thinks your div is 100px high.
Either set the appropirate height to the box div (height of the div with the red bg plus the padding and the height of the anchor tag) or use simply use min-height instead of height.
I have two divs like this
<div style="border:1px solid #000; float:left">Div 1</div>
<div style="border:1px solid red; float:left">Div 2</div>
I want them to display on the same row, so I used float:left.
I want both of them to be at center of the page as well, so I tried to wrap them with another div like this
<div style="width:100%; margin:0px auto;">
<div style="border:1px solid #000; float:left">Div 1</div>
<div style="border:1px solid red; float:left">Div 2</div>
</div>
But it doesn't work. If I change the code to this
<div style="width:100%; margin-left:50%; margin-right:50%">
<div style="border:1px solid #000; float:left">Div 1</div>
<div style="border:1px solid red; float:left">Div 2</div>
</div>
then it's going to the center, but the horizontal scrollbar is there and it seems like it's not really centered as well.
Can you please kindly suggest to me how can I achieve this? Thanks.
Edit: I want the inner div (Div 1 and Div 2) to be center align as well.
You could do this
<div style="text-align:center;">
<div style="border:1px solid #000; display:inline-block;">Div 1</div>
<div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>
http://jsfiddle.net/jasongennaro/MZrym/
wrap it in a div with text-align:center;
give the innder divs a display:inline-block; instead of a float
Best also to put that css in a stylesheet.
Could this do for you? Check my JSFiddle
And the code:
HTML
<div class="container">
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
</div>
CSS
div.container {
background-color: #FF0000;
margin: auto;
width: 304px;
}
div.div1 {
border: 1px solid #000;
float: left;
width: 150px;
}
div.div2 {
border: 1px solid red;
float: left;
width: 150px;
}
both floated divs need to have a width!
set 50% of width to both and it works.
BTW, the outer div, with its margin: 0 auto will only center itself not the ones inside.
Align to the center, using display: inline-block and text-align: center.
.outerdiv
{
height:100px;
width:500px;
background: red;
margin: 0 auto;
text-align: center;
}
.innerdiv
{
height:40px;
width: 100px;
margin: 2px;
box-sizing: border-box;
background: green;
display: inline-block;
}
<div class="outerdiv">
<div class="innerdiv"></div>
<div class="innerdiv"></div>
</div>
Align to the center using display: flex and justify-content: center
.outerdiv
{
height:100px;
width:500px;
background: red;
display: flex;
flex-direction: row;
justify-content: center;
}
.innerdiv
{
height:40px;
width: 100px;
margin: 2px;
box-sizing: border-box;
background: green;
}
<div class="outerdiv">
<div class="innerdiv"></div>
<div class="innerdiv"></div>
</div>
Align to the center vertically and horizontally using display: flex, justify-content: center and align-items:center.
.outerdiv
{
height:100px;
width:500px;
background: red;
display: flex;
flex-direction: row;
justify-content: center;
align-items:center;
}
.innerdiv
{
height:40px;
width: 100px;
margin: 2px;
box-sizing: border-box;
background: green;
}
<div class="outerdiv">
<div class="innerdiv"></div>
<div class="innerdiv"></div>
</div>
I would vote against display: inline-block since its not supported across browsers, IE < 8 specifically.
.wrapper {
width:500px; /* Adjust to a total width of both .left and .right */
margin: 0 auto;
}
.left {
float: left;
width: 49%; /* Not 50% because of 1px border. */
border: 1px solid #000;
}
.right {
float: right;
width: 49%; /* Not 50% because of 1px border. */
border: 1px solid #F00;
}
<div class="wrapper">
<div class="left">Div 1</div>
<div class="right">Div 2</div>
</div>
EDIT: If no spacing between the cells is desired just change both .left and .right to use float: left;
Better way till now:
If you give display:inline-block; to inner divs then child elements of inner divs will also get this property and disturb alignment of inner divs.
Better way is to use two different classes for inner divs with width, margin and float.
Best way till now:
Use flexbox.
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Please take a look on flex it will help you make things right,
on the main div set css display :flex
the div's that inside set css: flex:1 1 auto;
attached jsfiddle link as example enjoy :)
https://jsfiddle.net/hodca/v1uLsxbg/