Ok here is the site:
http://danberinger.com/
If you view the source for the HTML and CSS you can see that I have set the height of the div in the middle to 100% and given it an overflow property value of hidden, it is called "main_content". I realized that the height value is having no effect on what is displayed, the overflow value of hidden is allowing the background color of the main_content div to extend down to the footer. I guess I am wondering what the best way for me to achieve a variable div height on each page or "main_content" while maintaining the background color. Am I doing this the right way or am I using some kind of css hack that is not the proper way to do it. All insight is welcome. Make sure to take a look at the source HTML and CSS before giving me an answer.
The easiest solution would be to assign the background color to your body element. Something like this:
body {
margin: 0;
padding: 0;
width:100%;
height:100%;
background-color:#cccccc;
}
This will also eliminate the few pixel white border around the edges, if you want to maintain that, take out the margin and padding declarations.
I might have misunderstood what you want, but try this:
Replace div#intro_container with:
div#intro_container {
width:830px;
margin:auto;
overflow: hidden;
background-color:#333333;
}
And remove the height property from div#messagebox.
I prefer to do in this way:
In the content of div 'main-content', add
In your case it was
<div id="main_content">
<div id="navigation">..</div>
<div id="intro_container">..</div>
</div>
It cam be rewritten as
<div id="main_content">
<div id="navigation">..</div>
<div id="intro_container">..</div>
<div style="clear:both"></div>
</div>
AFAIK This is a standard way to achieve what are you doing.
Related
I want a centred block using auto left/right margins, but I also want it to have a background colour. Since background colour is not applied to the margin area of a block, I'm using a block with the background colour set, and then an inner block with the auto margins.
I don't like this, since it requires extraneous markup. Is there a technique to achieve this while just using a single block?
Update: to clarify, I want to achieve the same thing with only one block, not two; in the example below I want to drop the inner div.
Bare bones code I'm using at present:
<section id="example">
<div id="inner">
<h1>Example</h1>
<p>Example content.</p>
</div>
</section>
<style>
#example {
background-color:#ccc;
}
#inner {
margin:0 auto;
padding:10px 0;
width:500px;
background:white;
}
</style>
Couldn't find anything searching the site or Google.
Thanks in advance,
Nigel
Because you want the div#inner to be centered, it will always be in a parent. In this case another element #portfolio, but it could also be body. This solution would be perfectly acceptable.
You could try adding negative margins and some paddings, but you would complicatie things allot. What you have now makes sence to me, one element that fills the width and gives the full a background color, and one element which gets positioned in center
If you have a fixed set of block elements, you can set the margin on all the children of #example. Here is a jsFiddle.
Problem is what you save in HTML markup, you waste in CSS and it is under the assumption that you only have block children. Adding, for example, a <span> tag would break this flow, they would themselves need to be wrapped in a block container.
HTML
<section id="example">
<h1>Example</h1>
<p>Example content.</p>
</section>
CSS
#example {
background-color:#ccc;
}
#example > * {
width: 200px;
margin: 0 auto;
}
How to force browser NOT to calculate the size of the content based on some absolute positioned elements?
I am looking for something like https://developer.mozilla.org/en-US/docs/CSS/-moz-stack-sizing
For a simplistic use case please view http://jsfiddle.net/edzis/5nnYk/
html, body, .container {
/**
https://developer.mozilla.org/en-US/docs/CSS/-moz-stack-sizing
DOES NOT WORK
**/
-moz-stack-sizing: ignore;
-webkit-stack-sizing: ignore;
stack-sizing: ignore;
}
This may not be an exact match to what you are looking for, but maybe it can present some ideas.
If you can change the html code, you could make use of "overflow: hidden" by using a second absolute positioned layer and let the "container" div only be responsible for the dimensions where you want to have scrolling.
NB: There is a possible issue here if the initial window width is small and the container causes scrolling, the elements off screen may not be rendered and will require refreshing.
Here's an updated jsfiddle link: http://jsfiddle.net/5nnYk/24/
code e.g:
<div class="panel">
<div class='left'>LEFT</div>
<div class='right'>RIGHT</div>
</div>
<div class='container'>
</div>
Then set the panel class to:
.panel{
width:99%;
height:200px;
position:absolute;
z-index:1;
overflow:hidden;
-webkit-transform-style: preserve-3d;
}
BTW: I set width to 99% instead of 100% because it fixes another issue that sometimes rises and causes a horizontal scroll. Another way to solve this is use left: 0px; on the panel.
Here is my code:
<style>
#defCalTree
{
overflow: scroll;
overflow-x: hidden;
}
</style>
and
<div class="defCalTree">
<div id="treeboxbox_tree" style="width:80%; height:100%;background-color:#f5f5f5;border :1px solid Silver; "></div>
</div>
and
to the treeboxbox_tree I attach a dhtmlx tree. But, the scroll bar which is shown I think doesn't refer to the tree. If the tree consists of many items, the div is getting bigger. It should remain the same size, and by using the scroll we will get to every item. What am I doing wrong?
In css you are using # which is selector for id and in html you are using class. so how your css will work. is this your problem or some thing else check it.
Try to either:
Amend <div class="defCalTree"> to <div id="defCalTree">
OR
amend #defCalTree to .defCalTree
You need to specify the height of the #defCalTree div. As it is now, it is growing in size to wrap its contents, which is the intended behaviour.
I have a container background defined in CSS like this;
.container {
background:#fff;
margin-left:auto;
margin-right:auto;
position: relative;
width:970px;
border:1px solid #000;
padding:5px 10px;
}
The problem is I have a jqGrid put in the bottom of the container (near the bottom edge) and when its initially drawn it does fit inside the container panel and looks correct. Something like this (please pardon my non-l33t graphic skillz):
alt text http://img67.yfrog.com/img67/7162/screenshot002f.jpg
But then when I populate the grid with rows it outgrows the container and it looks really tacky, something like this (I circled the original container background edges):
alt text http://img80.yfrog.com/img80/5419/screenshot003fr.jpg
I am sure its something I am doing wrong with the CSS. Any advice would be appreciated.
EDIT: The problem isn't the width its the height of the container being overlapped by the new height of the now populated grid
I've seen this happen many times when you have floats inside. Add a clearing div just before closing container. You should always clean up after floats.
<div class="container">
<div id="nav" style="float:left;">
...
</div>
<div id="grid" style="float:left;">
...
</div>
<div style="clear:both;"></div> <!-- this does the trick -->
</div>
I disagree with adding float to container. Although this will work, having unnecessary floats will give you more problems down the road. Only use floats where necessary and clear it when done floating.
Also in my experience, overflow doesn't mean anything here unless you define height. I don't think setting overflow on container fixes the issue here. Correct me in the comments if I'm wrong.
.container { overflow:hidden; }
assuming you are dealing with floats, this is one way to make the container actually contain them.
Your container is fixed width and won't grow. What you're probably looking for is min-width. In other words, change:
width:970px;
to:
min-width:970px;
As a note, IE 6 and 7 treat width as min-width, but other browsers do not.
I think you need this in your CSS:
overflow: auto;
Depending on your float situation for the container and the inside grid, you can do a number of different things. You might be able to get away with just adding a clear,
clear:both;
You also can float the parent. This is called, setting a float to fix a float. So if your grid has a
float:left;
Then you can just add
float:left;
to your container css. I really like the Complex Spiral article on containing floats.
I've used the last example on this page for equal height columns.
http://www.ejeliot.com/blog/61
The problem is, when you click an internal anchor link, the content is shifted up, and the overflow is making the top part of the page disappear.
For example, click this link
http://www.noosanativeplants.com.au/~new/articles/botany-words/
Then click a letter to jump to that section. You will notice what I am describing.
Is there a way to combat this, or is this a short coming of the technique? Do you recommend I use the background image technique for faux equal height columns? I'd rather not use this, as one page has a different background, and would require a bit of reworking to do the background for this page.
Thanks
I really recommend you to use the fail-safe faux columns method. If you are not a layout expert (no offence, seriously), stay away from the padding/margin/overflow magic and the one true layout technique. The latter is elegant but it can cause unwanted side-effects if you are to do heavy JS/DOM manipulations and all (see the problems listing).
As slink said you have two overflow: hidden rules in your css:
#main-container {
overflow:hidden;
}
And
#content {
overflow:hidden;
}
If you disable/remove these you will able to use your scrollbars again. Unfortunately the padding / negative margin "hack" will be visible. I recommend you to completely remove this solution and use faux columns. Faux columns background can be added to your #main-content or even the #content div (not just like the example in the ALA article that sets the background image to the body tag).
Good luck!
Update: Sorry, let me correct myself: to use faux columns in your case it is better to set the current background to the html element and the faux background to body element.
Assuming your equal height columns are the left menu and right content in that example, you could just use a margin-left property on the right-column and set the background colour of the container to the desired left-column colour. This would assume your right content always has a greater height than the left, but there are other ways round this.
#container {
width: 960px;
background-color: #000;
}
#menu {
float:left;
width: 240px;
}
#content {
float:right:
margin-left: 240px;
background-color: #fff;
}
<div id="container">
<div id="menu">
<ul>
<li>Home</li>
</ul>
</div>
<div id="content">
stuff goes here
</div>
</div>
The problem is caused by two overflow: hidden; rules defined on elements #content and #main-contaniner.