I've seen several similar questions/answers to this problem on SO but none of the answers that I've checked have helped me.
I'm attempting to have a "Side-Bar" extend from 10px less than the top of the page, all the way to the bottom.
However (when using height:100%), the "Side-Bar" only reaches to the bottom of the loaded browser window, if there is content past the browser window that you scroll down to, the "Side-Bar" ends prematurely.
Basically, its height is only 100% of the browser window, I desire it to be 100% of the full page content.
I've created a JSFiddle that shows my problem:
http://jsfiddle.net/qaEzz/1/
My CSS:
#sidebar {
position:absolute;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}
i put the <div id="sidebar"></div>
into the <div id="content">
and added in the css
#topbar {
width:100%; <--this
height:20px;
background-color: red;
}
and this
#sidebar {
position:absolute;
right:16px; <--! extended to 16 px
width:200px;
height:100%;
overflow:hidden;
margin-top:-10px; <--!
background-color: yellow;
}
#content {
position: absolute;<--! and remove the marging: 10px just add a <br> in the html
width:100%
}
Here is the working Fiddle
If you change position:absolute; to position:fixed;, then it would stick to its position on the right.
For a sidebar that might have a longer length than the browser length itself, instead of the position attribute, use the float attribute.
http://jsfiddle.net/wK2Yh/
#sidebar {
float:right;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}
Related
.product {
position:relative;
width:300px;
height:200px;
overflow:visible;
}
.menu {
position:absolute;
width:200px;
height:400px;
}
<div class="product">
<div class="menu></div>
</div>
The menu is hidden by its parent product. The product overflow is visible.
How to make the menu fully visible? The product position is relative, which can
not be changed.
The menu is hidden, and it will become visible on mouseover.
EDIT ---------
The above code is working. The menu is not fully visible because it is clipped by next product. So set z-index to 1000. However,
.product {
position:relative;
width:300px;
height:200px;
overflow-x:hidden;
overflow-y:visible;
}
is not working. There is a vertical scroll, same as overflow-y:auto. why?
You could add padding or margins to them if it's just underneath it. However it's kind of hard to actually see what it's doing so maybe make a fiddle.
.product {
position:relative;
width:300px;
height:200px;
padding: 10px;
overflow:visible;
}
.menu {
position:absolute;
width:200px;
height:400px;
padding: 10px;
}
Okay so this is quite hard to explain but basically I position the title div perfectly so that it is centered in the header div.
It remains in this position on some computers.
However, on other computers it jumps further down the page - even with the same positioning attributes. (This is tested on the same web browser.)
I have tried with absolute, relative etc. positioning, still no luck!
Note: This div contains text.
CSS:
#header {
position:relative;
height:170px;
background-color: #30A7BF;
margin:0px auto;
padding: 1px;
}
#title {
position: relative;
top: -20px;
left: 315px;
}
Thanks!
Hi is difficult to understand exactly your issue but I can give you a few tips to have a nice center vertical and horizontal:
For horizontal alignment you can use display:inline-block if you want all the div centered:
#header {
text-align:center;
}
#title {
display:inline-block;
}
For vertical align use line-height equal to the total height
#header {
line-height:170px;
}
This only work for one line text if you want another option tell me
And the demo here http://jsfiddle.net/8JLzy/7/
Edit
To work with a text of more than one line you can do this : First your html add a wrapper inside #title:
<div id="header">
<div id="title">
<div class="center">Your Title</div>
</div>
</div>
And on the CSS work with display property:
#title {
display:table;
height:100%;
margin:auto; /*Make the horizontal*/
}
#title .center {
display:table-cell;
vertical-align:middle;/*Make the Vertical*/
}
New demo http://jsfiddle.net/8JLzy/16/
use line-height, not position:relative
#header {
/*position:relative;*/
height:170px;
background-color: #30A7BF;
margin:0px auto;
padding: 1px;
font-size:1em;
}
#title {
line-height:0.5em; /* for example, or instead use padding-top: */
padding-left: 315px;
}
Ok so first it's my firstquestion here on Stackoverflow and the first question ever at all...
I started learning web development two month ago and I learned HTML CSS and most of JS and some jQuery...
I never did any actual thing or experimented but now I'm trying to make my first project to start having practice..
So i've got this wrapper div and inside it I have two more divs, one is a kinda main content div and under it should be the other div which have a nice white img to blend with the overall website background.
The problem is that I cant get the second div to be under the main div and inside the wrapper div. I've simlified it here in the code... Please let me know how to do it...
Thanks and sorry if my English made you hit yourself in the face :)
The HTML
<div class="wrapper">
<div id="first"></div>
<div id="second"></div>
</div>
The CSS
.wrapper {
width:350px;
height:350px;
background-color:black;
margin: 0 auto;
}
#first{
width:250px;
height:300px;
background-color: white;
margin: 0 auto;
}
#second{
width:350px;
height:100px;
background-color: gray;
}
Edit:
I've made a Pen on CodePen to show you what I mean better...
http://codepen.io/Avisaac/pen/DgIzi
This should be the resault only the gray div should be under the red div AND on the bottom of the red div, also i want the red div to be centered inside the wrapper. [plz notice that the wrapper should have the abillity to be centered also, as it is the main content area for my site which is centered.
I also attach a prtScr I took of my monitor to explain better:
the white square is the main content (meaning #first) the white gradient on the bottom is the second div (#second) which contains this gradient. the main content should be over the gradient so that the main content blend with the pattern background.. Hope I made it clearer
http://img841.imageshack.us/img841/2882/qg6j.jpg
The heights and widths don't match.
Try to add more to the wrapper's height, it's just 350px but if you add the two other div's height, it's 400px.
As #DevlshOne mentioned if your mean by under is overlapped try this:
.wrapper {
width:350px;
height:350px;
background-color:black;
margin: 0 auto;
position: relative;
}
#first{
width:250px;
height:300px;
background-color: white;
margin: 0 auto;
position: absolute;
top: 0; left: 0;
}
#second{
width:350px;
height:100px;
background-color: gray;
position: absolute;
top: 0; left: 0;
}
fiddle for this : here
But if your mean is one in top and other in bottom try this;
.wrapper {
width:350px;
height:350px;
background-color:black;
margin: 0 auto;
overflow: hidden /* or scroll or auto */
}
#first {
width:250px;
height:300px;
background-color: white;
margin: 0 auto;
}
#second{
width:350px;
height:100px;
background-color: gray;
}
another fiddle for this one: here
I'm working on the following layout structure:
<div id="wrapper">
<div id="header"></div>
<div id="pageContainer"></div>
<div id="footer"></div>
</div>
With the following CSS I set the footer to the bottom of the page:
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#pageContainer {
padding:10px;
padding-bottom:60px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#6cf;
}
If the content in the 'pageContainer div' is small, I don't want to show the scroll bars in the div but attach the footer to the bottom of the 'pageContainer div' (right not the footer is always at the bottom of the viewport)
If the content of the 'pageContainer div' is long I need the footer to remain visible in the viewport (at the bottom) and show the scroll bars in the 'pageContainer div'.
How do I do this? Any ideas? thanks!
PS: I need a solution that doesn't use JS.
If I read you correctly, you're describing behavior where positioning switches from relative to fixed, depending on the size of an element relative to the real-estate available in the viewport.
Quite certainly, you cannot achieve this without JavaScript.
But a solution where the footer is always at the bottom of the viewport is fairly common and easy to do without JavaScript. In case you do not already know how to do that:
#header, #pageContainer, #footer{
position:fixed;
left:0px;
right:0px;
}
#header{
top:0px;
height:100px;
background:#ff0;
}
#pageContainer {
top:100px;
bottom:60px;
overflow:auto;
}
#footer {
bottom:0px;
width:100%;
height:60px;
background:#6cf;
}
I guess you could do something like this:
#header {
background:#ff0;
padding:10px;
height: 15%;
}
#pageContainer {
padding:10px;
max-height: 70%;
overflow: auto;
}
#footer {
bottom:0;
width:100%;
height:15%;
background:#6cf;
}
Note that you need to specify your heights in percentages. Also padding might be an issue.
Whenever I add the min0height property to the DIVs to make them 100%, it doesn't work. I have added them to all of the DIVs, including height: 100%; and min-height: 100%; but nothing works. What would I do to make it extend all the way? It just cuts off the background of the sidebar and the background color of the content area.
(Forgot to label a part. The content area with the white background is .col1)
CSS:
#charset "UTF-8";
/* CSS Document */
img {
border-style: none;
color: #FFF;
text-align: center;
}
body {
background-color:#000;
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
}
.sidebar {
background-image:url(../images/sidebar/background.png);
background-repeat:repeat-y;
font: 12px Helvetica, Arial, Sans-Serif;
color: #666;
z-index:1;
}
.menu {
background-image:url(../images/top_menu/background.png);
background-repeat:repeat-x;
height:25px;
clear:both;
float:left;
width:100%;
position:fixed;
top:0px;
z-index:5;
background-color:#000;
}
.bottom_menu {
background-image:url(../images/bottom_menu/background.png);
background-repeat:repeat-x;
height:20px;
z-index:2;
font: 12px Helvetica, Arial, Sans-Serif;
clear:both;
float:left;
width:100%;
position:fixed;
bottom:0px;
}
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
.sidebar .colright {
float:left;
width:200%;
position:relative;
left:225px;
background:#fff;
}
.sidebar .col1wrap {
float:right;
width:50%;
position:relative;
right:225px;
}
.sidebar .col1 {
margin:30px 15px 0 225px; /* TOP / UNKNOWN / UNKNOWN / RIGHT */
position:relative;
right:100%;
overflow:hidden;
}
.sidebar .col2 {
float:left;
width:225px;
position:fixed;
top:0px;
left:0px;
margin-top:25px;
margin-left:5px;
right:225px;
}
.clear {
clear: both;
height: 1px;
overflow: hidden;
}
HTML
<body>
<div id="container">
<div class="menu">Header Content</div>
<div class="colmask sidebar">
<div class="colright">
<div class="col1wrap">
<div class="col1" id="contentDIV">
Content
</div>
</div>
<div class="col2">
Sidebar Content
</div>
</div>
</div>
<div class="bottom_menu">Footer Content</div>
</div>
</body>
Fixed.
It was the container div right after the body tag. Even with height CSS, it created problems. I removed it and changed a script I had from rendering in that div to the document.body and everything works now.
If you are trying to make your content and sidebar stretch the entire height of the page, then no amount of setting a height is really going to help. If you use 100%, your going to push your fotter off the bottom of the page so you have to scroll to see it. There is a single method that I know of that will allow you to have a full-height body with a footer: Sticky Footer
Check the following site for details: http://www.cssstickyfooter.com/
Another trick you will probably need. It is near impossible to get two columns to have equal height and support all browsers. The simplest way to get your gray column to the left and white center body to stretch all the way to the footer is to use a 1-pixel hight image that has gray and white in the proper proportions, which is background-repeated along the y axis.
Another great site for CSS knowledge is A List Apart.
It is hard to get a consistant layout using floats and positioning on the same elements. In particular float and position:fixed (or absolute) are incompatible and each browser handles the situation differently.
IE6 does not support position:fixed at all and treats it as position:static (the default - no positioning at all).