Looking for some assistance if its possible to do a fluid height image in CSS.
Ex) http://jsfiddle.net/VDB7A/20/
I want to have the box div at a set height, but dynamically size the container to show all the text at the bottom without going over the set box height. Basically this is for a fluid width site, where I want to cap the box height and auto adjust the image size to show all the text without going over the height.
Thanks!
Figured out my own answer:
I need to scale everything on width. So I need to put a min-width and max-width on the container. Then I need to put width:100% on the image. Height will always be auto.
http://jsfiddle.net/VDB7A/27/
I need to scale everything on width. So I need to put a min-width and max-width on the container. Then I need to put width:100% on the image. Height will always be auto.
http://jsfiddle.net/VDB7A/27/
Related
I'm trying to achieve the below layout.
I have a region that, ideally, fills most of browser's height; I want it all within view, with a potential minimum height. On the left is an image that stretches to fill the area, with the aspect retained, but will not go beyond a maximum width. On the right is a div that takes up the remaining space.
I can't figure out the HTML and CSS flex-box styles that would achieve it.
I'm trying to get my textarea to fill the full width of the div it is wrapped in, but even when using width:100% and display:block . At the start it does appear to be stretched but when it is focused it drops down again. i just can't seem to be able to have it stretch the full width when a user goes to type into it.
Really head frying, because I cant set it to be a specific width, as the wrapper width varies with monitor size.
any ideas?
Make sure your parent div has a height and width set. Otherwise height: 100% and width: 100% will not work.
See here for example:
http://jsfiddle.net/wXs92/
i have problem like this.
#container_index{
width:100%;
height:1300px;
background:url(../img/green%20pattern.jpg);
}
in the code above i am set height 1300px and nothing problem, i mean image can display and can repeated.
but, if i change the code be (with height auto, image can not display):
show me the way to solve my problem. i want the image display without set height.
thanks
#container_index{
width:100%;
height:auto;
background:url(../img/green%20pattern.jpg);
}
When you use height: auto; and div is empty, its height will be 0px, meaning, the background won't show up. You might want to set a min-height.
Without setting height you can not display the image in table or div,via background coz height is the element which do make sure that there is something which is to be displayed.either give the height of its container or of the image..
if you want to show this image without height you have to call this from html source.this will work fine it doesn't require height and width element
You should read this for more information on images with height and widths.
Height and width
hope this will help
In an empty container you will not see any background image. If you add contents up to the height of bg, you can see the full image, otherwise you will see only the content-height of that bg. If you set a 'min-height' property with the height of bg, you will be able to see the bg without any contents in the container.. Hope you understand :-)
Regards..
I have two divs as follows:
fluid width content
fixed width content
I'm trying to make it so that when the available screen width is > 600px, they'll appear side by side. When the screen is resized below that, the second div needs to drop down below the first one. In either scenario, they need to take up all available width (so when the second one drops down I can't have a 200px padding/space on the right of the first one).
I believe it's possible to do this with JS and/or css3/media queries, but I'm wondering if there's a simpler solution?
To put it in context, I need to design a fluid page that will be displayed via an iframe. I will not be able to control the width of the iframe, so need my two column content to be fluid.
Apply a min-width to the div that's not floating. If the browser can't satify the min-width with the floating box to the side, it'll drop the floating box down and the fluid width box will fill the entire width, until it gets shrunk to its min-width again in which case it overflows the body.
Try this:
div
{
min-width:100px;
max-width: 150px;
background-color:yellow;
float:left;
}
min-width and max-width
How do I make a div that has a variable width? So I want a div to span a certain width inside a container and if there is another element in it, the div will automatically fill a portion of the of the width.
Don't give the div a width and it will fill 100% of the horizontal space. Add margins to it (as either % or px) and it will shrink accordingly.
It sounds like you may be asking how to have something inside the div force it to grow wider with its content. I don't think that's possible without javascript.