I have a container <div>:
.containerBig{
width:940px;
}
with many small containers in it.
.containerSmall{
width:auto;
height:100%;
float:left;
}
looks like this: [[][][]]
The small containers are filled with items from a database.
I want the small containers to use the full height but only the width they really need
How can I do this?
the big container always takes up the height of the small container that is having the Maximum height among the small containers.
If it is not taking the maximum height of the small containers then there is a float problem somewhere, This can be elminated by giving:
<div style="clear:both"></div>
either inside the big container or before the big container
See this
Fiddle.
Replace 'abcdefghijkl' with your data. And the division will be stretched automatically to the data width with 100% height.
Related
I have tried different plugins and tutorials, but the problems is usually that they only adjust to the width of the div and/or that the div has size set in pixels and not responsive. But I want the text to always fill and fit the div and adjust the text based on text length and height/width of view, so that there is as little white spaces as possible. I have set the div to 100% both in height and width to fill the view. Anyone found a way to do this? Is it doable in just CSS, or do I need JS as well? Either a plugin, tutorial some guidance would be helpful.
A common way I've 'scaled' text is by just setting the size based on vh or vw. If your div width is based on view width, then you can guarantee that the text will always look the same across resolutions.
.text{
font-size: 0.1vw;
}
I'm trying to have an image auto resize until it fills a div or reaches its initial size. I want it to grow as the div grows but stop when its initial size is reached. I also want it to retain its original aspect ratio the entire time. Is this possible only using css?
Please add some additional detail. If this is as straightforward as you describe, just don't set a width in CSS, and apply a max-width;
img{
max-width:100%
}
and it won't exceed it's natural width. See fiddle - https://jsfiddle.net/6hLz5em2/
I think this is what your looking for.
img{
width:100vh;
height:100vh;
}
My html has images which have their height and width hardcoded ( is a necessity because of the transition implemented on it). But three images are kept within a div. So is there a way to keep the container div to a specific height and width that makes is responsive to all the screen size and resizes ( if needed) the inner images. Any help will be appreciated.
Generally if you set img { max-width:100% , height:auto; } within a container holder , that will make them responsive in every screen view-port.Because they'r taking the size of it's parent container.
Keeping the aspect ratio of a <div> or similar element while being responsive to the parent's size seems to be a common problem. The solution that is widely regarded across the net as being the most elegant one is this:
Maintain the aspect ratio of a div with CSS
Using a wrapper element and defining the aspect ratio via the width and padding-bottom element, both of which are relative to the parent size.
div.wrapper {
width: 30%;
padding-bottom: 30%;
}
Now, my current problem is, that I need to introduce to introduce a max-height to these wrapper elements in order to make sure, that at least two rows of them fit the screen, independent of the viewport size. Adding max-height to the example above limits the element's height, but leaves the width unchanged.
However, an aspect ratio of 1:1 still needs to be maintained, even if the height is restricted via max-height. Also, I would like to have the group of wrapper elements (three or four columns, two rows) in the center of the viewport/parent.
Is there any pure html/css way to achieve this (without javascript)? I would not mind using <img> elements with a source of the desired ratio as I have to apply (background) images to these elements anyway but a universal, elegant solution as for the problem above would be appreciated.
You just have to use below code :
div.wrapper{
height:auto;
width:30%;
}
Then Problem is Solved
I have a grid view and i want it to take the fix width a give it. for the columns that are too long, I want it to break then into rows and merge my fixed width . So far some one suggested putting the grid in div as below.
.container
{
width : 1000px;
height:auto;
float:left;
overflow:hidden;
display:block;
}
<div class="container">
my grid here
</div>
i did this and it successfully fix the width by cutting the remaining three columns that fall beyond the width. Please i need something that will force the grid to merge in everything in to given width by breaking long columns in to rows. Any help would be apprecaited.
May be this will help you...
You can fix the column width like this
<asp:BoundField DataField="" HeaderText="" ItemStyle-Width="5%" ItemStyle-VerticalAlign="Top" />
but if your data is too big to fit in there then you have to make short your data to fit in there.