I'm using a strict doctype and cannot get one of my divs aligned to the bottom. I'd like to specify a 100% height on the parent container and then push the inner container to the floor of the parent. How is this done using a strict doctype?
This is the parent: -- Works as expected. At 100% height
#content_left {
vertical-align:top;
padding:0;
margin:0;
min-width:195px;
color:#fff;
height:100%;
}
This is the inner div: doesnt work
.sidebarmenu {
position:relative;
bottom:0;
height:100%;
border:1px solid red;
}
I think you would need to use absolute positioning and specify bottom: 0:
#content {
position: absolute;
bottom: 0;
}
I'd suggest trying:
#content {position:relative;bottom:0;}
Discussing layout issues in text can be tricky, but note that you’ve said you want a <div> aligned to the bottom, but you’ve not said to the bottom of what.
I think you mean the bottom of the browser window. Unfortunately, you can’t really do this in CSS: the root element is always as tall as its content requires, and not as tall as the browser window (if I remember correctly).
Related
I want to place a div fixed on the left and near I want to place other div.
Imagine a twitter webpage, I want to fixed the left panel (where you write yout tweets) and near I want to place the panel where you read tweets.
Now I have the following code:
<div id="container">
<div id=fixed-menu>
</div>
<div id="content">
</div>
</div>
#fixed-menu {
position:fixed;
background: #fff;
padding: 10px;
top:60px;
left: 10px;
width:300px;
max-width: 300px;
}
#content {
background: #fff;
padding-top: 10px;
}
In this way, the div with id="content" appear on left so, the fixed-menu doesn't appear, because it is under content div.
If I use margin-left in #content the error is solved, but I don't want use that, any other solution?
Thanks.
One of the first things to note is that by putting a position Fixed on div#fixed-menu breaks it out of the normal document flow. What this means is that the other block/inline level elements do not know about it. Also by making it fixed, you make it fixed relative to the window. If you want it "fixed" within the container and not to a certain point on the screen I would go with position:absolute and then a position:relative on it's parent container.
Either way, the problem you're experiencing where div#content doesn't respect the position of the fixed element, is due to the fact that the fixed element is no longer part of the normal document flow. Adding a z-index to div#fixed-menu should bring it above the content. However, you will see overlapping and will have to account of the offset of div#content with either margin on div#content or padding on the parent container.
If you look at this fiddle: http://jsfiddle.net/f38aj/
css:
#container {
position: relative;
height: 700px;
padding: 0 0 0 320px;
}
#fixed-menu {
position: fixed;
background: red;
padding: 10px;
top:8px;
left: 8px;
width: 300px;
max-width: 300px;
}
#content {
background: blue;
padding-top: 10px;
}
If you notice we create padding in the container, where we end up overlaying the div#container object.
we have a fixed container on the left while the right side content will scroll with the page. If you can come up with a non fixed solution it might be better, as there are phone browsers like older versions of iOS that will take anything that is position fixed and replace it with position absolute.
A side note, working with fixed/absolute positioning is useful especially in some crazy cases, but it does require a little more due diligence on your/your teams parts to maintain. If you start getting into z-indexes you might want to look at a library like less or sass just to create global css variables, which will make it easier to manage what can turn into an almost unmanageable experience.
hope that helps.
Ok, i've tried LOTS of solutions offered in StackOverflow about this issue, but none of them have worked. I guess this is a tricky thing and needs a tricky solution.
From what I've seen, each problem is different with this 'occupying' the body thing, so I guess I'm here with a different one.
I really need help here, guys.
Here's my problem: http://jsfiddle.net/Ff49Z/5/
And heres what I want: When the "wrapper" div does not fulfill the body, I want the div to expand to the bottom of it anyway. So, in the fiddle, what I'm trying to achieve is not a gray spot on my layout. As you can see, wrappers are 100% height (that is one common solution offered in SO for this problem) and that does not help.
It is this div that does not expand to fit the wrapper:
div#middle {
padding:10px;
margin:0 auto;
height: 100%;
}
BTW, when overscrolling, footer sticks and wrapper scrolls. That is the desired behaviour, and it works flawlessly.
I simply added:
div#middlewrap {
width:100%;
position:absolute;
margin-top:60px;
}
and works as you asked. EDIT: THIS IS WRONG - correct answer below
I was about to give up when I decided to rewrite the css from scratch, and it came out simpler than I expected. I simplified your CSS to the bones and added some cool overflow-y:auto; to the middle wrapper plus some sweet position:fixed; to the header and the footer. Then I adjusted the padding to the #middle content div and added a height:100%; to the body and html(so that every child of body can be successfully set to height:100%;) and that's what came out:
body, html {
margin:0;
height:100%;
}
div#headerwrap, div#footerwrap {
position: fixed;
left: 0;
right: 0;
}
div#headerwrap {
top: 0;
height:64px;
background-color: red;
}
div#middlewrap {
height:100%;
overflow-y:auto;
background-color: blue;
}
div#middle {
padding-top:70px;
padding-bottom:35px;
}
div#footerwrap {
bottom: 0;
height:32px;
background-color: green;
}
That's all the CSS you need. Pretty cool uh?
HERE IS THE FIDDLE
Note: I respected your syntax, which is also correct, but it's not necessary to write DIV before every #ID in your css. Deleting those selectors will dramatically decrease your css file weight in bigger projects.
Cheers.
Make all parent elements as height:100%:
body, html, body>div#middlewrap {
height: 100%;
}
div#middle {
min-height:100%;
}
Impossible solely with CSS. Need javascript involved. Take the client height - (header + footer) = min height for the content
Using % height doesn't work because the parent doesn't have a height defined.
I am trying to make a footer/navigation fixed to the bottom right corner of the screen so when you scroll down it will always be visible, and when you pull the bottom right of the browser to make it bigger it will stay fixed in the corner. I would also like it to scale smaller when you make the browser smaller. I've figured a way to do this in the top left corner but not the right.
I have tried
position:fixed;
bottom:0;
right:0:
however this doesn't seem to be working. I am left with a mysterious space between the edge of the page and my image (http://i.imgur.com/FZoaLd0.jpg) (doing a negative margin on the div does not erase this space) I also do not want to affix this as a background image because I eventually want to make it an image map.
sorry if this is confusing! I am still a newb at this.
<div id="footer">
<img src= "images/swirlfooter.png" width="75%" height="75%">
</div>
is the width and height the culprit of the space? if so how would i fix that? just create the image in the exact size i need it to be?
First, you need a fixed position, if you don't want it to move while scrolling.
#footer {
position:fixed;
right:0;
bottom:0;
margin:0;
padding:0;
width:75%;
}
#footer img {width:100%;}
And to clear the margins :
html, body {
margin:0;
padding:0;
}
Be careful, the position:fixed, unfortunatly doesn't work with safari on iOS (iPhones, iPads...)
You can see a demo here.
Edit
Another solution is to put the img in background of the footer, like this example :
#footer {
position:fixed;
right:0;
bottom:0;
margin:0;
width:75%;
height:75%;
background:url(http://i.imgur.com/FZoaLd0.jpg) no-repeat bottom right;
background-size:100%;
}
Position absolute will move with scroll. What you need is positon:fixed;
#footer {
position:fixed;
bottom:0;
right:0:
}
You need position: fixed;.
You also might want to try clearing the body and HTML margins:
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
Is it withing any parent containers that have position set to position: relative;?
Use
position:fixed;
Instead of absolute.
Fixed will keep it always at the bottom right of the window.
Absolute changes as you scroll.
HTML:
<div class="class-name">
<img src="images/image-name.png">
</div>
CSS:
div.class-name {
position: fixed;
margin-top: -50px;
top: 100%;
left: 100%;
margin-left: -120px;
z-index: 11000;
}
div.class-name img{
width: 100px;
}
Change margin-top according to your image height.
I'm currently trying to center an horizontally, as in the object (box if you will) itself, not the text inside. I've tried many suggestions and followed many tutorials, yet nothing works... I finally ended up setting the margins myself, but I'd like it to adjust itself dynamically. This is the code I currently have:
.navbar {
margin:auto;
margin-left:30em;
display:none;
position:fixed;
top:0px;
list-style-type:none;
padding:0;
overflow:hidden;
z-index:200;
}
.navbar li {
float: left;
display:inline;
width:120px;
text-align:center;
}
.navbar #left {
left:0px;
width:100px;
height:35px;
background:url('res/navigation.png') 0 0;
}
... and so on. The html is really simple, just the list with the corresponding class and id attributes.
The proposed by many solution to set margin: 0 auto; doesn't work because you've got position: fixed; on your ul ;)
To my mind a good way of centering positioned elements is this:
.someelement{
width: 600px;
position: fixed;
left: 50%;
margin-left: -300px; //here we put half of the element's width
}
A live example of this method can be seen here: http://jsfiddle.net/skip405/G8LrV/
The only problem with this method is that we set the fixed width.
If you have an element whose width may change - you'll probably have to calculate it dynamically by jQuery, for instance, and then set the negative margin.
A live example of it can be seen here: http://jsfiddle.net/skip405/G8LrV/1/
Centering with CSS requires using margin: 0 auto -- as others have mentioned, and as I think you've already tried.
The reason this may not have worked for you is that it also requires the object to have a defined width and to have a block type display property (ie either display:block or display:inline-block).
It needs to be a block because only blocks can be manipulated in this way.
And it needs to have width because blocks default to 100% of the width of their container, which obviously leaves no room for it to be centered. The width can be a percentage rather than px if you want it to adapt to the size of the container, but it must be set.
If you're still struggling with it, try using Firebug (or similar) and examine what the browser thinks it's doing with the box. You may spot the problem here.
And if that doesn't help, create a JSFiddle example; this will help you see what's going on, and also give you something to show here.
It's a bit tricky, and you'll have to put the <ul> into a container. Then use the following css:
div {
text-align: center;
}
ul {
text-align: left;
display: inline-block;
width: auto;
}
Where div is the container around ul.
See this fiddle for live demo
You need to set an explicit width in order for the margin:0 auto to work.
Alternatively you can use some position trickery, as seen here, for when the width is an unknown.
And you'll need to remove display:none from .navbar or you won't see anything; unless there's some other code at work that isn't included.
to center a div relative to its container you need to do
width:75%;
margin-left:auto;
margin-right:auto;
that way the object centers itself.
You can try putting the .navbar in a container using section or div then set the display property of the container to flex then justify-content property to center and giving the navbar a specific width. Something like this:
section or code{display: flex; justify-content: center; width: 300px;
Put the .navbar in a container using section or div then set the display property of the container to flex then justify-content property to center and giving the navbar a specific width. Something like this:
section or code {
display: flex;
justify-content: center;
width: 300px;
}
I wanted to use "full width" stripe on my footer, but aparently it doesen't want to work. here is the example of what I have right now.:
I want the footer to do a repeat-x over its div. So, going off until the end of the screen (like its done on the upper part). This might be something extremely simple, but I'm fairly inexperienced with CSS styles, so please lend me a hand.
[EDIT] The footer div is inside a wrapper. The edges of the div are aligned with the wrapper width. My question is if its possible for it to "overlap" the limitations, until the end of the screen.
I would also like to give it a specific position, not variable with the end of the article. I understand that I need to use it as position:absolute, but it always apears right after the header, even if I give it a Y position. There is probably something simple I'm forgetting.
Here is the existent code I have in my Footer class:
#footer {
background:url(wp-content/uploads/2012/06/whitestripe.png) repeat-x;
position:relative;
width:100%;
clear:both;
text-align:center;
line-height:16px;
font-size:11px;
}
#footer a {
padding:2px 3px;
color:#004a6a;
text-decoration:none;
}
#footer a:hover {
color:#105a7a;
}
Thank you.
Marco Roberto.
Move the footer element outside the main wrapper so that it isn't constrained by it. Inside the body will do fine for example.
Then change the css:
#footer {
position: absolute; // or fixed if you want it to scroll along
left: 0;
right: 0; // or width: 100%
bottom: 10px; // change to the value you want
}
Hey now define in your css body and html width
as like this
html, body
{
width:100%;
}
background-image:url('paper.gif');
background-repeat:repeat-X;
Try this
http://www.w3schools.com/cssref/css3_pr_background-size.asp
This will help you to study...