Expend div width with contents [duplicate]
0
This question already has an answer here:
CSS when inline-block elements line-break, parent wrapper does not fit new width
2 answers
I want my items .item to be aligned to the left inside #item-wrapper and that to be centered inside .items div. It's kind of working, but when I resize the window, #item-wrapper hasn't the correct width anymore
.items {
text-align: center;
box-sizing: border-box;
width: 80vw;
margin: auto;
padding: 10px;
display: flex;
background: red;
}
#items-wrapper {
margin: auto;
text-align: left;
font-size: 0;
background: green;
}
.item {
box-sizing: border-box;
width: 250px;
height: 250px;
display: inline-block;
background: blue;
border: 1px solid black;
}<div class="items">
<div id="items-wrapper">
<div id="item01" class="item"></div>
<div id="item02" class="item"></div>
<div id="item03" class="item"></div>
</div>
</div>html css
edited Nov 19 at 12:59
zubair khanzada
5932513
asked Nov 19 at 11:39
GuinarOS
1
marked as duplicate by Paulie_D, Pete, LGSon css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 19 at 13:06
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
|
show 2 more comments
0
This question already has an answer here:
CSS when inline-block elements line-break, parent wrapper does not fit new width
2 answers
I want my items .item to be aligned to the left inside #item-wrapper and that to be centered inside .items div. It's kind of working, but when I resize the window, #item-wrapper hasn't the correct width anymore
.items {
text-align: center;
box-sizing: border-box;
width: 80vw;
margin: auto;
padding: 10px;
display: flex;
background: red;
}
#items-wrapper {
margin: auto;
text-align: left;
font-size: 0;
background: green;
}
.item {
box-sizing: border-box;
width: 250px;
height: 250px;
display: inline-block;
background: blue;
border: 1px solid black;
}<div class="items">
<div id="items-wrapper">
<div id="item01" class="item"></div>
<div id="item02" class="item"></div>
<div id="item03" class="item"></div>
</div>
</div>html css
edited Nov 19 at 12:59
zubair khanzada
5932513
asked Nov 19 at 11:39
GuinarOS
1
marked as duplicate by Paulie_D, Pete, LGSon css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 19 at 13:06
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
What do you mean by "correct width"?
– Paulie_D
Nov 19 at 11:46
@Paulie_D I think OP means as wide as the number of items on the line - when it wraps, the wrapper becomes 100% width
– Pete
Nov 19 at 11:47
Then this - stackoverflow.com/questions/34995740/…
– Paulie_D
Nov 19 at 11:55
can you add an image or something that can show what is the desired result you want? Do you want the blue squares to be always in a single row with same width? Please, be more clear
– Calvin Nunes
Nov 19 at 11:56
Think it's more like this: stackoverflow.com/questions/28876653/css-centering-dynamic-div/…
– Pete
Nov 19 at 11:58
|
show 2 more comments
0
0
0
This question already has an answer here:
CSS when inline-block elements line-break, parent wrapper does not fit new width
2 answers
I want my items .item to be aligned to the left inside #item-wrapper and that to be centered inside .items div. It's kind of working, but when I resize the window, #item-wrapper hasn't the correct width anymore
.items {
text-align: center;
box-sizing: border-box;
width: 80vw;
margin: auto;
padding: 10px;
display: flex;
background: red;
}
#items-wrapper {
margin: auto;
text-align: left;
font-size: 0;
background: green;
}
.item {
box-sizing: border-box;
width: 250px;
height: 250px;
display: inline-block;
background: blue;
border: 1px solid black;
}<div class="items">
<div id="items-wrapper">
<div id="item01" class="item"></div>
<div id="item02" class="item"></div>
<div id="item03" class="item"></div>
</div>
</div>html css
edited Nov 19 at 12:59
zubair khanzada
5932513
asked Nov 19 at 11:39
GuinarOS
1
This question already has an answer here:
CSS when inline-block elements line-break, parent wrapper does not fit new width
2 answers
I want my items .item to be aligned to the left inside #item-wrapper and that to be centered inside .items div. It's kind of working, but when I resize the window, #item-wrapper hasn't the correct width anymore
.items {
text-align: center;
box-sizing: border-box;
width: 80vw;
margin: auto;
padding: 10px;
display: flex;
background: red;
}
#items-wrapper {
margin: auto;
text-align: left;
font-size: 0;
background: green;
}
.item {
box-sizing: border-box;
width: 250px;
height: 250px;
display: inline-block;
background: blue;
border: 1px solid black;
}<div class="items">
<div id="items-wrapper">
<div id="item01" class="item"></div>
<div id="item02" class="item"></div>
<div id="item03" class="item"></div>
</div>
</div>This question already has an answer here:
CSS when inline-block elements line-break, parent wrapper does not fit new width
2 answers
.items {
text-align: center;
box-sizing: border-box;
width: 80vw;
margin: auto;
padding: 10px;
display: flex;
background: red;
}
#items-wrapper {
margin: auto;
text-align: left;
font-size: 0;
background: green;
}
.item {
box-sizing: border-box;
width: 250px;
height: 250px;
display: inline-block;
background: blue;
border: 1px solid black;
}<div class="items">
<div id="items-wrapper">
<div id="item01" class="item"></div>
<div id="item02" class="item"></div>
<div id="item03" class="item"></div>
</div>
</div>.items {
text-align: center;
box-sizing: border-box;
width: 80vw;
margin: auto;
padding: 10px;
display: flex;
background: red;
}
#items-wrapper {
margin: auto;
text-align: left;
font-size: 0;
background: green;
}
.item {
box-sizing: border-box;
width: 250px;
height: 250px;
display: inline-block;
background: blue;
border: 1px solid black;
}<div class="items">
<div id="items-wrapper">
<div id="item01" class="item"></div>
<div id="item02" class="item"></div>
<div id="item03" class="item"></div>
</div>
</div>html css
html css
edited Nov 19 at 12:59
zubair khanzada
5932513
asked Nov 19 at 11:39
GuinarOS
1
edited Nov 19 at 12:59
zubair khanzada
5932513
asked Nov 19 at 11:39
GuinarOS
1
edited Nov 19 at 12:59
zubair khanzada
5932513
edited Nov 19 at 12:59
zubair khanzada
5932513
edited Nov 19 at 12:59
zubair khanzada
5932513
5932513
asked Nov 19 at 11:39
GuinarOS
1
asked Nov 19 at 11:39
GuinarOS
1
asked Nov 19 at 11:39
GuinarOS
1
1
marked as duplicate by Paulie_D, Pete, LGSon css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 19 at 13:06
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Paulie_D, Pete, LGSon css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 19 at 13:06
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
What do you mean by "correct width"?
– Paulie_D
Nov 19 at 11:46
@Paulie_D I think OP means as wide as the number of items on the line - when it wraps, the wrapper becomes 100% width
– Pete
Nov 19 at 11:47
Then this - stackoverflow.com/questions/34995740/…
– Paulie_D
Nov 19 at 11:55
can you add an image or something that can show what is the desired result you want? Do you want the blue squares to be always in a single row with same width? Please, be more clear
– Calvin Nunes
Nov 19 at 11:56
Think it's more like this: stackoverflow.com/questions/28876653/css-centering-dynamic-div/…
– Pete
Nov 19 at 11:58
|
show 2 more comments
1
What do you mean by "correct width"?
– Paulie_D
Nov 19 at 11:46
@Paulie_D I think OP means as wide as the number of items on the line - when it wraps, the wrapper becomes 100% width
– Pete
Nov 19 at 11:47
Then this - stackoverflow.com/questions/34995740/…
– Paulie_D
Nov 19 at 11:55
can you add an image or something that can show what is the desired result you want? Do you want the blue squares to be always in a single row with same width? Please, be more clear
– Calvin Nunes
Nov 19 at 11:56
Think it's more like this: stackoverflow.com/questions/28876653/css-centering-dynamic-div/…
– Pete
Nov 19 at 11:58
1
1
What do you mean by "correct width"?
– Paulie_D
Nov 19 at 11:46
What do you mean by "correct width"?
– Paulie_D
Nov 19 at 11:46
@Paulie_D I think OP means as wide as the number of items on the line - when it wraps, the wrapper becomes 100% width
– Pete
Nov 19 at 11:47
@Paulie_D I think OP means as wide as the number of items on the line - when it wraps, the wrapper becomes 100% width
– Pete
Nov 19 at 11:47
Then this - stackoverflow.com/questions/34995740/…
– Paulie_D
Nov 19 at 11:55
Then this - stackoverflow.com/questions/34995740/…
– Paulie_D
Nov 19 at 11:55
can you add an image or something that can show what is the desired result you want? Do you want the blue squares to be always in a single row with same width? Please, be more clear
– Calvin Nunes
Nov 19 at 11:56
can you add an image or something that can show what is the desired result you want? Do you want the blue squares to be always in a single row with same width? Please, be more clear
– Calvin Nunes
Nov 19 at 11:56
Think it's more like this: stackoverflow.com/questions/28876653/css-centering-dynamic-div/…
– Pete
Nov 19 at 11:58
Think it's more like this: stackoverflow.com/questions/28876653/css-centering-dynamic-div/…
– Pete
Nov 19 at 11:58
|
show 2 more comments
1 Answer
1
active
oldest
votes
-1
.items {
text-align: center;
box-sizing: border-box;
width:80%;
margin: auto;
padding: 10px;
display: flex;
background: red;
}
#items-wrapper
{
margin: auto;
text-align: left;
font-size: 0;
background: green;
}
.item {
box-sizing: border-box;
width:32%px;
height:32%px;
display: inline-block;
background: blue;
border: 1px solid black;
}
if you want to stop you div item to some size you can give min-width: for example 100px;
answered Nov 19 at 12:42
Mohammed Rabiulla RABI
4311
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
-1
.items {
text-align: center;
box-sizing: border-box;
width:80%;
margin: auto;
padding: 10px;
display: flex;
background: red;
}
#items-wrapper
{
margin: auto;
text-align: left;
font-size: 0;
background: green;
}
.item {
box-sizing: border-box;
width:32%px;
height:32%px;
display: inline-block;
background: blue;
border: 1px solid black;
}
if you want to stop you div item to some size you can give min-width: for example 100px;
answered Nov 19 at 12:42
Mohammed Rabiulla RABI
4311
add a comment |
-1
.items {
text-align: center;
box-sizing: border-box;
width:80%;
margin: auto;
padding: 10px;
display: flex;
background: red;
}
#items-wrapper
{
margin: auto;
text-align: left;
font-size: 0;
background: green;
}
.item {
box-sizing: border-box;
width:32%px;
height:32%px;
display: inline-block;
background: blue;
border: 1px solid black;
}
if you want to stop you div item to some size you can give min-width: for example 100px;
answered Nov 19 at 12:42
Mohammed Rabiulla RABI
4311
add a comment |
-1
-1
-1
.items {
text-align: center;
box-sizing: border-box;
width:80%;
margin: auto;
padding: 10px;
display: flex;
background: red;
}
#items-wrapper
{
margin: auto;
text-align: left;
font-size: 0;
background: green;
}
.item {
box-sizing: border-box;
width:32%px;
height:32%px;
display: inline-block;
background: blue;
border: 1px solid black;
}
if you want to stop you div item to some size you can give min-width: for example 100px;
answered Nov 19 at 12:42
Mohammed Rabiulla RABI
4311
.items {
text-align: center;
box-sizing: border-box;
width:80%;
margin: auto;
padding: 10px;
display: flex;
background: red;
}
#items-wrapper
{
margin: auto;
text-align: left;
font-size: 0;
background: green;
}
.item {
box-sizing: border-box;
width:32%px;
height:32%px;
display: inline-block;
background: blue;
border: 1px solid black;
}
if you want to stop you div item to some size you can give min-width: for example 100px;
answered Nov 19 at 12:42
Mohammed Rabiulla RABI
4311
answered Nov 19 at 12:42
Mohammed Rabiulla RABI
4311
answered Nov 19 at 12:42
Mohammed Rabiulla RABI
4311
answered Nov 19 at 12:42
Mohammed Rabiulla RABI
4311
4311
add a comment |
add a comment |
1
What do you mean by "correct width"?
– Paulie_D
Nov 19 at 11:46
@Paulie_D I think OP means as wide as the number of items on the line - when it wraps, the wrapper becomes 100% width
– Pete
Nov 19 at 11:47
Then this - stackoverflow.com/questions/34995740/…
– Paulie_D
Nov 19 at 11:55
can you add an image or something that can show what is the desired result you want? Do you want the blue squares to be always in a single row with same width? Please, be more clear
– Calvin Nunes
Nov 19 at 11:56
Think it's more like this: stackoverflow.com/questions/28876653/css-centering-dynamic-div/…
– Pete
Nov 19 at 11:58