So i have two dives in a container which has overflow:hidden.
However, when I increase the width of first div, the second one moves down instead of cutting of in the right side. Here is a fiddle.
Increase the width of first div to 500px to see it happen.
<div id="container">
<div id="first">FIRST</div>
<div id="second">SECOND</div>
</div>
You could use white-space: nowrap on the container: https://jsfiddle.net/1631rrpn/3/
#container {
width: 500px;
height: 150px;
border: 1px solid #ccc;
overflow: hidden;
white-space: nowrap;
}
#first {
width: 500px;
height: 100px;
background: #666;
display: inline-block;
}
#second {
width: 100px;
height: 100px;
background: #ccc;
display: inline-block;
}
Related
When two inline-block divs have different heights, why does the shorter of the two not align to the top of the container? (DEMO):
.container {
border: 1px black solid;
width: 320px;
height: 120px;
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
How can I align the small div at the top of its container?
Because the vertical-align is set at baseline as default.
Use vertical-align:top instead:
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align:top; /* <---- this */
}
http://jsfiddle.net/Lighty_46/RHM5L/9/
Or as #f00644 said you could apply float to the child elements as well.
You need to add a vertical-align property to your two child div's.
If .small is always shorter, you need only apply the property to .small.
However, if either could be tallest then you should apply the property to both .small and .big.
.container{
border: 1px black solid;
width: 320px;
height: 120px;
}
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align: top;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
vertical-align: top;
}
Vertical align affects inline or table-cell box's, and there are a large nubmer of different values for this property. Please see https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align for more details.
Use display: flex property for the parent div
The flexbox items are aligned at the start of the cross-axis.
By default, the cross-axis is vertical. This means the flexbox items will be aligned vertically at the top.
So when you apply the display: flex property to the parent div, it sets its child elements with vertical-align: top.
See the following code:
.container {
border: 1px black solid;
width: 320px;
height: 120px;
display: flex;
/** CSS flex */
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
Browser Compatibility: Flexbox is very well supported across modern browsers.
<style type="text/css">
div {
text-align: center;
}
.img1{
width: 150px;
height: 150px;
border-radius: 50%;
}
span{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type='password' class='secondInput mt-4 mr-1' placeholder="Password">
<span class='dif'></span>
<br>
<button>ADD</button>
</div>
<script type="text/javascript">
$('button').click(function() {
$('.dif').html("<img/>");
})
Add overflow: auto to the container div.
http://www.quirksmode.org/css/clearing.html This website shows a few options when having this issue.
When two inline-block divs have different heights, why does the shorter of the two not align to the top of the container? (DEMO):
.container {
border: 1px black solid;
width: 320px;
height: 120px;
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
How can I align the small div at the top of its container?
Because the vertical-align is set at baseline as default.
Use vertical-align:top instead:
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align:top; /* <---- this */
}
http://jsfiddle.net/Lighty_46/RHM5L/9/
Or as #f00644 said you could apply float to the child elements as well.
You need to add a vertical-align property to your two child div's.
If .small is always shorter, you need only apply the property to .small.
However, if either could be tallest then you should apply the property to both .small and .big.
.container{
border: 1px black solid;
width: 320px;
height: 120px;
}
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align: top;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
vertical-align: top;
}
Vertical align affects inline or table-cell box's, and there are a large nubmer of different values for this property. Please see https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align for more details.
Use display: flex property for the parent div
The flexbox items are aligned at the start of the cross-axis.
By default, the cross-axis is vertical. This means the flexbox items will be aligned vertically at the top.
So when you apply the display: flex property to the parent div, it sets its child elements with vertical-align: top.
See the following code:
.container {
border: 1px black solid;
width: 320px;
height: 120px;
display: flex;
/** CSS flex */
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
Browser Compatibility: Flexbox is very well supported across modern browsers.
<style type="text/css">
div {
text-align: center;
}
.img1{
width: 150px;
height: 150px;
border-radius: 50%;
}
span{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type='password' class='secondInput mt-4 mr-1' placeholder="Password">
<span class='dif'></span>
<br>
<button>ADD</button>
</div>
<script type="text/javascript">
$('button').click(function() {
$('.dif').html("<img/>");
})
Add overflow: auto to the container div.
http://www.quirksmode.org/css/clearing.html This website shows a few options when having this issue.
I am using display: table-cell so that I can easily do height:100% the child elements inside to get 100% height.
The problem is that when I have multiple elements inside or padding or margins, the parent does not stretch and instead the contents poke through. Putting a overflow: hidden will not work as I need the children to fit inside the parent properly.
Mark up:
<div class="container">
<div class="subcontainer">
<h4>title</h4>
<div class="menu">
<p>test</p>
<p>test</p>
</div>
<div class="content">
<p>content</p>
<p>content</p>
</div>
</div>
</div>
CSS:
p{
padding:0;
margin:0;
}
html{
height: 100%;
overflow-y: scroll;
background: white;
}
body{
height: 100%;
margin: 0;
padding: 0;
background: red;
}
.container{
height: 100%;
display: table;
margin: 0;
padding: 0;
}
.subcontainer{
display: table-cell !important;
height: 100%;
}
h4{
padding: 0;
padding-bottom: 5px;
background: blue;
margin: 0;
border-bottom: 1px solid black;
margin-bottom: 5px;
}
.menu, .content{
background: green;
height: 100%;
display: inline-block;
float:left;
width: 200px;
padding: 20px;
}
.content{
background: purple;
width: 400px;
}
Fiddle: http://jsfiddle.net/ZQFrM/
The poking through is due to increased height inside caused by the following:
The existence of the h4 on top of the other elements.
Padding and margin on h4.
Padding on menu and content.
What can be done to resolve this problem? I definitely want to use the display: table-cell as I need the children to be able to stretch vertically to fill the parent.
you have to remove the float:left and display:inline-block from '.menu, .content' also you have to apply a display:table-cell. So both div can be align horizontally.
Here is the Code http://jsfiddle.net/kheema/ZBLY7/7/
Here is the CSS..
p{
padding:0;
padding:0;
}
body{
margin: 0;
padding: 0;
background: red;
}
.container{
height: 100%;
display: table;
margin: 0;
padding: 0;
}
.subcontainer{
display: table-cell !important;
height: 100%;
}
h4{
padding: 0;
padding-bottom: 5px;
}
.menu, .content{
background: green;
height: 100%;
/*display: inline-block;
float:left;*/
display: table-cell;
width: 200px;
}
.content{
background: purple;
width: 400px;
}
I have a grid of fixed size divs, and this must remain CSS-only.
Inside each div, I have a random size image inside.
I need the image to scale to the div size while keeping the aspect ratio, and also be centered both horizontally and vertically within the div.
#holder {
width: 800px;
margin: 0 auto;
}
.tile {
display: inline-block;
padding: 10px 15px;
border: 1px solid black;
text-align: center;
/*vertical-align: middle;*/
width: 300px;
height: 300px;
}
.tile img {
/*vertical-align: middle;*/
outline: 1px dashed red;
max-height:100%;
max-width:100%;
}
Can't center vertically. Everything else seems to work fine.
UPDATE: Also this doesn't work when the img is smaller than the div.
width: 100%; and height: auto; (or height: auto !important; in case there is a height attribute on the img element) usually does the trick.
Sorry misread the question, this fixes the aspect ratio but not the centering. This tread might give some valuable ideas.
The problem here is that the block height is unknown.
Here's a solution that work on firefox/chrome:
#holder {
width: 800px;
margin: 0 auto;
}
.tile {
padding: 10px 15px;
border: 1px solid black;
width: 300px;
height: 300px;
display: table;
}
.tile-layout {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.tile img {
outline: 1px dashed red;
width:100%;
}
Using this html template:
<div id="holder">
<div class="tile">
<div class="tile-layout">
<img src="{{ img }}"/>
</div>
</div>
</div>
#holder {
display:table;
width: 800px;
margin: 0 auto;
height:100%;
possition:relative;
}
.tile {
display: table-cell;
border: 1px solid black;
text-align: center;
vertical-align: middle;
}
.tileInner{
display:block;
width: 300px;
height: 300px;
padding: 10px 15px;
}
.tile img {
display:table-cell;
vertical-align: middle;
outline: 1px dashed red;
max-height:100%;
max-width:100%;
}
html
<div id="holder">
<div class="tile">
<div class="tileInner">
<img src="imageUrl"/>
</div>
</div>
</div>
I am trying to make a 3 column layout with the 2 fixed width divs (floated left and right) and with a fluid center div that changes it's width according to display width. All of those are contained in a wrapper div.
The way that I went about doing this is by creating to divs with fixed width that are floated left and right a 3rd div that is positioned relative the wrapper div with margin right in order to leave place for the right div to show.
However the problem is that if the fluid div has content it overflows the right div, ignoring the margin-right style. Why does this happen?
It also seems that the 1111 get's preformatted for some odd reason.
The code:
<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden; position: relative;">
<div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
<div style="border: 1px solid #999; position: absolute; left: 160px; margin-right: 160px;"><p>111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>
<div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
</div>
I recommend using two divs floated.
On the right one, place the middle and the right divs.
All that is done via floats:
HTML:
<div class="left">content for the left</div>
<div class="rightContainer">
<div class="right">right content</div>
<div class="middle">middle content</div>
</div>
CSS:
.left {
float: left;
width: 100px;
overflow: hidden;
min-height: 30px;
background: red;
}
.rightContainer {
float: none;
min-height: 30px;
overflow: hidden;
background: yellow;
}
.right {
float: right;
width: 100px;
overflow: hidden;
min-height: 30px;
background: blue;
}
.middle {
overflow: hidden;
min-height: 30px;
background: green;
}
example:
UPDATE: applied to your content: http://jsfiddle.net/2KXW5/1/
This can be solved by specifying the style word-wrap: break-word; for your center fluid div.
Browsers don't work well with word-wrapping. Anyways I hope this code brings some help:
<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden; position: relative;">
<div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
<div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
<div style="border: 1px solid #999; position: relative; left: 10px; margin-right: 160px; overflow:hidden; word-wrap: break-word; "><p>111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>
</div>
First: paragraph elemements are block-level elements. Google it to learn more. So if you want it to not overlap with the other You must float it as well.
so include this in the header (or separate file - or inline if you want):
<style type="text/css">
p {
float:left;
}
</style>
Then rearrange your divs:
<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden;position: relative;">
<div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
<div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
<div style="border: 1px solid #999; display:block; margin-left:160px; margin-right: 160px;overflow:auto;"><p >111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>