I have a #container div that is set to height:100%; width:100%; of the document body. Inside the #container is div#box2 that is set to height:100%; width:200px;. When I add lots of content to div#box2 the div height overflows the document body and a scroll bar appears.
How can I make div#box2 100% the height of the #container (and thus 100% of document body) and not overflow with a document scrollbar when content is added?
See this fiddle: http://jsfiddle.net/aDdTe/
Essentially, div#box2 should get the scroll bar, not document body.
update
I've edited my fiddle to better represent my actual dev scenario. The new fiddle is here: jsfiddle.net/Nszjv and is working as expected in safari however firefox does not render the scrollbar for some reason.... any ideas on this?
You need to use overflow property in your css.
#box1{
display:table-cell;
}
#box2{
overflow:scroll;
display:block;
height:500px;
width:200px;
}
Here is the code on jsFiddle:
http://jsfiddle.net/gDKKr/
Related
Have a look at, http://thomaspalumbo.com
I have this CSS for my website's container:
.graybox {
padding: 0 30px 30px 30px;
background: #ededed;
position:absolute;
left:0;
right:0;
}
Then I have a container on top of that to center that info.
The .graybox container spreads the width of the page like I want but now my footer div is hidden, according to firebug is it actually behind? And up on the page?
Is there a fix for this?
While I'm here can anyone explain the white space on the right side of the page. It comes into effect once the page is resized smaller.
You can use the CSS z-index property to make sure your footer is in front of the content. Z-index only works when the element is positioned though. So make sure you add position:relative to your footer
#footer{
position:relative;
z-index:999;
}
Read more: http://www.w3schools.com/cssref/pr_pos_z-index.asp
EDIT
Just checked out the code of your website, and I don't understand why your graybox is positioned absolutely, this will only make things more complex. The same goes for your menu, why position it absolute, why not just add it in the right order in the HTML in the first place?
EDIT
If you want to center your content but with a background that has a 100% width then you can simply add a container div like so:
HTML
<div class="container">
<div>lorem ipsum....</div>
</div>
CSS
.container{
background:red;
}
.container div{
width:400px;
margin:0 auto;
background:yellow;
}
See JSFiddle here: http://jsfiddle.net/HxBnF/
Currently you cannot do this because you have a container which you set at 980px, don't ever do that unless you are sure you don't want anything to wrap over it, like in this case the background of a div in that container.
in the div style, just assign a z-index value greater than any other z-index such as
.divClass{
position: absolute;
z-index: 1 //if other elements are still visible chose a higher value such as 20 or even higher.
}
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.
In Microsoft's homepage (http://www.microsoft.com/en-us/default.aspx) you see the white background stretch all the way to the bottom and the sides in grey?
How do you that in an HTML/CSS? I mean, I've been trying but the DIV won't go all the way down...
Help?
Well, their page has enough content to force the page to scroll. Like this
If you don't have enough content, you can set the height of the div to 100%. The important thing to note here is that it will be 100% of its parent's height. That's why you have to set the html and body heights to 100% as well. DEMO
html, body {
height: 100%;
}
#contentDiv {
height:100%;
}
HTML
<body>
<div id="contentDiv">my content here</div>
</body>
You must make sure that the body and html file has 100% height aswell, cause 100% is what it gets from the current height of the parent element
so if you set, and html's parent is the window(document) that's why you get a full height
html,body{
height:100%;
width:100%;
background:gray;
}
div{
height:100%;
width:100%;
background:red;
}
you will get a red page
Set the height to %100 and sometimes setting the parent element to position:relative will set things straight. Post your html and css and we could help you better.
We need to display data in a scrollable div.
We have created a simplified fiddle to demonstrate: http://jsfiddle.net/ZsQ5J/3/
The div contains two parts, a header and the content.
We want the Header to scroll horizontally along with the content, but to be fixed while vertical scrolling through the content.
We would like to achieve this completely in CSS if possible, we could solve it with jQuery I guess, but would prefer not to have to.
We have got most of the way there in CSS, but we can't get the content div to stretch the full width of the header. Because, I guess, making the content div 100% of the containing div isn't the full width of the header.
In a little more depth:
HEADER:
We want the header to stay visible all the time when scrolling up/down through the content. However the header is wider than the containing div so we do want it to scroll horizontally. (So no vertical scroll on the header, just horizontal). We have got this part working. The header is a table.
CONTENT:
The content is a div that we want to scroll both horizontally (in sync with the header) and vertically (independently of the header). This is the part we are having problems with. The scroll is working well, but the width is not expanding to match the header. It will only go as wide as the containing div.
I know it's weird to have a table as the header and a div as the content, but due to legacy issues we need to keep it this way.
Not sure from the question if you can add addition elemnts to markup, but if you can, possible solution is this: http://jsfiddle.net/ZsQ5J/8/
But there is possible problem — scrollbar will not be seen bu default. Is it ok this way?
Not sure if this is exactly what you want but this works.
-Wakeeta
body
{
width:100%;
}
#outer_container
{
margin-top:20px;
margin-left:auto;
margin-right:auto;
width:100%;
border:6px solid #FF0000;
overflow-x:auto;
overflow-y:hidden;
}
#top_container
{
display: block;
width:1500px;
padding:10px;
background-color:#CC66FF;
}
#bottom_container
{
height: 400px;
width:1500px;
padding:10px;
background-color:#FFFF66;
overflow-y:scroll !important;
}
em
{
font-weight:bold;
}
I created a overlay which i am using to show while doing ajax requests. In firefox it works great! But in IE7 i don't see the Div.
my div is simple its the first element after Body
<div id="overlay">
</div>
and my css is here
#overlay {
z-index:1000;
position:absolute;
top:0;
bottom:0;
left:0;
width:100%;
background:#000;
opacity:0.45;
-moz-opacity:0.45;
filter:alpha(opacity=45);
display:none;
}
I think it maybe something to do with the sizing as i placed some text in the div and i don't see it on IE7 but i do on firefox.
Does anyon know where its not working, i am at a bit of a loss :-)
I tried removing display:none and its the same and i also inserting height:auto and still no joy.
I am using jquery to show and hide it liek so, but this isn't the problem as i removed Display:none and i don't see the div which should be over the top of the rest of the content
$("#overlay").show();
Any ideas?
Thanks in advance
since your div is positioned in absolute you should specify an height (different than auto). This can be done declaring height:100% to #overlay , then also html, body { height: 100% } when you open the overlay and html, body { height: auto } when closing the overlay);
Another (better) way is to dinamically calculate the height of body elements via javascript (e.g. document.body.offsetHeight) and then assign to the #overlay as a height
document.getElementById('overlay').style.height = document.body.offsetHeight + 'px';
this would be written in you jQuery snippet as
$("#overlay").height($('body').height()).show();
Try the following additional CSS:
#overlay {
zoom: 1;
}