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.
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
* {
margin: 0;
padding: 0;
}
.parent {
height: 10rem;
background-color: blue;
}
.child1 {
display: inline-block;
width: 45%;
height: 7rem;
background-color: red;
}
.child2 {
display: inline-block;
width: 45%;
height: 3rem;
background-color: red;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
The smaller inline-block gets down a bit to get aligned with the larger inline-block. I don't know why this happens. I don't want it to happen.
(I know that the behaviour changes when some content is added to the empty divs)
jsfiddle-> https://jsfiddle.net/2vzjqreh/
It's because of the vertical-align property, it's default value is 'baseline'. You can read about it here. I've edited your code and just add vertical-align to
.child-1 styles.
* {
margin: 0;
padding: 0;
}
.parent {
height: 10rem;
background-color: blue;
}
.child1 {
display: inline-block;
width: 45%;
height: 7rem;
background-color: red;
vertical-align: top;
}
.child2 {
display: inline-block;
width: 45%;
height: 3rem;
background-color: red;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
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>
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
Looking for a specific stacking order inside a flex container. Pretty basic footer split into 3 sections, so you have left and right Divs 100% height and 20% width. The middle would flex to fill the difference BUT middle needs to be split in half. So top and bottom Divs inside at 50% height each. I can’t seem to figure out the positions with absolute, fixed, ect. Or floating whatever works best.
Thanks
Ok sorry, here is the CSS inside flex container
.footer_left_box {
position: absolute;
display: inline-block;
float:left;
left:0;
width: 10%;
height: 100%;
background-color:#C9D329;
}
.footer_middle_top_box {
position: relative;
display: inline-block;
width: 80%;
height: 50%;
background-color:#2BB851;
}
.footer_middle_bottom_box {
position: relative;
display: inline-block;
width: 80%;
height: 50%;
background-color:#3954D4;
}
.footer_right_box {
position: absolute;
right:0;
width: 10%;
height: 100%;
background-color:#E33538;
}
This is an example of what I need
Flexbox can do that but you may need to adapt the structure.
footer {
height: 150px;
display: flex;
}
.left,
.right {
flex: 0 0 20%;
}
.left {
background: rebeccapurple;
}
.right {
background: #bada55;
}
.middle {
flex: 1;
border: 2px solid red;
display: flex;
flex-direction: column;
}
.top {
flex: 0 0 50%;
background: #c0c0ae;
}
.bottom {
flex: 0 0 50%;
background: #c0ffee;
}
<footer>
<div class="left"></div>
<div class="middle">
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="right"></div>
</footer>