I have got this HTML and CSS structure:
HTML:
<div id="out">
content
<div id="in">
content2
</div>
</div
CSS:
#out {
width: auto;
}
#in{
width: inherit;
}
So I don't want #in to inherit the width: inherit, but the pixel amount that comes from #out.
Is this possible in CSS or in LESS?
If so, how?
If you want the width of the inner div to be the same as the parent, use width: 100%
Tips:
Don't specify the 'width: auto' in this case, as that's the default. (Only use if you need to overwrite another declaration.)
If you use 'width: inherit' is uses the same CSS value as the parent - in
this case, 'width: auto'. So it's actually also a waste of time writing that!
Related
I have been using the following css to make my images responsive
img{
max-width: 100%;
height: auto;
}
However it doesn't seem to work when the img is within an <a> tag ie.
<img class="fbicon" src="images/fbicon.png" alt="main">
Why is this and what could be a way around it?
Here is the complete code - (it is responsive on the fiddle but not on the site):
https://jsfiddle.net/bLchqb9u/
use width insted of max-width , find the working fiddel : https://jsfiddle.net/5n4rarrL/
The 100% always applies to the value of the parent element. By default <a> doesn't have a 100% width (it's would just be as big as it's content). You would have to change the behaviour, like this:
<img class="fbicon" src="images/fbicon.png" alt="main">
Demo here:
<div style="width: 300px">
<a href="#" style="max-width:100%">
<img style="width:100%;" src="https://upload.wikimedia.org/wikipedia/commons/1/17/Gustave_Caillebotte_-_Paris_Street%3B_Rainy_Day_-_Google_Art_Project.jpg" alt="main">
</a>
</div>
A percentage in max-width is resolved with respect to the width of the containing block.
Then, the only case where your code may not work is
If the containing block's width depends on this element's width, then
the resulting layout is undefined in CSS 2.1.
That should only happen when the width of the containing block is calculated with the shrink-to-fit algorithm. For example, floats, absolutely positioned or inline-blocks with width: auto.
div {
float: left; /* Shrink-to-fit width, depends on the content */
}
img {
max-width: 100%; /* Depends on the containing block */
height: auto;
}
<div>
<a href="#">
<img src="http://lorempixel.com/1000/200/" />
</a>
</div>
The solution is preventing the containing flock from depending on the content. Make sure it has an explicit width.
div {
float: left;
width: 100%; /* No longer depends on the content */
}
img {
max-width: 100%; /* Depends on the containing block */
height: auto;
}
<div>
<a href="#">
<img src="http://lorempixel.com/1000/200/">
</a>
</div>
You should make the <a> element a block container.
Like this:
a {
display: block;
}
img{
width: 100%;
height: auto;
}
<img class="fbicon" src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2_1x.png" alt="main">
This way the <a> tag will behave as a container and the image will stretch to the size of that.
Tried display and width suggestions, but still the the images were not responsive for some reason (while another img was), even though it worked on jfiddle. Finally, the new srcset came to the rescue,
<img class="fbicon" src="images/fbiconlarge.png"
srcset="images/fbiconlarge.png 1380w,
images/fbiconlarge.png 640w,
images/fbiconlarge.png 320w"
However must say, now its a bit too responsive - ending up too small on the smallest screen. Will post a separate Q. THanks #Oriol, Hasan, Hans, CodeiSir
Site can be seen here: http://storagestaging.com/pricing/
Question is with regards to the four column pricing grid.
I have a four column pricing grid. Each column has a different height (due to more or less content). I'd like to get all four columns to fill the entire length of the tallest column / fill the entire parent div.
I've tried display: table and display:table-cell, and adding height=100% to parent and child divs. Sometimes I get closer, sometimes I just make it worse. Any help is very appreciated.
Thanks!
In case you do decide to use divs, a JS (this is a jQuery version, if you need vanilla JS lemme know) solution is possible:
var max = 0;
$('.myDiv').each(function() {
if ($(this).height() > max)
max = $(this).height();
});
$('.myDiv').css('height', max + ' px');
You can do it this css, just the height of the parent div would need to be a fixed value.
See this example here
HTML
<div class="outer">
<div class="inner a"></div>
<div class="inner b"></div>
</div>
CSS
.outer{
background: #000;
width: 500px;
height: 200px;
}
.inner{
display:inline-block;
width: 49%;
height: 100%;
}
.a{
background-color: green;
}
.b{
background: red;
}
To fulfill my request I just manually set the hight of the parent and child sections.
I want to center some text in a fixed height div.
I've made the following fiddle
<div style="height:180px;border:1px solid black;vertical-align:middle;">
<h1 style="vertical-align:middle;">Contact</h1>
</div>
<div style="height:180px;border:1px solid black;vertical-align:middle;">
<h2>Welcome to the</h2>
<h1>AAA</h1>
<h4>system</h4>
</div>
I've tried various options of the vertical-align:middle applying it to the different elements but it doesn't seem to work.
I did see other questions where the line-height was set to the same height as the font-size but in the second example I have multiple lines of text at different heights.
Is there a good way to do this?
Used to display table-cell
as like this
.parent{
height:180px;border:1px solid black;vertical-align:middle;
display:table-cell;
}
Demo
Don't use to inline css write a class in external css and define css
Vertical alignment always comes with some trouble. You should apply that css property only to table (td) elements and inline elements, not block elements like divs.
To position something in the middle you can use very simple solution - by using absolute positioning.
Create child block and set it's position to absolute, move it 50% from top, and set margin-top to negative value with amout equal to half of parent's height. Set your parents position to relative.
#parent {
position: relative;
height: 180px;
}
#child {
position: absolute;
top: 50%;
margin-top: -90px;
}
<div id="parent">
<div id="child">
<h1>sample</h1>
<h2>sample</h2>
</div>
</div>
I have defined a grid with columns widths to fit my desired content.
Say, I then wish to place an element using the grid so I have it span 3 of the 9 columns for an approx width of 33.3%
I then wish that element to be the same height as it's width.
This is the point I always get stuck. If I use Compass Susy's columns() function it sets the height to 33.3% which is exactly what it is meant to do but obviously it's not what I want.
How do people work around this to get the desired outcome?
Kind regards,
Neil
No need for JS. It's possible with a simple HTML and CSS Trick:
HTML
<div class="container">
<div class="item"><div class="content"></div></div>
<div class="item"><div class="content"></div></div>
<div class="item"><div class="content"></div></div>
</div>
Relevant CSS
.container{
position: absolute;
}
.item{
height: 0;
position: relative;
padding-bottom: 33%;
}
.item .content{
height: 100%;
width: 100%;
}
jsFiddle example: http://jsfiddle.net/opherv/hjVSM/
Try to resize to browser and see how it behaves.
The Idea is that you set the width/height ratio using the element's padding-bottom.
Thnanks for your answer #OpherV but #rctneil didn't even mention JS.
He (like me) is looking for a Sass/Susy solution.
Is there any Sass mixin which sets the height of an element which has a dynamic width equal to it's width?
maybe somewhat of an odd question but I'm stuck nevertheless.
I have an element structure like this:
<div class="one">
<div>
<h3></h3>
<div class="two"></div>
</div>
</div>
and this CSS:
.one {position: relative; height: 50px; }
.two {position: absolute; height: 500px; }
Is there a CSS way to make sure .two is fully visible, when I cannot use min-height or height on any element?
Thanks for help!
UPDATE
Here is an example: tab view
Unfortunately, since .two is absolutely positioned, there's no way to get the relatively-positioned .one to expand automatically to accommodate the size of its child. If all you need is for .two to be visible, though, you can apply an overflow: visible; style rule to .one, which will allow .two to expand beyond the bottom edge of its parent.
Nopez not possible with pure CSS.
Because the element is absolute positioned to container has no idea as to how high it is.
You could use a Javascript solution though. Or just give the container a height.