I have the following code:
<div style="position: absolute; width: 100%; height: 100%; background-color: #00FF00">
<div style="position: relative; left: 300px; top: 45px; height: 100%; width: 100%; background-color: #FF0000;"></div>
</div>
Screenshot:
Why does the div gets pushed outside of the viewing area and hence showing the scrollbars. If you check toward the top right corner, the black area is the extension when the red div moved.
How can I edit it so the red div has the top and the left position but doesn't extend beyond the page width and height?
To actually answer the "why" of the question:
The reason you're getting scroll bars is that the relative positioned div inside of the absolute is set to 100% width and height, but ALSO is displaced (in this case, by top and left)
It is therefor assuming 100% width/height of the parent container AND displacing it, causing it to be too large.
By adding overflow:hidden, you seemingly solve this issue, but any content past that will be clipped, not actually fitting inside the dimensions you have set.
Another way to do this would be something like...
top: 10%;
left: 10%;
width:90%;
height:90%;
You could just as easily substitute top and left for padding/margin of that direction.
You can use CSS3's calc() function to set the second div's height and width to be the same as the first one's, minus the left and top offsets. This will also allow you to use position: absolute in your text, aligning it to the right:
<div style="position: absolute; width: 100%; height: 100%; background-color: #00FF00">
<div style="position: relative; left: 300px; top: 45px; height: calc(100% - 45px); width: calc(100% - 300px); background-color: #FF0000;">
<span style="position: absolute; right: 0; top: 50%;">TESTING THIS OUT</span>
</div>
</div>
Check the working JSFiddle. I also added a CSS reset to get rid of the body margins that the browser might add. If you want to use this reset in your HTML file, create a <style> tag inside your <head> tag, with the code that is showing in the CSS section in the JSFiddle. If you don't want to use the entire reset, the only actually relevant part is body { margin: 0px; }, so you can also add style="margin: 0px;" to your body tag.
Related
I added the famous "Fork me on Github" ribbon to one of my projects. The tag looks like this:
<a href="https://github.com/Nurdok/htmlify">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
alt="Fork me on GitHub">
</a>
It looks great, but some of the divs on my webpage have minimum length, so when the window is small, one has to horizontally scroll the screen. When that happens, I want the "Fork me on Github" link to stick to the top-right side of the page, not the window. This is how it looks right now:
Scrolled all the way to the left:
Scrolled all the way to the right:
It seems that the ribbon is placed on the top-right side of the initial window, and stays static.
What I want is for it to be out of sight in the first case and top-right in the second case (when I scroll to the right).
Edit: Thanks for the quick answers, people. However, most of the answers made the ribbon scroll horizontally and vertically with the page. What I want is for it to be fixed on the top-right side of the page (not the browser view), and only be seen if I scroll to where its position is.
You can do a little trick and put your image into a div which has minimal-width.
<div style="position:relative;min-width:960px">
<img src="..." style="position: absolute;right:0;top:0" />
</div>
and put that div at the beginning of <body> section.
position:relative makes that all children of that elements that have position:absolute are positioned absolute according to that div, not whole page. When viewport is bigger than min-width, the div is the same width as the viewport. When the viewport is smaller, the div will have the min-width and the image stays at the corner of the div.
Two alternatives
Sticking to the Viewport: To stick it to the viewport you should position your element "fixed" instead of "absolute"
<img style="position: fixed; top: 0; right: 0; border: 0;"
Sticking to a Container: And if you want it to be sticked to a container (so youn dont see it when you browse left) use absolute but do that container position:relative so its containing block is targeted
If you dont want to see the image when scrolling left then use a explicit width for this container I am talking about
Here is a JSFiddle example.
I used a squared div instead of an image. CSS code as follows:
#container {
width: 700px;
height: 700px;
background: #55ff90;
position: relative;
}
#image {
width: 70px;
height: 60px;
background: #ffff90;
position: absolute;
top: 0px;
right: 0px;
}
In case it's supposed to stick to the right top on horizontal scroll only, you can't accomplish this with basic CSS. Your requirement is stick to the right top for horizontal scroll but not vertical scroll. The first part of the requirement can be accomplished using position: fixed; though this breaks the second part.
How about always sticking to the right top of the website using a relative float: Fiddle
<div id='container'>
<div id='sticky'>x</div>
</div>
#sticky {
width: 100px;
height: 100px;
background: red;
float: right;
}
#container {
width: 100%;
height: 200px;
background: blue;
}
You should use float:right, adjusting margin if you need, e.g.: margin-right: 5px. Cheers :)
If I understand what you want correctly, you'd like for the image to stick to the top corner of the window UNTIL the window gets to a certain size (horizontally) and then stick.
If so, here is a plausible solution:
body{
min-width:1000px; /* or whatever you need it to be */
}
#ribbon{
position:relative;
float:right;
}
DEMO FIDDLE
DEMO FULLSCREEN
You can also use a container div with min-width, your choice.
Change position: absolute; to position: fixed.
As side note, put the style on the a instead of the image and add some z-index to make sure it stays on top of everything else:
<a href="https://github.com/Nurdok/htmlify" style="position: fixed; top: 0; right: 0; border: 0; z-index: 999; display: block;">
<img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
alt="Fork me on GitHub">
</a>
The final ancestor div in my page needs a margin on all four sides, to give it a panel effect. Here is my code:
CSS:
html, body {
height: 100%;
}
#wrapper {
width: 100%;
height: 100%;
}
#bibletree {
width: 20%;
float: left;
height: 100%;
}
.inner { /*this is the div that I need a margin around, so it is by 10px of the #bibletree div on all sides, including the bottom.*/
overflow: auto;
}
HTML:
<div id="wrapper">
<div id="bibletree">
<div class="inner">my content here, both short and long</div>
</div>
</div>
As you probably guessed, there is a lot more going on here than what is written. I have several columns with divs that all need this margin for the panel effect on the .inner div. Thanks for any help.
BTW, I have tried absolute positioning and it only positions based on the window, not on the parent element, even if I set the parent to position: relative.
If you set .inner to width 100% and add a margin, it will be wider than its container. You can set a padding or a border instead. For example, you can add a white or transparent border of 10px.
Another option is to make #bibletree position relative, then make .inner position absolute and specify top, bottom, right and left:
.inner {
bottom: 10px;
top: 10px;
left: 10px;
right: 10px;
position: absolute;
}
This will make it the same size as #bibletree, minus 10px on every side.
Margin:10px is working right?? you need not no specify the width for inner div, as div is already has block option. check here updated demo http://jsfiddle.net/QShRZ/5/
I want to align a div to the bottom of the PAGE, not to the bottom of the screen. When I do this:
#contact-block{
position: absolute;
bottom: 0; left: 0;
}
, the div is placed in the bottom area of the screen. When my page is long, I have to scroll down and the div which should have been at the bottom, floats somewhere in the middle.
There might be a simple solution to this, but I'm just not seeing it.
Here's my HTML:
<div id="left">
<div id="submenu"> <span class="menutitle">Services</span>
<ul>
</ul>
</div>
<div id="contact-block">
<span class="contacttitle">Contact</span></div>
</div>
<div id="content">
</div>
I've also added a little image to illustrate what I mean:
The red div is the contact div.
Edit:
I've found a solution with jQuery and CSS. This might not be the best solution, but hey, it works.
jQuery:
var offset= $(document).height()-$("#contact-block").height()- $("#footer").height()-60;
$("#contact-block").css("top", offset);
$("#contact-block").css("left", $("#wrapper").position().left);
CSS:
#contact-block {
position : absolute;
width:216px;
height:100px;
background:url(../img/contact-bg.jpg) repeat-x #5c5c5c;
}
You could absolute-position the your divs in place. This technique requires a #wrapper element, which I'm not a fan of, but hey, you gotta do watcha gotta do.
In this example I removed the #left div entirely as it was only required for layout purposed and is no longer necessary.
HTML:
<div id="wrapper">
<div id="submenu">This is services</div>
<div id="contact-block">This is contact</div>
<div id="content">This is content</div>
</div>
CSS:
#wrapper {
position: relative;
width: 960px;
}
#submenu {
position: absolute;
left: 0;
top: 0;
width: 320px;
height: 320px;
}
#contact-block {
position: absolute;
left: 0;
bottom: 0;
width: 320px;
height: 160px;
}
#content {
position: relative;
left: 320px;
right: 0;
top: 0;
width: 640px;
height: 640px;
}
//#content position is relative for the #wrapper to stretch.
//The left property is equal to the width of the #submenu or #contact-block element
A good point of this technique is that it gives you cleaner HTML. I believe it will be easier to make a mobile version of your version if the need arise.
The jsfiddle
Additional thought:
The #wrapper element could easily be removed in favor of you body element, which is a great step towards semantic HTML. Check this out!
The position of your absolute positioned element depends on the first ancestor-element, which is not positioned static ( which is the default, so you have to explicitely set it to relative(or absolute) ).
So, make sure, your enclosing #left container has 100% document-heigth and position:relative, and everything is well.
I would suggest putting the red div inside the right long div and at the end of it. Then use position: relative and negative left margins on the red div to push it out to the left. This way, as your right div expands, your red div always stays at the bottom of it.
I asked this question before and got pointed towards this link, which I followed and implemented the technique in my page:
Notice the announcement div and div next to it. I want the announcement div to be of the same height as it's counterpart.
What am i missing?
change the height of both divs to be the same
<div class="announcement" style="position: relative; width: 728px; height: 200px;"> <!--This is the containing div position: relative to flow in sequence with the rest of the page.-->
<div class="announcement" style="position: relative; width: 728px; height: 200px;">
<div style="position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure;">
position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border; (no height)
</div>
for example will fix the height of this div no matter if there is one line in the div or 5 lines or whatever this height will remain the same.
PK
You didn't, so far as I can tell, attempt (or implement) the faux-columns technique you linked to in your question, however because there's no way of forcing, with css, two siblings to maintain the same height without explicitly defining a height, and since you're already using jQuery, I've come up with this cludgy and not-really-portable approach:
$('#container1 > div').each(
function(){
if ($(this).height() > $(this).next().height()){
$(this).next().css('height',$(this).height());
}
else {
$(this).css('height',$(this).next().height());
}
});
It's over at JS Bin for your perusal.
In an HTML page, if I align some <div>s with "right: 0px", they all look very nice, as I expect. However, if I make the browser window smaller and the horizontal scroll bar appears, when I scroll the page to the right, I see an unexpected white space (instead of the background colors of my <div>s). It seems that my <div>s are aligned relative to the visible area of the page. See the sample code below:
<html>
<head>
<style>
<!--
#parent {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: yellow;
}
#child {
position: absolute;
left: 100px;
top: 300px;
width: 1000px;
height: 400px;
background-color: blue;
}
-->
</style>
</head>
<body>
<div id="parent"><div id="child">some text here</div></div>
</body>
</html>
Is there any way to make the "right: 0px" property align the controls relative to the size of the entire page, not only the visible area?
Thanks.
The Problem is the "absolute" position in the parent element, because it's scrollable per definition.
If you set the position to "fixed" and an additional attribute overflow to "scroll", it should look like expected.
#parent {position: fixed;
overflow: scroll;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-color: yellow;
}
if you add
html{ border: 3px solid red }
to your stylesheet,
you'll see that you are setting the 'right' property to the edge of the page.
I think you need to rethink your strategy.
What are you trying to achieve?
Dont use absolute position unless you absolutely must. Use margins and paddings instead. And dont forget to reset margins and paddings so you dont start with whatever the browser has as default.
Is it necessary to use absolute positioning in your case? Otherwise you can remove the left and right properties and simply use width: 100%;
my answer is i want change align scroll?
example "right align" scroll.
#ex {overflow: scroll}
Right? Bottom? Are sure these are even real CSS attributes? Normally you would just set top/left and then width/height...