This question already has answers here:
Best way to center a <div> on a page vertically and horizontally? [duplicate]
(30 answers)
Closed 7 years ago.
I have 2 divs. One inside of another. The one on the outside has a width and height of 500px, and the one on the inside have a width of auto. I'm trying to center the div on the inside, but I'm also trying to get the width of it to be auto. It's not adjusting the width to auto, and instead it's spanning the entire 500px of the outer div. I'm not sure what I did wrong, so please take a look at my code:
<style>
#outer {
border: 1px solid black;
width: 500px;
height: 500px;
}
#inner {
border: 1px solid black;
width: auto;
margin: auto;
}
</style>
<div id = 'outer'>
<div id = 'inner'> Inner </div>
</div>
Div's are display: block which defaults to filling the entire width of the parent. So when you are setting it to width: auto it's doing the default. If you want to make it conform to it's content, then set it to display: inline-block. Since inline-block can be centered like text just add text-align: center to your #outer div. Like so:
#outer {
border: 1px solid black;
width: 500px;
height: 500px;
text-align: center;
}
#inner {
border: 1px solid black;
display: inline-block;
}
<div id='outer'>
<div id='inner'>Inner</div>
</div>
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
CSS: Width in percentage and Borders
(5 answers)
Closed 1 year ago.
I have this html
<div class="parent">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
i wanted this boxes to be in the same row and they to be equal. So i setted the parent div to be 100% width, and inside my items to be 33.%.
So 3 x 33.3 = 99.9.
.parent {
width: 100%;
border:1px solid blue;
}
.box {
width: 33.3%;
border: 1px solid red;
display: inline-block;
}
body {
margin: 0px;
padding: 0px;
}
That should pass inside the parent which takes 100% width of the whole window.
But the box number 3 gets down instead next to box number 2. Why is that ?
Give the Parent box a font-size of 0. The white space between each inline-block div is causing the last one to go to the next line. Be sure to give the inline-block divs each their own regular font-sizes though so any text they have isn’t invisible.
Also, make sure the inline-block divs have “box-sizing:border-box” so that their borders are included in the 33.3% width
Basically, this:
.parent {
width: 100%;
border:1px solid blue;
font-size: 0px;
}
.box {
width: 33.3%;
border: 1px solid red;
display: inline-block;
box-sizing: border-box;
font-size: 16px;
}
You can add box-sizing: border-box to your .box div so that the 1px borders are included in the width:
.box {
width: 33.3%;
border: 1px solid red;
box-sizing: border-box;
display: inline-block;
}
You have added several other bits to the widths of your elements. The borders will add 2px.
Also browsers add their own default settings for margin/padding.
You will often see at the top of CSS stylesheets:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
This tells the browser not only not to add its own styling but also if styling is added further down the cascade that padding and border widths should be included in the width of an element. So for example if you set a width at 100px and then add some padding to it it will still have width 100px. This can make calculating how much space is actually being taken up somewhat easier.
However, there is one more thing in the case of inline-blocks - if there is whitespace between them in the layout the browser will add a (small) whitespace between them in laying them side by side. I don't know what the ultimate recommended way of getting rid of this might be (there's lots of options if you search). This snippet just gets rid of the whitespace in the HTML text so it doesn't arise.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.parent {
width: 100%;
border: 1px solid blue;
}
.box {
width: 33.3%;
border: 1px solid red;
display: inline-block;
}
body {
margin: 0px;
padding: 0px;
width: 100vw;
}
<div class="parent"><div class="box">1</div><div class="box">2</div><div class="box">3</div>
</div>
a better way to do this is using flex.
#parent{
display:flex;
border:solid 1px red;}
.box{
width:33.3%;
border:solid 1px black;
text-align:center;}
<div id="parent">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
This question already has answers here:
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 1 year ago.
I have run into this problem:
span {
width: fit-content;
background-color: yellow;
}
div {
width: fit-content;
border: black 1px solid;
max-width: 100px;
}
<div>
<span>Fooooo Barrrrrrrr</span>
</div>
<p>The right side border should be touching the right side of the longest line.</p>
I would like the div to be as close to the size of the span as possible. I have put width: fit-content; there but it seems to only fit to its own max-width. I am not asking to fit the div to the boundries of every line, but it should be as wide as the widest line in span. How can I resolve this?
Try with this:
.customblk span {
background-color: yellow;
}
.customblk div {
border: black 1px solid;
max-width: max-content;
}
<section class="customblk">
<div>
<span>Fooooo Barrrrrrrr </span>
</div>
<p>The right side border should be touching the right side of the longest line.</p>
</section>
Here you can use min-content, or if you don't want the words to break you can use max-content only on the div and let the span have auto width (it's the default, so no need to explicitly set it). Note that your CSS will influence all divs on your page, so to test this you need to set unique classes or ids to not have the first css influence the second css.
span.span1 {
width: fit-content;
background-color: yellow;
}
div.div1 {
width: min-content;
border: black 1px solid;
max-width: 100px;
}
span.span2 {
background-color: yellow;
}
div.div2 {
border: black 1px solid;
width: max-content;
}
<div class="div1">
<span class="span1">Fooooo Barrrrrrrr</span>
</div>
<br>
<div class="div2">
<span class="span2">Foooooo Barrrrrrrrrr</span>
</div>
This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 2 years ago.
I wanted to make an inline div using inline-block, but it doesn't work and either turns it turns one of the two divs below and the other above
#div-on-the-left {
background-color: #464886;
width: 200px;
height: 600px;
padding: 10px;
border: 10px double #2c2d54;
margin: 5px;
}
#big-div-on-the-right {
background-color: #AAABB8;
width: 600px;
height: 600px;
display: inline-block;
margin: 5px;
}
<div id="div-on-the-left">
<!--Some html-->
</div>
<div id="big-div-on-the-right">
<!--Some html-->
</div>
I also tried giving #div-on-the-left inline-block too, that brought #big-div-on-the-right above, but left a gap where #div-on-the-left was supposed to be and brought #div-on-the-left to the bottom, why is this happening?
YOu would be way better off using a grid or flexboxes. In this case flexboxes would be "easier" and "shorter". You main issue is, that both div-boxes have a different height. The left div-box have a height of 600px + (2x20px) = 640px because of the double border. the right div-box have a height of only 600px causing different line height and therefor will cause a line-break. Next, the minimum-width has to be set large enough to allow both boxes to be displayed next to each other.
In the snippet below, I wrapped both boxes inside a wrapper with a minimum width high enough to let them be displayed next to each other. Then I changed them to display: flex;.
The height for the right box was set to 640px becaue of the border mentioned above.
.wrapper {
min-width: 850px;
display: flex;
}
#div-on-the-left {
background-color: #464886;
width: 200px;
height: 600px;
padding: 10px;
border: 10px double #2c2d54;
margin: 5px;
}
#big-div-on-the-right {
background-color: #AAABB8;
width: 600px;
height: 640px;
margin: 5px;
}
<div class="wrapper">
<div id="div-on-the-left">
<!--Some html-->
</div>
<div id="big-div-on-the-right">
<!--Some html-->
</div>
</div>
Found it as not that easy task to force the child div to take the full height of its background image.
There are six obligatory terms:
Exact height is unknown for both div
Child div is empty
Background image size: cover
display: flex
No javascript
It's a list's item (thus no fullscreen)
.item {
display: flex;
border: 1px solid red;
height: 100%;
}
.inner {
background: url('https://images.unsplash.com/photo-1504608524841-42fe6f032b4b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80') center center / cover no-repeat;
border: 1px solid blue;
width: 100%;
height: 100%;
}
<div class='item'>
Inner content
<div class='inner'></div>
</div>
All similar questions found on SO don't pass all or some of terms.
Would be grateful for any thoughts (especially from grid gurus).
To have the image determine the height of the inner div (as if it were an <img> element), use this.
.item {
display: flex;
border: 1px solid red;
height: 100%;
}
.inner {
border: 1px solid blue;
}
.inner::before {
font-size:0;
content: url('https://images.unsplash.com/photo-1504608524841-42fe6f032b4b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80');
display:block;
}
<div class='item'>
<div class='inner'></div>
</div>
Note that this answers the question in the first sentence of the question body, which is not the same as the question in the title.
This question already has answers here:
How to vertically align an image inside a div
(37 answers)
Closed 9 years ago.
I'm trying to vertical align my ing element within a div. Only problem is the img element doesn't have a fixed height. I tried vertical-align in combination with table, table-cell and inline-block and inline. None of this seems to work. Does anyone have any idea how I can achieve this? I made a JSFiddle that recreates my problem.
JsFiddle: http://jsfiddle.net/6gMcK/1/
HTML:
<div id="image-container">
<img src="http://www.image2012.com/images/2013/03/landscapes-landscape-free.jpg">
</div>
CSS:
#image-container {
padding:5px;
height: 135px;
border: 1px solid black;
display: table;
float:left;
}
#image-container img{
display: table-cell;
max-height:125px;
vertical-align: middle;
}
Change some properties as like this
#image-container {
padding: 5px;
height: 135px;
border: 1px solid black;
display: table-cell;
vertical-align: middle;
}
#image-container img{
max-height: 125px;
display: block;
}
Live Demo
A solution I often use is to have the image be the background of the image container. This way I can set the width and height to whatever it needs to be and for any image and size of the container, with a little absolute positioning and the full image is always displayed.
#image-container {
position:absolute;
left:30%;
right:30%;
min-width:135px;
height: 135px;
border: 1px solid black;
background-image:url('image.png');
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
Of course you can always play around with the values for the width depending on what your needs are. I always found this to be a simple solution for displaying images.
If you just have one image in the container , and the container has a fixed height, then you could simply apply line-height = container_height_px to the container
Try this demo