CSS DIV not expanding when more text is added - html

I have a quick CSS question, i'm hoping that somebody can help me out!
I have a DIV called #ContentPanel and I want it to be able to expand so that it can cater for more text if needed. At the moment if the text is longer than 500px (as specified in the CSS) it flows out the bottom and over the content in the div below. How can I set it up to auto expand and push all divs after downwards.
If anybody has any ideas, please let me know
Here's the HTML
<div id="MainContent">
<div id="MainImage"></div>
<div id="ContentPanel">Text content goes here.</div>
</div>
...and here's the CSS
#MainContent {
position:relative;
height:500px;
width:800px;
margin:0 auto;
background-color: #000;
}
#MainImage {
position:absolute;
top:0;
left:0;
width:350px;
height:500px;
background-color:#000;
}
#ContentPanel {
position:absolute;
height:500px;
top:0;
left:350px;
width:450px;
background-color:#000;
}
Thanks in advance!
Kind regards,
Decbrad

Use min-height instead of height.
Except for IE 6: It has a bug, so that it interprets height like min-height.

As mentioned the problem is that you define a fixed height .. and so the browser adheres to it..
You need to make it more flexible by using the min-height property. However IE does not support it, but due to another bug on how it handles the height (which it expands to cater for the content if more than the defined height) it can be worked around..
A complete solution is
height:auto!important; /*this set the height to auto for those supporting it (not IE)*/
height:500px; /*for IE, all others override it by the previous rule*/
min-height:500px; /*for the ones that support it (all but IE)*/
This, in general, is the solution to such problems.. in your case i see that you use absolute positioning.. if you really need this, and it is not just an attempt to solve your problem, then unfortunately there is no way for an element to adjust its size to cater for absolute positioned elements..

Try setting a minimum height (min-height:) as opposed to a specific, fixed height.

The property you're after is min-height, rather than height.
http://www.w3schools.com/CSS/pr_dim_min-height.asp
This means your element will be at least that high. If the content warrants it, the height will grow past the specified value.

As a second option, you might want to try overflow: scroll; or overflow-x and overflow-y to have a scrollbar appear on the div in case the content doesn't fit.

Personal opinion: to get around IE6's issues with min-height, it's really better to use an IE6-specific conditional comment in your targeting it rather than adding hacks into your CSS.
This is if having standards-compliant CSS matters to you, although tbh that's getting more and more difficult these days thanks to wonky browser support.
<!--[if IE 6]>
#MainContent, #MainImage, #ContentPanel { height:500px; }
<![endif]-->

you need to use min-height css attribute

Related

Make my div go to the bottom of the page

I have literally tried EVERYTHING to get this to work. I've read all other stackoverflow EVERYTHING.
I'm trying to get a DIV to go all the way to the bottom of the page. As you can see in the jsfiddle (via the side borders) it does not. it seems to stop at a height of 357px which is not the full height. I then find out that my div is 100% of the body because the body is also 357px even though I also specified that it should be 100%. Nothing is working and I'm not sure why. In my previous project I never had that problem. I just specified a min-height and when I added more content pass that min-height the div accompanied it. But this time it just overflows for some reason.
html, body {background-color:#F6EBBA;height:100%;position:relative;}
#main-body{
display:block;
height:100% !important;
margin-left:16%;
margin-right:30%;
border:1px solid #dead68;
border-top:none;
border-bottom:none;
bottom:0}
http://jsfiddle.net/R96Lc/
My website had much more content but I had to delete js, css which was not needed and changed the html to so that you could see what I am talking about.
Thanks in advance.
LIVE DEMO
You can declare min-height here:
html, body { background-color:#F6EBBA;
min-height:100%;
position:relative;
}
Remove the height declaration from the #main-body selector.
#main-body{
display:block;
margin-left:16%;
margin-right:30%;
border:1px solid #dead68;
border-top:none;
border-bottom:none;
}
Working fiddle: http://jsfiddle.net/EfrainReyes/5tS8y/1/
If you change your height to auto or just don't define a height, it automatically contains all text that's inside the div. Here is a working version. I've also tidied up your code (just clicked the TidyUp button), so that it is readable.
I have just played with the fiddle, changing:
height:100% !important;
To
min-height:100% !important;
Seems to fix the issue
New fiddle: http://jsfiddle.net/R96Lc/2/
you are declaring
bottom 0
but the div is not absolute, you could also dont declare any kind of height.

Fixed div background

I want to create a layout where I want to display an image to the left and content on the right. The image should stay constant when the content scrolls.
The css I'm using:
<style type="text/css">
#page-container
{
margin:auto;
width:900px;
background-color:Black;
}
#header
{
height:150px;
width:650px;
}
#main-image
{
float:left;
width:250px;
height:500px;
background-image:url('../images/main-image.png');
position:fixed;
}
#content
{
margin-left:250px;
padding:10px;
height:250px;
width:630px;
background-color:Teal;
}
</style>
The HTML:
<div id="page-container">
<div id="header"><img src="someimagelink" alt="" /></div>
<div id="main-image"></div>
<div id="content"></div>
</div>
Alot of time on this site and I have understood that background-attachment:fixed positions the image in the entire viewport and not the element it is applied to.
My question is how do I go about creating that kind of layout?
I do not want to give that image as a background image, as if the window is resized, it might get hidden. I want scrollbars to appear if the window size is less than 900px( my page width) so that the image can be viewed at all times.
That happens with this code, however I would like the image to start at my element instead.
How do I go about doing this??
Thanks in Advance :)
Edited:
I took the advice and added a position:fixed property to #main-image. Using the HTML and CSS as shown above.
Now, I also want to fix the header so that it does not move. Basically, only my content section should scroll.
However, if I add a position:fixed to the header, my #main-image and #content now sit on top of my header.
If I add a margin-top:150px (since my header height is 150px) to the #main-image, it works fine and moves down appropriately.
However if I add a margin-top:150px to the #content, my header moves down by 150px and still sits on top of my #content.
Can someone please explain why this is happening?
Thanks in Advance :)
Take a look at this link:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
You can learn how to position Div's with it.
This will solve your problem:
#main-image {position:fixed;}
EDIT:
I'm not sure of what caused your problem but here is the solution:
#content{
position:relative;
top:150px;
}
My Guess:
I think that happened because when using position:fixed those 2 div's were positioned relative to the the browser window, while the other one was relative to the document itself.
In this link you will see more about positioning and you can test some of these features related to the position property:
http://www.w3schools.com/cssref/pr_class_position.asp
About the fact that one div was positioned over another, you should search for the 'z-index' property. Firefox has a 3D mode so you can see this more clearly:
http://www.addictivetips.com/internet-tips/browse-internet-in-3d-using-mozilla-firefox-11-tip/
Set a min-width on html and body.
Have you tried setting your #page-container to relative and your #main-image container to absolute and setting the position using top, bottom, etc. Then you should also be able to float your #content container to the right.

HTML fixed div with relative div

I am looking for two divs that look like this:
<div style="height:20px;" />
<div style="height:100%;" />
This gives me two divs, one with 20px height, and the other at 100% of the entire screen height, which puts a vertical scroll bar worth 20px. What I actually want is one to be 20px, and the other to be 100%-20px. I know that IE has calc() method, but isn't there a much easier way to do this that will work in all browsers?
#div1 {
height:20px;
position:fixed;
top:0px;
right:0px;
left:0px;
}
#div2 {
position:absolute;
top:20px;
bottom:0px;
right:0px;
left:0px;
}
maybe this is what you need..
EDIT sorry misread the title.. corrected :O how ever if you wish to have multiple div2 the you might need a structure like
<div id="div1"></div>
<div id="div2" style="overflow:auto">[multiple div2 go here]</div>
I tried this out, adding a little sample text to your div, and got rid of the scroll bar simply by not giving the second div a height, and allowing the broswer (both IE and FF) to figure out for itself what hieght to give it.
However, given your comment to George, I think this may not be your fix either. Perhaps you could post a little bit more of your code (or psuedo-code) to give at least one typical example of the second div being replaced.
There is an easy way: Place the first div (20px) inside the second.
EDIT: Since my first answer is not an option for you, you can use scripting to resize the div on the fly. You can caclulate document.height - 20px and apply the result as the height of the "100%" div. CSS does not offer a way to do:
height: 100% - 20px
However, Javascript does:
(via jQuery:)
$( "#big_div" ).height( $( document ).height() - 20 );
It is possible without any Javascript if you can provide a fixed width:
http://jsfiddle.net/mNNeq/47/
The following is an excellent resource to help you with positioning content:
http://www.barelyfitz.com/screencast/html-training/css/positioning/

Unknown black area on my homepage

There is an horizontal scroll bar on my homepage only (http://balloonup.com) and a black border appears on the right?
How is it possible? Thank you for you help
Here is the new solution. Add the inline style float:none to the highlighted element.
in oldcount.css
.home_count {
display: block;
margin: 0 auto;
width: 420px;
}
remove the width
The black "border" is actually the background of your page (#28292B, defined in stylehome.css for the HTML tag). Your problem is that the width of the <BODY> only depends on the window size, not on the content of the elements contained within. You can force the to the minimum width of the page using:
body { min-width: 930px; }
Alternatively, if you want IE6 / Opera 6 support (they don't support min-width) you need to add a dummy <DIV> to force the page width. You can use this as the very first <DIV> of your document:
<div style="position:absolute; top:0; left:0; width:930px; height:1px"></div>
However, there is another problem that stretches your content more than needed and this is caused by that questions counter on the right side. You can fix that by removing that "width" property from the .home_count rule as it's useless.
You may also revise that double .home_count .comma rule as this seems like an error to me.
Anyway, by applying those two modifications described above your page looks fine on FF4 whatever window size (except for the "Log in" button covering the phone number, but that's out of the scope of this question).
In reset-fonts-grids.css, find all the instances of float:right and replace them with float:none.
Try using this:
body{
margin-right:-50px;
}

How do I automatically center a div in IE8 in quirksmode?

I am working with IE8 in quirks mode...
I have styles cascading from my Firefox stylesheet which include:
#container {position:relative; width:1007px; margin-right:auto; margin-left:auto;}
#textbin {width:720px; position:relative; margin-right:auto; margin-left:auto;}
Apparently I'm not doing something right, or auto-margining does not work in IE8.
Is this the case? If so, how can I get around this limitation? I tried no positioning, absolute positioning, and even adding relative position to my IE8 stylesheet. Furthermore, when I manually center the div, IE8 adds margin to the bottom of the page...
by the way, I am a beginner here, so if more info is needed please let me know!
The old-school hack-y way to do it was to add text-align:center to the parent of the div you want to center. Of course you'll need to then specifically declare a text-align property for the child elements if you don't want them to be center aligned, as text-align is going to be inherited by child elements.
This will work for IE5 quirks and higher.
The css:
body, html {
width:100%;
}
#yourdivname {
margin:0px 50% 0px 50%;
//this can be removed, but is just for test sake.
background-color:#bbb;
width:100px;
height:100px;
}
I hope this will help, kind regards Bert Jan.