I have a div which has a responsive image in it that is full width.
The height of the image and width adjusts as the browser resizes.
I would like to position another div right below this div that has the responsive image.
I can't seem to get it right.
Here's what I have:
<div style="display: block; width: 100% !important; height: auto; display: block; background: #ffffff; text-align: center;">
<div style="display: block; min-height: 374px;">
<img src="yahoo.png" title="THE RESPONSIVE IMAGE" />
</div>
<div style="width: 100%; height: 10px; background: #D9594C; position: relative;"></div>
</div>
You can see the div I want to position below the responsive image has a background.
Thanks so much for your help!
It's hard to say for sure, but I think there's confusion here around the height and the responsiveness.
Firstly, the reason you get that big gap under your image is because it's parent div has min-height: 374px set on it. The div will expand to fit the image's height, so this isn't really needed.
However, you also talk about how the height and width of the image should adjust when resizing. To do that, you'll need to make sure the image has width: 100% so it is only ever as wide as it's parent div.
I've separated out your HTML and CSS, and added comments in the CSS to try and help.
Hopefully, it's close to what you wanted.
http://jsbin.com/orahuPEh/1/edit
If I am understanding your question right, your problem is that your divs are not butting up against each other properly. Is this correct?
Since you are obviously at the point where things aren't necessarily working right anyway,
I would start by setting the height of the img's parent div to the actual height of the image.
If this does not work use negative margin on either of the divs:
div style="margin-top:-30px;
Hope this helps, let me know if there is anything I can clarify.
Don't give the height of the image div, keep it height:auto, div will take image height. As you mention its responsive image than div will take height as per image height.
<div style="display: block; height: auto;">
working Demo
Related
#banner {
background: url(http://www.lazarangelov.com/wp-content/uploads/2015/12/lazar1-1920.jpg) no-repeat center center/contain;
height: auto;
max-width: 100%;
<div id="banner"></div>
img {
height: auto;
max-width: 100%;}
<img src="http://www.lazarangelov.com/wp-content/uploads/2015/12/lazar1-1920.jpg" alt="">
I have running always into the problem with the responsive images,and i did not find an answer to clarify the problem.
The problem is with image
image {
height:auto;
width:100%;
}
when i add a simple image and style it, it works. when i start a project more complex with a lot of divs and I set the same properties doesn't work anymore. What's the purest explanation for this.
This is because when you add the <img> to the html directly, the browser sets the height of the element to the height of the image you provided (unless otherwise specified). When you add the image as a background of a <div> and set the height to auto, it tries to size the div to the height of the content. However, in this case, there is no content -- only a background that will be the background once the div has some height. An empty div has no height. Therefore, if you want the image to be the background of the <div>, it must either contain some content, or have its height set manually.
I've been beating myself this weekend to get around this one.
I have a site that uses Bootstrap 3.0 and a Carousel with background images, and I've managed to reproduce my question in a small fiddle.
I have a max-heighted div with an image inside. The image will typically be larger than the div (at least in height). I'm using the img-responsive class from bootstrap to make sure that in mobile browsers the image scales down. That is the reason why I max-height the div and don't put a fixed height on it.
My questions is: how can I get the image to vertically align to the middle?
I've tried:
Adding classes display: table and display: table-cell, but a table cell cannot have a max-height.
Aligning things vertically but none seem to work.
Setting a negative margin on the image using javascript, but that makes the div smaller as well as the div uses the image to size itself.
Using css background instead of an inline image. This does not make the div be (at most) as large as the image and doesn't allow responsive growing/shrinking.
Fiddle: http://jsfiddle.net/SabbeRubbish/dZQ26/4/
<div class="carousel-inner">
<div id="frame" class="item active">
<img src="https://www.google.com/images/srpr/logo11w.png"
class="img-responsive" />
</div>
</div>
Can anyone recommend me good and clean ways to get the image to center vertically? Or tell me what the hell I'm doing wrong? :-)
Thanks.
PS: why center vertically? If the page is very wide, there is a large clip area as the image grows with the page. It is nicer to show the middle of the picture rather than the top.
is this something closer to what you are trying to achieve ?
#frame {
border: 1px solid grey;
max-height: 100px;
min-height: 100px; /* Remove this line */
padding: 15px 0px; /* Add this line to always have height on the div */
background-size: cover;
background-image: url(https://www.google.com/images/srpr/logo11w.png);
background-position: center center;
}
http://jsfiddle.net/rrEYJ/
EDIT:
As suggested in the comments you can also use background-size: contain; to have the entire image inside the #frame element. You will probably have to also use background-repeat: no-repeat; in that case.
Check this fiddle: http://jsfiddle.net/rrEYJ/1/
EDIT2:
Based on your comment I did some research and apparently the background-size property can be set in percentages also. Based on this new information see this fiddle:
http://jsfiddle.net/rrEYJ/3/
EDIT3:
The css had a min-height property that's why the div wasn't changing it's height. Check this fiddle: http://jsfiddle.net/rrEYJ/4/
I hope this helps.
Add style for image like this
#frame img {
width:auto;
max-height:100px; }
i want to make the height of the aspx page auto. So i have fixed main div height:auto. But it is not working.
Code:
<div id='Div1' style="background-color: #F5F5F4; width: 100%; height:auto; padding: 15px;">
only top portion of the div is showing the background color.
it has to be overflow: auto in the style attribute, which will render a scrollbar if the content is more than the pre-defined height
You have height: 550px specified on your div, so it will always be 550 pixels high no matter how much content it has. If you would like its height to depend on its content instead, remove this declaration.
Maybe this is not the right stack to ask this question, let me know please if I have to change it.
Basically I'm having a problem with a css background that doesn't take the hole height of the page, and since I have a background image repeating, it doesn't look good at all.
The code structure is something of this kind:
<div class="bg">
<div class="wrap">
<wordpress loop>
</div>
</div>
The background is out the wrapper cause the image is bigger and is mean to cover the 100% width of the page.
CSS:
.bg {
width: 100%;
background: url(imagelink) repeat-y center;
height:???? I SET 500px for display the sample of the issue.
}
.wrap {
width: 960px;
margin: 0px auto;
}
The main line is that the article can be different size, in this sample http://www.villa-frankrijk-provence.nl/de-provence/de-provence-1/ would be something like 3300px, however in other pages it's something like 500px, so I cannot use a fixed number.
I would like the background image to get the hole height, any suggest???? I will really appreciate your help as always :)!
Regards
Remove the height declaration on .bg and add this after #page-text-single (i.e. after <wordpress-loop>) in your HTML:
<div style="clear:both;"></div>
Floating items won't cause their parent elements to resize, but you can force them to do so using a non-floated element directly after the floating content.
Dont specify a height or try height 100%.
Not sure this is what you want:
.bg-contact3{overflow:hidden;}
I have a div with two nested divs inside, the (float:left) one is the menu bar, and the right (float:right) should display whatever content the page has, it works fine when the window is at a maximum, but when i resize it the content is collapsed until it can no longer has any space, at which it is forced to be displayed BELOW the left menu bar, how can I make the width fixed so that the user may scroll when resized?
(css width didn't work, i alternated between floating the right content and not), here is the code:
<div style="width:100%">
<div style="float:left; background:#f5f5f5; border-right:1px solid black; height:170%; width:120px;"></div>
<div style="margin-right:2px;margin-top:15px; margin-bottom:5px; width:100%; border:1px solid #f5f5f5"></div>
</div>
I only need to have this working on Interner Explorer for now.
This should do it (container is the parent div containing that 2 divs):
.container {
width: 1024px;
display: block;
}
You may want to set a width on the containing div and set your overflow property
#containing_div {
width: 200px;
overflow: auto;
}
Also use the min-width property on the page if that makes sense, however that CSS property doesn't really work with IE6, this is usually what I do in that situation (supporting Firefox, IE7, IE6, etc)
#container {
min-width: 1000px;
_width: 1000px; /* This property is only read by IE6, which gives a fixed width */
}
Well, putting a width or min-width property is the way to go.
Now, without an example, or a link of the actual page, it's a bit tricky to answer.
Simply don't make the right div floating. Menu is already floating left of any other content. Just set a left-margin for the right div so the content in that div won't be wrapped around the floating div.
if the two divs are taking up 100% of the available width, could try to use percentage width and display: inline with a further div with a fixed min-width/width (boo IE) inside where required.
this is rather difficult without some HTML to go on
Your containing div should have a width wide enough to contain both inner div's
So if your two inner div's are 300px each and assuming you have no margin/padding on them then you should set the outer div to be 600px;
I'm a bit confused:
Fixed width means the width of a node will not change. Never.
You say you want to scroll when the screen gets too small for your content, so I think you mean the exact oposite of fixed width.
If my assumption is right, you could as mentioned before go for the percentual widths.
Watch out width the suggested "min-width" solution because it is not supported all that well.
<div id="container" style="width:100%">
<div id="primaryNav" style="float:left; width:150px; background-color: Orange">someNav</div>
<div id="content" style="margin-left: 10px; background-color: Red; overflow: auto;">
loadsOfSuperInterestingContentI'mSuperSerious<br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
Seriously
</div>
</div>
This should be pretty cross browser