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?
Related
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!
I need to use css style like max-width:90% and max-height:90% to define image size not overflow the windows. However, this work well on Safari but not work on Chrome. Here is the demo I write on jsfiddle: http://jsfiddle.net/hello2pig/rdxuk7kj/
<style>
div{
padding: 0;
margin: 0;
}
.slide{
text-align:center;
background-size: 100% 100%;
}
.user-img{
max-height: 80%;
max-width: 90%;
}
</style>
<body>
<div class="slide">
<div id="container0" class="container slideDown front">
<div class="image-container">
<img src="http://people.cs.clemson.edu/~bli2/hiOne/image/userImage/1.jpg" class="user-img" ></img>
</div>
</div>
</div>
</body>
If you open this demo in safari, whole image can be displayed, but image overflow the window on Chrome. Any method to fix the problem? Thanks for your help!
Some times using percentages for fluidity in layouts is tricky because you have to deal with containers and border-type things.
You might prefer to use viewport units. You can learn about them on css-tricks and caniuse will show you how well it's supported.
Essentially you can say:
<div style="height: 55vh;">Hi</div>
meaning a div element of 55vh height where 1vh is defined as the value of 1% of the viewport's height. Something that is 100vh will be 100% of the viewport's height.
You need to give an explicit value for the container. This would work:
.image-container {
width: 500px;
height: 300px;
}
In your case, the % is taken from the <html> element in the fiddle.
From MDN:
percentage
The percentage is calculated with respect to the height of
the containing block. If the height of the containing block is not
specified explicitly, the percentage value is treated as none.
I know this can be done with columns, but I have to support IE.
I'm trying to get to a layout whose columns are all fixed width, with the gutters being fluid.
I couldn't get this to work with floats, so I settled on using justified inline-block items:
HTML
<div class="wrapper">
<div></div>
<div></div>
<div></div>
<!-- more divs... -->
</div>
CSS
.wrapper {
text-align: justify;
}
.wrapper div {
width: 100px;
display: inline-block;
}
This works wonderfully, but the last row of divs are all aligned to the left: http://jsfiddle.net/EsHh3/
The only solution I found is to add additional unnecessary divs: http://jsfiddle.net/EsHh3/1/
I feel uncomfortable about this, so I'd like to know if there are any other options.
Please don't tell me not to re-invent the wheel. I have not found any fluid grid system that supports fluid gutters.
For what you want to do, I'm afraid a CSS only solution is not available at the moment, much less if you want it to work in IE8.
Since you want to have (a) items that are in the HTML source as a list (b) a variable number of columns depending on available space (c) column spacing depending on width of container I think the solution you'll need would have to employ at least a bit of javascript.
Consider on of the frameworks proposed in the other answers. One I've worked with and could do what you want is Masonry (or the for-pay bigger brother Isotope). (There's also a non-jQuery version of Masonry). You'll have to come up with a function that when the page is resized, recalculates the desired gutter and reconfigures the framework. Something along the lines of calculating x = how many items would fit per line based on the container width and item width and then dividing the remaining space by x-1.
If you want to stick with the idea of adding extra DIV's to the markup, an alternative would be to listen to resize events, and add DIVs as needed based on the width and how many items would fit per line.
ORIGINAL ANSWER, which failed to fit all the criteria.
Since you're relying on text-align: justified the reason the last line doesn't expand to the full width is because there's no line break at the end of it. So to accomplish that we add an extra element with an wrapper:after {} rule, that is also an inline block with a width of 100% so it guaranties a line break.
See fiddle
The CSS ends up something like:
.wrapper {
text-align: justify;
width: 380px;
margin: 0 auto;
}
.wrapper div {
width: 100px;
display: inline-block;
}
.wrapper:after {content: ''; width: 100%; display: inline-block; background: pink; height: 2px; overflow: hidden}
Note that the pink background is there so that you can see where the element is. You might need to play with the border/margin/padding of that extra element or the wrapper so that content that comes after wrapper doesn't gain extra margin. In chrome unfortunately there's a slight missalignment of the last row items, possibly because of the extra space between the last DIV and the fake element.
Hey I don't know why you want a fluid gutter, but I have a simple grid sample which you might want to have a look and if you want to see the css then click the SCSS on the codepen site. Also, if you are learning then this sample is very good start point for how to make your own grid. Also, to avoid yourself reinventing the wheel you might want to try different grid frameworks out there. Just google css grid frameworks.
you can try this:
.wrapper {
text-align: justify;
width: 380px;
margin: 0 auto;
moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
Updated URL
This is how I would go about it: http://codepen.io/jeremychurch/pen/wmtJz
.container {
display: table;
width: 100%; }
.cell {
display: table-cell; }
.content {
width: 15em;
margin: 0 auto; }
<div class="container">
<div class="cell">
<div class="content">
</div>
</div>
<div class="cell">
<div class="content">
</div>
</div>
<div class="cell">
<div class="content">
</div>
</div>
</div>
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.
Related (possibly duplicate) questions:
How do I achieve equal height divs with HTML / CSS ?
Make Two Floated CSS Elements the Same Height
Hello, every one,
I tried for hours to create a stretchable 2 columns div but without any luck. here is my html code and my css code below it
<div class="two_cols_container">
<div class="two_cols">
<div class="left-col">
test
</div>
<div class="right-col">
test
</div>
</div>
</div>
my css code is
.two_cols_container {
width: 100%;
height: 100%;
}
.two_cols {
position: relative;
margin: 0 auto;
border: 1px solid black;
height: 100%;
height: auto !important;
min-height: 100%;
}
.two_cols .left-col {
/*position: absolute;
left: 0;*/
float: left;
}
.two_cols .right-col {
/*position: absolute;
right: 0;*/
float: right;
}
any idea?
A: either use float OR absolute positioning to make your columns. not both. You can just float both the columns to the left and it should be ok with no absolute positioning.
B: you're big problem is the columns can't be next to each other if both of their' widths are 100%. There's no way they can sit side by side in their containing element when they both take up the whole width. Set the width to at most 50%, but I'd go with a little lower to account for some browser bugs.
EDIT: I agree with Sneakiness, wet the width to something lower than 50%, because the margins and padding have to fit too.
There's
Tables ( you probably wouldn't want to rely on this )
Faux Columns ( the most practical way, faking columns going down using images - see http://www.alistapart.com/articles/fauxcolumns/ )
Border Trick ( a little complex but this only works for solid colors )
Padding / Margin / Clipping ( another complex one I wouldn't recommend )
I'd go with #2. If you need colors that are backgrounds of those columns to go all the way down, set a background on the container of those columns and make sure it repeats vertically, e.g,
div#wrapper { background:url(/images/faux.gif) repeat-y; }
If the columns are floated make sure to have overflow:hidden and a hasLayout trigger for IE like a width.
By the way since you have floats, apply overflow:hidden to .two_cols selector and add this rule:
html, body { height:100%; }
I found this method to be the simplest and most effective of all equal-height two-column layouts. You don't have to fake anything, and it Just Works.
If you mean that you want a fluid two-column layout, you need to set margins for both columns separately to position them both on the page.
You can use div style property to create as many columns you need, with what ever CSS effect you need :
<div style=”width: 100%;”>
<div id=”left” style=”float: left;">
<--! your text here -->
</div>
<div id=”right” style=”float: right;">
<--! your text here -->
</div>
</div>
Source and example : WordPress Tutorial Series - Basics about HTML and CSS