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.
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 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
I've been working on a website with a pretty standard layout, header, content, footer, each being a DIV with a 900px width inside of a page-wide DIV, just like the one described in this question:
Full width background, without a wrapper
Now the problem itself is that whenever the browser window becomes less wide than the specified DIV width (900px) the background of the wrapper seems to disappear, showing the background color of the website itself. This also happens while using the code in the aforementioned question.
This is the CSS code:
#headerwrapper {
height: 229px;
background: url(imagenes/header.gif);
background-repeat: repeat;}
#header {
width:900px;
height:229px;
padding:0px;
margin:0 auto;
}
And this one is the HTML code:
<div id="headerwrapper">
<div id="header">
Content goes here.
</div>
</div>
Any suggestions are appreciated.
you probably can't see the background in the scrollarea. You need to set min-width: 900px; or max-width: 900px; so that the background will be shown in the scrollarea.
If you do not specify width for the #headerwrapper, browser makes it 100% of parent container (div or body). So if width of view area is less than 900px - #header becomes wider than #headerwrapper, so background is not showed for overlapped part. You may add overflow:auto; to #headerwrapper so scrollbars will appear, but i do not think that is a solution. So it is better to add background for the #header or add min-width for #headerwrapper.
P.S. Specifying
min-width:900px;
width:auto !important;
for #headerwrapper should do the trick.
http://magicdynamic.com/fit/
in this demo page i have 2 problems:
1) My footer (I followed those guidelines http://ryanfait.com/sticky-footer/) is causing a scrollbar to appear on Firefox only, and I can't understand the reason
2) div#containerTop is used by the footer css and it fits the whole page height
min-height: 100%; height: auto !important; height:100%
the problem is that I would like to have div#rightContainer with a certain height, i would like it to stretch for almost the whole page, (leaving some pixel between it and the footer). Obviously i tried with height in % and it didn't work.
I tried some CSS i found around but those didnt work too, probably because div#rightContainer is already inside a div container using itself a css height trick.
What can I do without recurring to javascript?
if you want to use % as height you have to put that in every parent element:
<body style="height: 100%;">
<div style="height: 100%;"></div>
</body>
maybe you could set the container absolute, but that not really a proper coding style.
First set div's parent height and width to 100% and set overflow in html tag to hidden as:
html{
width: 100%;
height: 100%;
overflow: hidden;
}
body{
width: 100%;
height: 100%;
}
and then set your div's width and height accordingly......
Here overflow property does the task. If now body exceeds the width/height of actual window size then reduce the size of body tag accordingly.
But this will surely remove the scrollbars.
It worked for me.
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