I have a problem to increase the space between elements within an inline block container. I found a trick to do that but it works only for the first line...
By the way, I have n number of elements and a specific container width.
The code:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: blue;
height: 300px;
width: 620px;
display: inline-block;
}
.container div + div {
margin-left: 33px;
}
.child1 {
width:200px;
height: 100px;
display:inline-block;
background-color: red;
}
.child2 {
width: 200px;
height: 100px;
display: inline-block;
background-color: green;
}
.child3 {
width: 200px;
height: 100px;
display: inline-block;
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>
</body>
</html>
The Result:
(Note: It has to support all browsers, +IE7)
Thank you very much!
Use the nth-child selector to select every three child!
https://jsfiddle.net/25x4ga0g/1/
.container div:nth-child(2n + 1) {
margin-left: 0px;
}
More about nth-child selector
Use margin-right instead of margin-left.
.container div {
margin-right: 33px;
}
.container {
background-color: blue;
height: 300px;
width: 620px;
display: inline-block;
}
.container div {
margin-right: 33px;
}
.child1 {
width: 200px;
height: 100px;
display: inline-block;
background-color: red;
}
.child2 {
width: 200px;
height: 100px;
display: inline-block;
background-color: green;
}
.child3 {
width: 200px;
height: 100px;
display: inline-block;
background-color: yellow;
}
<div class="container">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>
Did you try this ?
div+div:last-of-type{
margin:0px;
}
Insert this snippet in the style part and it should be ok. It will work for the last div only .
To do this you can use something fantastic called Flexbox.
First, set the container to display: flex. Then use flex-wrap: wrap so if you add more elements, they will appear on a new row below. Also make sure to use align-content: flex-start so the elements will start from the left.
Finally add a margin-left and margin-bottom to all your child-divs so they will have space between them. Because we are use Flexbox, your problem with the margin will now be eliminated.
If you want the divs to fit perfectly in the container instead, just remove the margins of the child-divs and set the parent to justify-content: space-between.
CSS Code:
.container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: 620px;
height: 300px;
background-color: blue;
}
.container div {
margin-right: 33px;
margin-bottom: 5px;
}
.child1 {
width: 200px;
height: 100px;
display:inline-block;
background-color: red;
}
.child2 {
width: 200px;
height: 100px;
display: inline-block;
background-color: green;
}
.child3 {
width: 200px;
height: 100px;
display: inline-block;
background-color: yellow;
}
Working Fiddle
Read more about Flexbox
An alternate solution if you don't want to use Flexbox, you could just select every third children and then set the margin-left to 0:
.container div:nth-child(3n) {
margin-left: 0;
}
Hope that helped
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 1 year ago.
I have two divs with width: 50% and text content inside that are wrapped in the container. The problem is that when text content changes, width also changes:
I have a fixed width of the container equal to 200px:
.container {
display: block;
width: 200px;
}
.text1 {
background-color: red;
width: 50%;
display: inline;
}
.text2 {
background-color: blue;
width: 50%;
display: inline;
}
<div class='container'>
<div class='text1'>Text1</div>
<div class='text2'>Text2</div>
</div>
How I can keep 50% of child div width even when text is changing?
Link to JSFiddle:
You may use CSS Flexbox here:
.container {
display: flex;
width: 200px;
}
.text1 {
background-color: red;
width: 50%;
}
.text2 {
background-color: blue;
width: 50%;
}
<div class='container'>
<div class='text1'>Text1</div>
<div class='text2'>Text2</div>
</div>
CSS Solution
inline elements only consume the the width that its content specifies.
Go for display: block; with float: left; or display: flex implementation.
display: block implementation
.container {
display: block;
width: 200px;
}
.text {
width: 50%;
display: block;
float: left;
}
.text1 {
background-color: red;
}
.text2 {
background-color: blue;
}
<div class='container'>
<div class='text text1'>1</div>
<div class='text text2'>Text2</div>
</div>
display: flex implementation
In case of flex layout, there is no need to specify width to the child elements. Just add flex-grow: 1 or flex: 1 to the child elements.
.container {
display: flex;
width: 200px;
}
.text {
flex: 1;
}
.text1 {
background-color: red;
}
.text2 {
background-color: blue;
}
<div class='container'>
<div class='text text1'>1</div>
<div class='text text2'>Text2</div>
</div>
Although flexbox should work, as given by other responses, you can also do it by using columns.
Just specify column-count to 2 columns on .container and set column-width to 50% on .text1 and .text2.
Here´s it:
.container {
display: block;
width: 200px;
column-count: 2;
}
.text1 {
background-color: red;
column-width: 50%;
}
.text2 {
background-color: blue;
column-width: 50%;
}
<div class='container'>
<div class='text1'>1</div>
<div class='text2'>Text2</div>
</div>
Here´s the JSFiddle.
I have two child divs inside a parent div. The first child div is 32% of the width, and the second child div is 68% of the width. If the first child div is set to display: none;, how do I make it so that the second child div goes from 68% of the width to 100% of the width? Thanks
.parent {
width: 400px;
height: 200px;
position: relative;
float: left;
display: inline-block;
}
.child1 {
width: 32%;
height: 100%;
float: left;
background-color: green;
}
.child2 {
width: 68%;
height: 100%;
float: left;
background-color: red;
}
<div class='parent'>
<div class='child1'></div>
<div class='child2'></div>
</div>
I would leverage the magic of flex!
flex: 0 0 32%; On child1 sets the width to 32%.
flex: 1; to the child2 means: Fill all the available space. So if the child1 disappears, child 2 will fill all the remaining space.
.parent {
width: 400px;
height: 200px;
display: flex;
}
.child1 {
flex: 0 0 32%;
background-color: green;
}
.child2 {
flex: 1;
background-color: red;
}
<div class='parent'>
<div class='child1'></div>
<div class='child2'></div>
</div>
If you use flex instead of float, setting display: none on one will adapt the other for you:
document.querySelector('button').addEventListener('click', () => {
document.querySelector('.child1').classList.toggle('hidden');
})
.parent {
width: 400px;
height: 200px;
position: relative;
display: flex;
}
.child1 {
flex: 0 0 32%;
background-color: green;
}
.child2 {
flex: 1 1 auto;
background-color: red;
}
.hidden {
display: none;
}
button {
margin-bottom: 1em;
}
<button>Toggle child1 visibility</button>
<div class='parent'>
<div class='child1'></div>
<div class='child2'></div>
</div>
Here instead of using float property you can use Flexbox. for more understanding follow this link.
so in flexbox you can achieve it by following the below code :-
.parent {
width: 400px;
height: 200px;
display: flex;
}
.child1 {
height: 100%;
background-color: green;
flex:1;
}
.child2 {
// display:none;
height: 100%;
flex:2;
background-color: red;
}
<div class='parent'>
<div class='child1'></div>
<div class='child2'></div>
</div>
here's how you can achieve that using your approach.
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
.parent {
width: 400px;
height: 200px;
font-size: 20px;
font-weight: bold;
color: white;
}
.child1 {
width: 32%;
height: 100%;
float: left;
background-color: green;
}
.child2 {
width: 100%;
height: 100%;
background-color: blue;
}
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
Using a flexbox container, how can I have the first child centered and the second child at the end? I tried the following but it didn't work:
.flexbox {
display: flex;
justify-content: center;
height: 200px;
}
.box1 {
width: 100px;
}
.box2 {
width: 100px;
justify-self: end; /* does nothing */
}
div{ border: 1px solid black; } /* to help see the divs */
<div class="flexbox">
<div class="box1"></div>
<div class="box2"></div>
</div>
Justify-self only works with grid not flexbox
.flexbox {
display: grid;
grid-template-columns: auto auto;
height: 200px;
width: 500px;
background: orange;
}
.box1 {
width: 100px;
height: 200px;
background: red;
justify-self: end;
}
.box2 {
width: 100px;
justify-self: end;
height: 200px;
background: blue;
}
<div class="flexbox">
<div class="box1"></div>
<div class="box2"></div>
</div>
For your problem though, you can solve it using absolute positioning
.flexbox {
position: relative;
display: flex;
justify-content: center;
height: 200px;
width: 500px;
background: orange;
}
.box1 {
width: 100px;
height: 200px;
background: red;
}
.box2 {
position: absolute;
width: 100px;
height: 200px;
background: blue;
top: 0;
right: 0;
}
<div class="flexbox">
<div class="box1"></div>
<div class="box2"></div>
</div>
Use align-self property. It will work
.box2 {
width: 100px;
align-self: flex-end;
}
You could make a first box that's invisible and then using flex: space-between. Here's how I did it.
.flexbox {
display: flex;
justify-content: space-between;
height: 200px;
}
.flexbox-again {
display: flex;
justify-content: flex-end;
height: 200px;
}
.box0 {
width: 100px;
background: none;
}
.box1 {
width: 100px;
background: blue;
}
.box2 {
background: red;
width: 100px;
justify-self: end; // does nothing
}
<div class="flexbox">
<div class="box0"></div>
<div class="box1"></div>
<div class="box2"></div>
</div>
You can do center the first element using margin-left: 50%; and right align the second element using margin-right: 0; Remove justify-contect: center from your main div.
.flexbox {
display: flex;
height: 200px;
background: yellow;
}
.box1 {
width: 100px;
margin-left: 50%;
background: blue;
}
.box2 {
width: 100px;
margin-left: auto;
margin-right: 0;
background: green;
}
<div class="flexbox">
<div class="box1">fdgdfg</div>
<div class="box2">dfgdg</div>
</div>
Is it possible (without using floats) to achieve having 2 divs one below the other, while the third one fills up the space. However, the following HTML cannot be changed; and also we can't use cannot use floats.
Here is what I tried:
div{
width: 33%;
height: 100px;
background: red;
display: inline-block;
}
.left{
background: blue;
}
.right{
background: green;
}
.middle{
width: 50%;
height: 200px;
}
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
As you can see, the 2 divs on the left are pushed down. Is there a way to make them move up or another way to achieve this altogether?
JS Fiddle for anyone who wants it: https://jsfiddle.net/g6j7nLp5/2/
You can use CSS grid:
body {
display:grid;
grid-template-areas:
"left mid"
"right mid";
grid-gap:10px;
}
.left{
background: blue;
grid-area:left;
}
.right{
background: green;
grid-area:right;
}
.middle{
height: 200px;
grid-area:mid;
background: red;
}
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
As far as I'm aware, you can't do this without adding an extra container.
HTML:
<div class="wrapper">
<div class="item">Hello</div>
<div class="item">hello2</div>
<div class="item">hello3</div>
</div>
CSS:
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
height: 500px;
max-width: 500px;
}
.item {
background: lightblue;
width: 50%;
height: 50%;
}
.item:last-child {
width: 100%;
max-width: 100%;
height: 100%;
background-color: green;
}
Check it out on codepen. Good luck!
You want to use flex if you can wrap your three DIVs with a wrapper.
See a jsfiddle
It can't be done without a container (perhaps the <body>) unless you use absolute positioning or floats. Both those might be possible for you (we don't have many details) but they would be problematic.
div{
height: 100px;
}
.wrapper {
display: flex;
width: 100%; // need for compat
}
.left{
background: blue;
flex: 0 0 20px;
}
.right{
background: green;
flex: 0 0 20px;
}
.middle{
background: red;
flex: 1 0 auto;
}
How can i vertically / horizontally align this item with auto generated width / height without using the classic top:50% left:50% transform: translate(-50%,-50%)
css setup without alignments
#container {
width: 200px;
height: 100px;
background-color: lightblue;
}
#myImage {
width: auto;
height: auto;
max-height: 100px;
max-width: 200px;
}
I'm not entirely sure what you're trying to achieve but this is the image with no fixed height or width set in the CSS. I assume from your OP that you want is centered as such - so if the image dimensions changed it will stay centralized along both axis.
Note the only limitations you face are those older browsers that don't support flex. If that's a problem you can use display: table; and display: table-cell; to good effect.
http://jsfiddle.net/dLLan/29/
css:
#container {
width: 250px;
max-height: 250px;
height: 250px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
background-color: lightblue;
}
#myImage {
//removed
}
You can use something like that:
#helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#container {
width: 200px;
height: 100px;
background-color: lightblue;
text-align:center;
}
#myImage {
width: auto;
height: auto;
max-height: 100px;
max-width: 200px;
vertical-align: middle;
}
<div id="container">
<div id="helper"></div>
<img id="myImage" src="http://s3.amazonaws.com/hirethings/photo/7250/images/thumbnail.jpg?1274508483" />
</div>
Flexbox should be fine here depending on your Browser support requirements.
There is no need to position the image...the flex will do that.
.container {
width: 200px;
height: 100px;
background-color: lightblue;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1em;
}
.large {
width: 300px;
height: 200px;
}
.myImage {
width: auto;
height: auto;
}
<div class='container'>
<img class='myImage' src='http://s3.amazonaws.com/hirethings/photo/7250/images/thumbnail.jpg?1274508483' />
</div>
<div class='container large'>
<img class='myImage' src='http://lorempixel.com/image_output/food-q-c-250-160-5.jpg' />
</div>