This is my code ( if the image has an height higher than 100px then show only the first 100px of the image and hide the rest ):
HTML:
<div>
<img>
</div>
CSS:
div{
max-height:100px;
overflow:hidden;
}
Now, I need to add a border of 5px:
img{
border:solid 5px #555555;
}
but if the image has an height higher than 100px, the bottom border doesn't appear. How can I resolve that ?
That's because the div's overflow is hidden. Instead, you should set the border on the div. This way, the div will only take up the height of the image but after 100px, it'll keep the border but the image won't show past that. You will need to adjust the width of the div to fit the image, though.
<span><img src="" /></span>
span{
max-height:100px;
border:solid 5px #555;
overflow: hidden;
display: inline-block
}
img {
width: 200px; /* image width */
height: 200px; /* image height */
}
Using a span with display: inline-block you no longer need to set the width of the outer container.
Issue: when image size is less than 100px, there is a small gap between the image bottom and outer container.
demo
Take a peek if this is what you need:
(1st try) http://jsfiddle.net/Vn4PM/
(last try) http://jsfiddle.net/Vn4PM/11/
HTML (with sample graphics):
<div>
<img src="http://www.dummyimage.com/100x150/ffff00/fff" />
</div>
<div>
<img src="http://www.dummyimage.com/100x50/ffff00/fff" />
</div>
CSS:
div {
max-height: 100px;
border: solid 5px #555555;
overflow: hidden;
display: inline-block;
}
img { margin-bottom: -5px; }
--
display: inline-block, and border added to div so border will wrap around the image
margin-bottom added to img so extra gap is hidden
Related
I'm searching for a solution to get the child element 100% width of it's parent.
The problem: The parent has overflow-x: scroll. Text will insert a scrollbar. Now I want a child to get (the new) width of it's container.
Requirements: Pure CSS solution; no further HTML markup; no fixed width.
width: 100% will set it only to the init state width of the container.
Here is a fiddle: https://jsfiddle.net/y166e3nb/
I know it was told NOT to use more HTML markup, but the chosen answer have some issues, for instance, if you extend the text of the parent, or if you change font-size attribute, the chosen solution will not work, since it's doing a calc with a static 330px!
So I decided to post what I think to be a better solution:
.parent {
background: skyblue;
width: 350px;
overflow-x: auto;
padding: 40px 20px;
}
.parent > .content-wrapper {
display: inline-block;
white-space: nowrap;
min-width: 100%;
}
.parent > .content-wrapper > .child {
background: springgreen;
white-space: normal;
}
<div class="parent">
<div class="content-wrapper">
This is some very very very very very long text to extend .parent div horizontaly, in order to see .child divs extending
<div class="child">
This .child div should extend horizontaly
</div>
</div>
</div>
Instead of putting the text directly into the div .parent, we can create another div involving the text (.content-wrapper in the above example).
Then we can use 'display: inline-block' in this new div, to make it respect its content width, not the parent's one!
...in other words...
By adding display: inline-block to .content-wrapper, it'll force this div to have the width of the largest horizontal content inside it, in our case, the text!
Now if we add our .child div inside our new .content-wrapper, the .child will automatically fill the entire width of the .content-wrapper, even without using 'width: 100%', because every div element have by default 'display: block', which makes them have the width of its parent.
We should also use 'min-width: 100%' in our .content-wrapper, just to prevent it to have a width smaller than .parent's one, in case of text width being smaller than .parent's width.
I wasn't sure if you wanted the child to be the width without scrolling or with scrolling, so I came up with both:
Without Scrolling:
.parent {
background: skyblue;
width: 350px;
overflow-x: scroll;
white-space: nowrap;
padding: 40px 20px;
}
.child {
background: springgreen;
width: calc(100% + 40px);
padding: 0 0 0 20px;
margin: 0 0 0 -20px;
}
<div class="parent">
I'm a wide parent. My text-content will wrap my box.
My child should get my new size as 100% width.
<div class="child">
I would go over the full width if I could.
</div>
</div>
https://jsfiddle.net/y166e3nb/2/
With Scrolling:
.parent {
background: skyblue;
width: 350px;
overflow-x: scroll;
white-space: nowrap;
padding: 40px 20px;
}
.child {
background: springgreen;
width:calc(100% + 330px);
padding: 0 0 0 20px;
margin: 0 0 0 -20px;
}
<div class="parent">
I'm a wide parent. My text-content will wrap my box.
My child should get my new size as 100% width.
<div class="child">
I would go over the full width if I could.
</div>
</div>
https://jsfiddle.net/y166e3nb/3/
The calc() statement in each needs to be 2x the value of the padding.
I'm searching for a solution to get the child element 100% width of it's parent
.parent {
position: relative;
}
.child {
position: absolute;
}
This should fix it. But be aware, the parent width is 350 + 20 left padding + 20 right padding, so the child will only be 390px.
I've been experimenting with display:inline-block on div elements and I'm trying to work out why my two inner div elements are not displaying on the same line. Both divs are set to width of 200px and their parent div is set to 400px.
If I set the inner divs to float left instead of using inner-block it works as expected.
The code snippet is as below:
Note: that I've set box-sizing to border-box. So I assumed this would make both inner divs exactly 200px even with the 1px border.
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0
}
.container {
width: 400px;
}
.inner {
border: 1px solid black;
padding: 10px 0;
width: 200px;
display: inline-block;
}
<h1>Why does this display on two lines?</h1>
<div class="container">
<div class="inner">Testing border box property</div>
<div class="inner">Second div</div>
</div>
You could remove the white space between inline-block elements by adding font-size:0px; to parent element (.container) then add font-size (e.g 16px) to child (.inner) elements.
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0
}
.container {
width: 400px;
font-size:0px;
}
.inner {
border: 1px solid black;
padding: 10px 0;
width: 200px;
display: inline-block;
font-size: 16px;
}
<h1>Why does this display on two lines?</h1>
<div class="container">
<div class="inner">Testing border box property</div>
<div class="inner">Second div</div>
</div>
You need to remove unnecessary spaces between your HTML tags or reset font-size to 0.
check it here :
Fighting the Space Between Inline Block Elements
There is more solutions on the link above.
Plus you can use display:block; float:left instead.
The border. The border will add 2 pixels to each box, so the contents are actually 404 pixels, and it does not fit within the 400 pixels wide div.
There's not enough space in the container div. Change the container div to 404px to account for the left and right sides for each of the inner divs
I'm trying to align vertically a div inside a container with a height defined. I'm following the guide of http://www.vertical-align.com/, but I'm facing some issues.
According to the website, if I use this css with for this code:
#containingBlock {
height: 200px;
position: relative;
overflow: hidden;
border: 1px solid red;
}
#containingBlock > div {
position: absolute;
top: 50%;
border: 1px solid green;
}
#containingBlock > div > div {
position: relative;
top: -50%;
border: 1px solid orange;
}
<div id="containingBlock">
<div>
<div>
This should be placed in the middle
</div>
</div>
</div>
Fiddle available here
I should obtain a text perfectly in the middle. But this doesn't happen because the top: -50% doesn't work. According to Mozilla dev the top property + % value should be based on the parent's height, which has the same height of its child automatically in this case. But the "automatic wrap height" does not seem to be take into consideration. If I specify a explicit height for the parent div (I mean, the first one nested), everything seems to be ok, but I would like it to take the height of its child automatically! What's wrong with this?
If the height of the block to be positioned is known you can affect the correct positioning with negative margin (i.e 50% of the known height).
If it is not known you can affect it with a CSS transform as follows
-webkit-transform:translate(0%, -50%);
This moves the object vertically half it's own height...and so on
HTML
<div class="containingBlock one">
<div>
This should be placed in the middle
</div>
</div>
CSS
.containingBlock {
height: 200px;
position: relative;
border: 1px solid red;
}
.containingBlock > div {
position: absolute;
top: 50%;
border: 1px solid green;
-webkit-transform:translate(0%, -50%);
}
JSfiddle
here's a fiddle: http://jsfiddle.net/dC22r/4/
you have to set an height to the div that has to be centered then give it top:50% and subtract half his height with a negative margin.
I want to dynamically adjust the width's of my child div's based on the heights of the other children div. It's hard to explain, so I'll just show some pictures...
In this first image, the black square is my "parent" div. It contains other divs with varying heights. The blue div's height is static, but must be floated to the right. The red div's are the ones I am having problems with. They should automatically adjust their own width if they occur below the bottom of the blue div.
The second red div with a small height. See how the last div fits the width of the parent div.
The second red div with a larger height. Now both the bottom 2 div's widths fit the parent div.
One more example...
I am not sure if I should be using special positioning, or how to structure the div's. It will be fine if there is a bit of space below the blue div, I just want to have an equal amount of space between the red div's.
Here is kinda what I have set up. See the yellow div's are hiding behind the right blue div: http://jsfiddle.net/MVzHS/1/
#floatRight {
width: 100px;
height:200px;
background-color:blue;
position: absolute;
right:10px;
top:10px;
}
Solution: http://jsfiddle.net/MVzHS/3/
You can do it by using float: right on the blue box and setting the overflow: hidden on the red boxes.
Check out this jsFiddle for an example.
If in the source you add the blue div first and float it right, this should do what you want/need it to do?
.black {
width:958px;
padding:10px;
border:1px solid #000;
float:left;
}
.blue {
width:248px;
height:400px;
border:1px solid #00f;
float:right;
margin:0 0 10px 30px;
}
.red {
border:1px solid #f00;
margin:0 0 10px;
}
http://jsfiddle.net/seemly/BTxgJ/
The only "issue" I found with the fiddle provided is that the divs themselves kind of intersect each other, but the content within them wrap as they should. I am unsure how this will display if using borders, background colours or background imagery. Does this help at all?
HTML
<div id="parent">
<div id="blue">Blue content here</div>
<div id="red">Red 1 content here
<br>more content
<br>more content
<br>more content
<br>more content
<br>more content</div>
<div id="red">Red 2 content</div>
<div id="red">Red 3 content</div>
</div>
CSS
#parent
{
border: 1px solid black;
height: 100%;
}
#blue
{
float: right;
border: 1px solid blue;
height: 100px;
margin-left: 10px;
}
#red
{
border: 1px solid red;
overflow: hidden;
margin-bottom: 10px;
}
JS Bin available here: http://jsbin.com/irubuy/5
I have a simple child div nested inside a parent div, like so...
I am trying to understand why I cannot move the child div down (ex. 25px), in relation to the parent div, by using margin-top: 25px, unless I give the parent div a border. I am thinking that the child div is using the border as a reference point, which is why the margin-top actually works once the border is applied. That is all fine and dandy, but in the specific example I'm working on, the parent div has a background image, and I don't want to give it a border. But without a border, the child div won't move!
<body>
<div id="main">
<div id="child">
</div>
</div>
</body
#main {width: 500px;
border: 1px solid black;
height: 500px;
background-color: red;
margin: auto;
margin-top: 200px;
}
#child {width: 100px;
height: 100px;
background: blue;
position: relative;
top: 5px;
}
I had this issue few days ago , I resolved it by adding a small padding (1px) to the parent div , and then use margin on the child div.
You should rather give display:inline-block; property to child div.