This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 3 years ago.
I need to use the calc function for width but it doesn't divide distance around.
HTML
<div class="container-card">
<div class="container-holder"></div>
</div>
SCSS
.container-card {
background-color: grey;
height: 500px;
.container-holder {
background-color: gold;
width: calc(100% - 14px);
height: 300px;
}
}
Here is an example:
https://jsfiddle.net/fze3L0w8/
In other words: I need 14px distance from left and right in every width.
You can use margin:auto; for adding space from both side. And you need to set it 100% - 28px
.container-card {
background-color: grey;
height: 500px;
}
.container-holder {
background-color: gold;
width: calc(100% - 28px);
height: 300px;
margin: auto;
}
<div class="container-card">
<div class="container-holder">
</div>
</div>
Just set a margin of 14px, and you will no longer need to set the width property:
.container-card {
background-color: grey;
height: 500px;
.container-holder {
background-color: gold;
margin: 14px;
height: 300px;
}
}
Here's an updated fiddle.
this is the solution:
background-color: gold;
width: calc(100% - 28px);
height: 300px;
margin: auto;
you need margin from left o rright also
you either set it 100% - 28px to reduce width by 14px right and left and set margin: auto; to center the div
.container-card {
background-color: grey;
height: 500px;
.container-holder {
background-color: gold;
width: calc(100% - 28px);
margin: auto;
height: 300px;
}
}
or only set margin:0px 14px; and no need to set width it will take parent width - margin
.container-card {
background-color: grey;
height: 500px;
.container-holder {
background-color: gold;
margin: 0px 14px;
height: 300px;
}
}
More elegant solution is that -
.container-card {
background-color: grey;
height: 500px;
.container-holder {
background-color: gold;
width: calc(100% - 28px);
height: 300px;
margin: 0 auto;
}
}
Calc function will get 28px and to center an element inside another one. use margin: 0 auto;
Just center the container instead of this hard coded brittle approach with something like flex, then you can use whatever margin you want without it breaking.
.container-card {
display: flex;
justify-content: center;
background-color: grey;
height: 500px;
}
.container-holder {
background-color: gold;
margin: 0 14px;
width: 100%;
height: 300px;
}
<div class="container-card">
<div class="container-holder">
</div>
</div>
More elegant solution could be this
`
.container-card {
background-color: grey;
height: 500px;
.container-holder {
background-color: gold;
margin-left: 14px;
margin-right:14px;
height: 300px;
}
}
`
Related
I want to display an expandable div (width: 100%) with margins...
#page {
background: red;
float: left;
width: 100%;
height: 300px;
}
#margin {
background: green;
float: left;
width: 100%;
height: 300px;
margin: 10px;
}
<div id="page">
<div id="margin">
"some content here"
</div>
</div>
You can use calc() css function (browser support).
#page {
background: red;
float: left;
width: 100%;
height: 300px;
}
#margin {
background: green;
float: left;
width: calc(100% - 10px);
height: 300px;
margin: 10px;
}
Alternatively, try using padding instead of margin and box-sizing: border-box (browser support):
#page {
background: red;
width: 100%;
height: 300px;
padding: 10px;
}
#margin {
box-sizing: border-box;
background: green;
width: 100%;
height: 300px;
}
Sometimes it's better to do the opposite and give the parent div padding instead:
LIVE DEMO
What I did was change the CSS of #page to:
#page {
padding: 3%;
width: 94%; /* 94% + 3% +3% = 100% */
/* keep the rest of your css */
/* ... */
}
Then delete the margin from #margin
Note: this also adds 3% to the top and bottom (so 6% to the height) which makes it a little taller than 300px - so if you need exactly 300px, you could do something like padding:10px 3%; and change the height:280px; to add up to 300px again.
You can use the following CSS to achieve the desired result:
#page {
background: red;
overflow: auto;
}
#margin {
background: green;
height: 280px;
margin: 10px
}
The correct way to achieve this by standard is:
#margin {
background: green;
height: 280px;
margin: 10px;
width: auto;
display: block;
}
For LESS users only:
Using the nice solution of Vukašin Manojlović doesn't work out of the box because LESS executes + or - operations during the LESS compilation.
One solution is to escape LESS so that it doesn't execute the operation.
Disable LESS-CSS Overwriting calc()
#someMarginVariable = 15px;
margin: #someMarginVariable;
width: calc(~"100% - "#someMarginVariable*2);
width: -moz-calc(~"100% - "#someMarginVariable*2);
width: -webkit-calc(~"100% - "#someMarginVariable*2);
width: -o-calc(~"100% - "#someMarginVariable*2);
or can use a mixin like:
.fullWidthMinusMarginPaddingMixin(#marginSize,#paddingSize) {
#minusValue: (#marginSize+#paddingSize)*2;
padding: #paddingSize;
margin: #marginSize;
width: calc(~"100% - "#minusValue);
width: -moz-calc(~"100% - "#minusValue);
width: -webkit-calc(~"100% - "#minusValue);
width: -o-calc(~"100% - "#minusValue);
}
If possible, try to use padding with box-sizing instead, on #page element
#page {
padding: 10px;
box-sizing: border-box;
background: red;
float: left;
width: 100%;
height: 300px;
}
#margin {
background: green;
float: left;
width: 100%;
height: 100%;
}
html
<div id="container">
<div id="one">One</div>
<div id="two">Two</div>
</div>
css
#container {
width: 500px;
height: 500px;
background-color: red;
}
#one {
width: 340px;
height: 100px;
margin: 20px;
background-color: green;
float: left;
}
#two {
width: 100px;
height: 100px;
margin: 20px 20px 20px 0px;
background-color: blue;
float: right;
}
This is what i want to do: http://jsfiddle.net/p4ZAd/
I want to make a margin of 20px between the two divs and this is how far Iv'e gotten, but is it possible to do it any other way?
What i would idealy like is to remove the width on the "#one" completely and just have it be maximum size with a margin towards the "#two".
LIke this
working fiddle
css
*{
margin:0;
padding:0;
}
#container {
width: 500px;
height: 500px;
background-color: red;
display:table;
}
#one {
background-color: green;
display:table-cell;
}
#two {
background-color: blue;
display:table-cell;
}
You can use table and table-cell display types to mimic how a table works. Then use border-spacing to accomplish the margin in-between cells.
HTML:
<div id="container">
<div id="one">One</div>
<div id="two">Two</div>
</div>
CSS:
#container {
display: table;
width: 500px;
height: 400px;
background-color: red;
border-spacing: 20px;
}
#one {
display: table-cell;
background-color: green;
}
#two {
display: table-cell;
width: 100px;
background-color: blue;
}
JSFiddle here
Here's a list of browsers that support display: table;
You can set padding on #container and then set negative right margin for #two. Example:
#container {
width: 360px;
height: 500px;
background-color: red;
padding: 20px 140px 20px 20px;
}
#one {
height: 100px;
background-color: green;
float: left;
width: 100%;
}
#two {
width: 100px;
height: 100px;
margin: 0 -120px 0 0;
background-color: blue;
float: right;
}
Working sample: http://jsfiddle.net/SytvY/1/
I have a container with a defined height containing two divs, the first which has a pixel-defined height and the second which I would like to fill the remaining space of its container, i.e. 100% minus first div's pixel-defined height.
Is there a solution to this problem which doesn't involve JavaScript? I can use a JavaScript solution (and in fact JavaScript changing the container's height is what brought me here), but this seems like it should have lower-level support, and this looks like it might become quite a cascading problem.
Example
http://jsfiddle.net/h3gsz/1/
HTML
<div id="container">
<div id="top_content"></div>
<div id="remaining_content"></div>
</div>
CSS
#container {
width: 400px;
height: 400px;
border: 5px solid black;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
#remaining_content {
background-color: red;
width: 100%;
height: 100%;
}
Edit
An answer was already provided for the original fiddle, but in simplifying the question I allowed the answer to introduce new problems: http://jsfiddle.net/h3gsz/6/
I had removed the inline-block styling and a max-width value. Given the absolute positioning of the remaining content, the container's width is no longer defined by said content (from inline-block), so a horizontal scrollbar is introduced where there shouldn't be one.
I'm not sure if I should simply make a new question or not.
#container {
width: 400px;
height: 400px;
border: 5px solid black;
position: relative;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
#remaining_content {
background-color: red;
width: 100%;
top: 50px;
bottom: 0;
position: absolute;
}
http://jsfiddle.net/h3gsz/4/
How about using overflow:hidden;?
#container {
width: 400px;
height: 400px;
border: 5px solid black;
overflow:hidden;
}
JSFiddle.
Why not just use auto?
http://jsfiddle.net/h3gsz/3/
CSS:
#container {
width: 400px;
height: auto;
border: 5px solid black;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
#remaining_content {
background-color: red;
width: 100%;
height: auto;
}
you could also do it by using display:table; fiddle here
.main, .sidebar {
float: none;
padding: 20px;
vertical-align: top;
}
.container {
display: table;
}
.main {
width: 400px;
background-color: LightSlateGrey;
display: table-cell;
}
.sidebar {
width: 200px;
display: table-cell;
background-color: Tomato;
}
Someone more experienced might have a better option but you can try this :
#container {
width: 400px;
height: 400px;
border: 5px solid black;
overflow: hidden ;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
#remaining_content {
background-color: red;
width: 100%;
height: 100%;
margin-bottom: 0;
}
Depending on what you want to use this for you could remove the #remaining_content <div>
HTML:
<div id="container">
<div id="top_content"></div>
</div>
CSS:
#container {
background-color: green;
width: 400px;
height: relative;
min-height:400px;
border: 5px solid black;
overflow:none;
word-wrap:break-word;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
Let's say I have a container with with the following specs:
.container {
width: 960px;
margin: 0 auto;
height: 500px;
}
Now in the middle I would like to add the 3 boxes aligned next to each other horizontally with the following specs:
.box1 {
background-color: #000;
width: 300px;
height: 200px;
}
.box2 {
background-color: #999;
width: 300px;
height: 200px;
}
.box3 {
background-color: #333;
width: 300px;
height: 200px;
}
I tried using margin-top and margin-left on each but that was messy and it was a hassle getting them to look equally aligned with enough gutter between them. What's the best way to create this?
You have to put "float:left;" on each class.
.container {
float:left;
width: 960px;
margin: 0 auto;
height: 500px;
}
.box1 {
float:left;
background-color: #000;
width: 300px;
height: 200px;
}
.box2 {
float:left;
background-color: #999;
width: 300px;
height: 200px;
}
.box3 {
float:left;
background-color: #333;
width: 300px;
height: 200px;
}
.container { width: 960px; margin: 0 auto; height: 500px; }
.container [class*='box'] { width:300px; height:200px; float: left; margin-right: 30px; }
.container .box1 { background-color: #000; }
.container .box2 { background-color: #999; }
.container .box3 { background-color: #333; margin-right: 0; }
http://jsfiddle.net/DRYBH/#fork
you can also try this minimum code
For each of the .boxX items, add display: inline - this will fix the problem for you.
Use the CSS property :
display: inline-block
in all .box classes
you can use this simple code to put three tables side by side
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
box-sizing: content-box;
width: 300px;
height: 100px;
padding: 30px;
border: 10px solid blue;
}
}
</style>
</head>
<body>
<table><tr><td>
<div id="example1"></div></td>
<td><div id="example1"></div> </td>
<td><div id="example1"></div> </td>
</tr></table>
</body>
</html>
I want to display an expandable div (width: 100%) with margins...
#page {
background: red;
float: left;
width: 100%;
height: 300px;
}
#margin {
background: green;
float: left;
width: 100%;
height: 300px;
margin: 10px;
}
<div id="page">
<div id="margin">
"some content here"
</div>
</div>
You can use calc() css function (browser support).
#page {
background: red;
float: left;
width: 100%;
height: 300px;
}
#margin {
background: green;
float: left;
width: calc(100% - 10px);
height: 300px;
margin: 10px;
}
Alternatively, try using padding instead of margin and box-sizing: border-box (browser support):
#page {
background: red;
width: 100%;
height: 300px;
padding: 10px;
}
#margin {
box-sizing: border-box;
background: green;
width: 100%;
height: 300px;
}
Sometimes it's better to do the opposite and give the parent div padding instead:
LIVE DEMO
What I did was change the CSS of #page to:
#page {
padding: 3%;
width: 94%; /* 94% + 3% +3% = 100% */
/* keep the rest of your css */
/* ... */
}
Then delete the margin from #margin
Note: this also adds 3% to the top and bottom (so 6% to the height) which makes it a little taller than 300px - so if you need exactly 300px, you could do something like padding:10px 3%; and change the height:280px; to add up to 300px again.
You can use the following CSS to achieve the desired result:
#page {
background: red;
overflow: auto;
}
#margin {
background: green;
height: 280px;
margin: 10px
}
The correct way to achieve this by standard is:
#margin {
background: green;
height: 280px;
margin: 10px;
width: auto;
display: block;
}
For LESS users only:
Using the nice solution of Vukašin Manojlović doesn't work out of the box because LESS executes + or - operations during the LESS compilation.
One solution is to escape LESS so that it doesn't execute the operation.
Disable LESS-CSS Overwriting calc()
#someMarginVariable = 15px;
margin: #someMarginVariable;
width: calc(~"100% - "#someMarginVariable*2);
width: -moz-calc(~"100% - "#someMarginVariable*2);
width: -webkit-calc(~"100% - "#someMarginVariable*2);
width: -o-calc(~"100% - "#someMarginVariable*2);
or can use a mixin like:
.fullWidthMinusMarginPaddingMixin(#marginSize,#paddingSize) {
#minusValue: (#marginSize+#paddingSize)*2;
padding: #paddingSize;
margin: #marginSize;
width: calc(~"100% - "#minusValue);
width: -moz-calc(~"100% - "#minusValue);
width: -webkit-calc(~"100% - "#minusValue);
width: -o-calc(~"100% - "#minusValue);
}
If possible, try to use padding with box-sizing instead, on #page element
#page {
padding: 10px;
box-sizing: border-box;
background: red;
float: left;
width: 100%;
height: 300px;
}
#margin {
background: green;
float: left;
width: 100%;
height: 100%;
}