I want to display two DIVs in one line. Each DIV should have another DIV inside. Internal DIVs should have the same height as external DIVs minus margins.
I can't set proper height to inside DIVs (bottom margin is ignored). Can you help me with that? jsFiddle: https://jsfiddle.net/gf53e0on/
<body>
<div class="box"><div class="box-in"></div></div>
<div class="box"><div class="box-in"></div></div>
</body>
body {
position: fixed;
width: 100%;
border: none;
display: table;
table-layout: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
}
.box {
border: none;
display: table-cell;
height: 100vh;
background-color: yellow;
}
.box-in {
border: solid 1px;
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
height: 100%;
}
You can add padding to the bottom of your outer boxes. You also have to set box-sizing: border-box; so that this additional padding doesn't add to the height of the outer box.
So your box class becomes:
.box {
border: none;
display: table-cell;
height: 100vh;
background-color: yellow;
box-sizing:border-box;
padding-bottom:20px;
}
updated fiddle here
edited to add:
If you don't actually need to use margins on the inner box, you can remove them completely and just set a padding of 10px on the outer box with box-sizing:border-box on it.
another fiddle
Another option would be to use CSS3's calc to calculate the height minus the margins.
body {
position: fixed;
width: 100%;
border: none;
display: table;
table-layout: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
}
.box {
border: none;
display: table-cell;
height: 100vh;
background-color: yellow;
}
.box-in {
border: solid 1px;
margin:10px;
height: calc(100% - 20px);
}
<div class="box"><div class="box-in"></div></div>
<div class="box"><div class="box-in"></div></div>
Related
I have two divs as you can see below. I want to create 5 px margin-top between the two. However margin-top of inner div cause unnecessary margin on the top of outer div, and hence cause unnecessary margin at top of the page.
Adding border property to outer div solve the problem and i can also fix it by other hacks like posioning and padding to outer div. However i am curious to know what is causing this problem ?
<div class="outer">
<div class="inner">
</div>
</div>
and here is the Css
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
.outer{
width:100%;
height:200px;
background:black;
}
.inner{
width:100%;
height:100px;
margin-top:5px;
background:red;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
.outer {
width: 100%;
height: 200px;
background: black;
}
.inner {
width: 100%;
height: 100px;
margin-top: 10px;
background: red;
}
<div class="outer">
<div class="inner">
</div>
</div>
All you need is to make the display of the outer div inline-block.
display: inline-block;
cause from what I understand is two display block inside each other with behaving the same if one has margin the other will have and you will no notice that
html {
margin: 0;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
.outer {
width: 100%;
height: 200px;
background: black;
display: inline-block;
}
.inner {
width: 100%;
height: 100px;
margin-top: 10px;
background: red;
}
<html>
<head>
<title>StackOverFlow 🍗</title>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
The problem is the inner div is in the very beginning of outer. One trick would be adding padding-top to outer div:
.outer{
/* other stuff */
padding-top: 1px;
}
.inner{
/* other stuff */
margin-top: 4px;
}
or put all the 5px in padding-top
.outer{
/* other stuff */
padding-top: 5px;
}
Or you may use another element before the inner div, for example hr
<div class="outer">
<hr>
<div class="inner">
</div>
</div>
But the best trick is (as Mohammad said) make the outer div inline-block.
.outer{
/* other stuff */
display: inline-block;
}
I have a flex container, with few li elements inside. While adding more li elements inside, the container scretches together in above and down sides. I don't want it to move any further in up, only in down direction.
You can check it on my JSfiddle
Try to add few li elements, you will see that container is scretching. How to block it?
Try this out and see if it is what you are going for. If not I may need some additional info.
.mainContainer {
width: 100vw;
height: 100vh;
display: block;
align-items: center;
justify-content: center;
}
.content {
min-height: 350px;
width: 300px;
border-radius: 5px;
background: #f2f2f2;
border: 1px #ccc solid;
position:relative;
margin:0 auto;
display:block;
top:50%;
margin-top:-25%;
}
First of all, I am using some Jquery here for adding new elements:
So I removed min-height for content
Reset the ul margin-bottom to zero.
The new items are added via JS and are positioned absolutely:
ul.list-group {
margin-bottom: 0;
position: relative;
}
ul .list-group-item.counter{
position:absolute;
width: 100%;
}
The new items are listed one below the other giving the margin-top property:
$('.list-group').append("<li class='list-group-item counter' style='margin-top:" + newItems * 100 + "px'>x</li>");
Let me know your feedback on this. Thanks!
var newItems = 0;
$('.fixed_btn').click(function(event) {
$('.list-group').append("<li class='list-group-item counter' style='margin-top:" + newItems * 100 + "px'>x</li>");
newItems++;
});
* {
padding: 0;
margin: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
body {
-webkit-font-smoothing: antialiased;
font-family: Raleway;
}
.mainContainer {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.content {
/*min-height: 350px;*/
width: 300px;
border-radius: 5px;
background: #f2f2f2;
border: 1px #ccc solid;
}
.list-group-item {
height: 100px;
}
ul.list-group {
margin-bottom: 0;
position: relative;
}
.fixed_btn {
position: fixed;
top: 0;
left: 0;
}
ul .list-group-item.counter{
position:absolute;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="mainContainer">
<div class="content">
<ul class='list-group'>
<li class='list-group-item'>x</li>
<li class='list-group-item'>x</li>
<li class='list-group-item'>x</li>
</ul>
</div>
</div>
<button class="btn fixed_btn">+ Add</button>
If you change your .mainContainer CSS so that the height is auto. Now the list will not move up, but only will move down as you wanted as the height is flexible depending on the content:
.mainContainer {
width: 100vw;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
Also, if you change the .content CSS so that the min-height is auto it seems to look nicer when there are fewer li elements:
.content {
min-height: auto;
width: 300px;
border-radius: 5px;
background: #f2f2f2;
border: 1px #ccc solid;
}
Updated (again) Fiddle, try to add more li elements
If your looking for the list to stay in position, but when more elements are added to have a scroll but still be fixed see this other Fiddle
Code:
HTML
<body>
<div class="wrap">
<div class="box">???</div>
</div>
</body>
CSS
.wrap {
background-color: #0000FF;
display: block;
height: 600px;
margin: 0px auto;
padding: 0px;
width: 600px;
}
.box {
border: solid 20px #FF0000;
color: #FFFFFF;
display: block;
height: 100%;
padding: 0px;
margin: 0px;
text-align: center;
width: 100%;
}
JSFiddle: http://jsfiddle.net/5k0ddtdn/4/
I'm expecting the red border to wrap completely around the blue parent div considering this isn't a border-box.
Why doesn't it do that?
Add box-sizing: border-box; to .box.
.box {box-sizing: border-box;}
http://jsfiddle.net/5k0ddtdn/8/
In your code, the inner element has width 600px + 40px border, the parent element (.wrap has 640px in total). You need to change box-model, or set correct size to inner element (width: 560px; height: 560px;). You can remove width for inner element and set just height: 560px;.
http://jsfiddle.net/5k0ddtdn/10/
update your box like so :
.box {
border: solid 20px #FF0000;
color: #FFFFFF;
display: block;
height: 100%;
padding: 0px;
margin: 0px;
text-align: center;
width: 100%;
box-sizing: border-box;
}
Live Demo
I am trying to display a list of images (equal height) in a horizontally scrolling div. This much works, but when I want to have a fixed image - a "cover" image present leftmost inside container the layout gets screwed up.
Below is the CSS and HTML of my work. If you run the snippet you can see that the list jumps to next line, instead of staying adjacent to "cover" image and scrolling horizantally. Here is the jsfiddle - http://jsfiddle.net/6x66dLdy/
I can solve it using javascript by setting width of #list programmatically, but I want to do it with CSS alone if possible.
#container {
height: 120px;
background: #ccccff;
}
#cover {
height: 100px;
margin: 10px;
display: inline-block;
vertical-align: top;
position: relative;
}
#cover img {
border: 2px solid #cc0000;
}
#list {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
height: 100px;
margin: 10px 0;
display: inline-block;
}
.item {
height: 80px;
margin: 10px 5px;
display: inline-block;
}
<div id="container">
<div id="cover">
<img src="http://placehold.it/160x100"/>
</div>
<div id="list">
<div class="item">
<img src="http://placehold.it/120x80"/>
</div>
<div class="item">
<img src="http://placehold.it/60x80"/>
</div>
<div class="item">
<img src="http://placehold.it/120x80"/>
</div>
<div class="item">
<img src="http://placehold.it/120x80"/>
</div>
<div class="item">
<img src="http://placehold.it/120x80"/>
</div>
</div>
</div>
This happening because you don't have widths specified. You have to provide widths for both of your inner divs and also to the container. Giving explicit width to container is advisable because you can then safely assign percent widths to children.
In you use-case, you have to calculate how much width is safer for your div#cover and then use the CSS calc to calculate the remainder of the width to assign to the list. Also, remember to account for the margins you have.
Relevant CSS:
width: calc(100% - 240px);
Your fiddle: http://jsfiddle.net/abhitalks/6x66dLdy/1
It is always better to specify a proper box-sizing. So include this at the top of your CSS:
* { box-sizing: border-box; }
.
Float the #cover left and remove the display: inline-block from #list.
This will allow the cover image and images in the list be any unknown width. Setting a fixed width on the containers like the other answers would not allow this.
Fiddle: http://jsfiddle.net/6x66dLdy/4/
#container {
height: 120px;
background: #ccccff;
}
#cover {
height: 100px;
margin: 10px;
float: left;
vertical-align: top;
position: relative;
}
#cover img {
border: 2px solid #cc0000;
}
#list {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
height: 100px;
margin: 10px 0;
}
.item {
height: 80px;
margin: 10px 5px;
display: inline-block;
}
test this
http://jsfiddle.net/6x66dLdy/3/
#container {
height: 120px;
background: #ccccff;
width:1000px;
}
#cover {
height: 100px;
margin: 10px;
display: inline-block;
vertical-align: top;
position: relative;
width:200px;
float:left;
}
#cover img {
border: 2px solid #cc0000;
}
#list {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
height: 100px;
margin: 10px 0;
width:600px;
float:left
}
.item {
height: 80px;
margin: 10px 5px;
display: inline-block;
}
To answer your question you can specify min-width:800px; for the id #container
so it does not jump down and stay beside the main picture
here is an example http://jsfiddle.net/6x66dLdy/5/
I am trying to align these blocks so they are expandable, but also inline. But I can't seem to get them to maintain their own space correctly. The layout I am going for is as follows
Where box 2, and 3 are auto expanding to fill in space on whatever resolution is viewing.
JSFiddle and JSFiddle 2
CSS / HTML:
.container {
width: 75%;
min-width: 1005px;
max-width: 1428px;
height: 330px;
margin: 0 auto;
background-color: gray;
}
.box1 {
float: left;
width: 455px;
height: 250px;
background-color: rgba(0, 0, 0, 0.75);
margin-right: 5px;
margin-bottom: 5px;
}
.box2 {
float: left;
width: 75%;
min-width: 340px;
height: 250px;
background-color: rgba(100, 50, 50, 0.75);
margin-right: 5px;
margin-bottom: 5px;
}
.box3 {
float: left;
width: 25%;
min-width: 190px;
height: 250px;
background-color: rgba(50, 50, 100, 0.75);
margin-right: 5px;
margin-bottom: 5px;
}
.box4 {
display: block;
width: 100%;
height: 60px;
background-color: rgba(50, 100, 50, 0.75);
}
<div class="container">
<div class="box1">Test</div>
<div class="box2">Test</div>
<div class="box3">Test</div>
<div class="box4">Test</div>
</div>
Here are three techniques
"Show code snippet" and run to see the complete example.
#1 - display: inline-block and calc
Compatibility: IE 9 + and all modern browsers. There are workarounds to get this working with IE8+ if needed.
The margins and fixed column are removed from the percentage calculation with width: calc(50% - 60px)
The divs are given min-height: 100% and will re-size with content. This is possible thanks to
html,body { height: 100%; }
The inline gap is removed by placing the closing div tags right next to the next opening tag. More info here.
Example
Note: The child selectors can be replaced with class selectors if wanted.
html,
body {
height: 100%;
margin: 0;
}
div {
background: #f50057;
min-height: calc(50% - 5px);
width: calc(50% - 60px);
display: inline-block;
vertical-align: top;
margin-right: 10px;
}
/*Fix first div*/
div:first-child {
width: 100px;
}
/*Remove third divs right margin*/
div:nth-child(3) {
margin: 0;
}
/*Top margin for last div*/
div:last-of-type {
width: 100%;
display: block;
margin: 10px 0 0;
}
<div></div><div></div><div></div><div></div>
#2 - display: table / display: table-cell
Compatibility: IE 8 + and all modern browsers
The top three divs are wrapped in a div with display: table
The top three divs are given display: table-cell
The fixed left div is given a fixed width
To allow the "cells" to evenly spread out the available width, the wrapper is given table-layout: fixed
The spacing between the top three divs is given by the border property. This is calculated into the percentage calculation thanks to * { box-sizing: border-box }
The bottom div is outside the wrapper and is given display: block. It is given a top border to create the faux margin
Example
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
background: #000;
}
.table {
display: table;
height: 50%;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.table > div {
background: #f50057;
display: table-cell;
border-left: solid 10px #FFF;
}
.table > div:first-child {
border-left: none;
width: 100px;
}
.footer {
width: 100%;
display: block;
background: #f50057;
height: 50%;
border-top: solid 10px #FFF;
}
<div class="table">
<div></div>
<div></div>
<div></div>
</div>
<div class="footer"></div>
#3 - The future! display: flex
Compatibility: IE 11, all modern browsers and Safari (with -webkit- prefix)
This is my favourite! Mainly due to the fact that I created it in about 3 minutes.
The top three divs are wrapped in a container with display: flex
The first div is given its fixed pixel width and flex: 0 0 auto. This tells the div not to grow or shrink
The 2 flexible divs are given flex: 1 and will grow and shrink as needed; automatically ignoring the fixed column
The last div is outside the flex container and is independent
The height and widths of the flexible divs are created with viewport width (vw) and viewport height (vh) units.
Refer here for a fantastic flexbox guide.
Example
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.flex {
display: flex;
height: 50vh;
width: 100vw;
}
.flex > div {
background: #f50057;
flex: 1;
margin-left: 10px;
}
.flex > div:first-child {
width: 100px;
flex: 0 0 auto;
margin: 0;
}
.footer {
width: 100%;
display: block;
background: #f50057;
height: calc(50vh - 10px);
margin-top: 10px;
}
<div class="flex">
<div></div>
<div></div>
<div></div>
</div>
<div class="footer"></div>
Its not perfect but seems to do what you want with css tables.
<div class="table">
<div class="trow">
<div class="tcell">box1</div>
<div class="tcell">box2</div>
<div class="tcell">box3</div>
</div>
</div>
<div class="table">
<div class="tcell last">box4</div>
</div>
.table{display:table; width:100%; text-align:center;}
.tcell{display:table-cell; background:#000; color:#fff; min-height:100px; padding:20px; border:1px solid #fff; }
.trow{display:table-row; }
.last{ background:red; }
.trow .tcell:first-child{ width:300px; }
http://jsfiddle.net/fjsvnrLp/5/
You dont actually need the row