Can anybody think of a non-Javascript way to do the following:
There is a DIV element somewhere on the screen. Its position can not be predicted.
It has a fixed width, and should overlap all the other content in the document, ie. it has "position" set to "absolute".
This is the catch: I want the bottom edge of the DIV to be glued to the bottom of the Viewport. I tried giving the element "bottom: 0px", but in absence of a "height" setting, the whole DIV moves down to the bottom corner, which is not what I want. I want it to stretch from the random position in the document to the bottom edge of the viewport.
I cannot see a solution without using JavaScript, but maybe somebody has a brilliant idea.
I believe the following is not IE6 compatible, but works on all other browsers. With the bottom, you should also give it a top. Once you set the height, it will take precedence (I gave it a border so you can see it stretching):
<div style="position:absolute;top:150px;bottom:10px;width:100px;border:1px solid red;">
I'm stretched to the bottom
</div>
try this
http://www.doxdesk.com/software/js/fixed.html
also try to check position:relative; position:static; position:fixed;
Thanks
freeweb.pk
Related
i'm no expert when it comes to css but i'm trying to get a floating div to work. I have two div's, the top one floats left and the other div should wrap right. It seems to sort of do this. The problem is that even though it looks right, it's not actually pushing the box to the right of it. I have a jsfiddle and you'll see what i mean. i set a red border on the div called content. You'll see the content looks about right, but the dotted red line under the h1 start from the begining of the floated object instead of under the H1 title. Please help me understand. here's the jsfiddle: http://jsfiddle.net/wCnY3/
<div id="subNav">box</div><div id="content">WELCOME</div>
Target your #content element with an overflow-x:hidden property.
#content {
overflow-x:hidden;
}
Like so: http://jsfiddle.net/wCnY3/1/
By design, the overflow:hidden has the effect of forcing your element to behave like a square/rectangle. Since you don't have a set width/height for your element, that just means its wrapping behavior is changed.
The problem i'm having is i need to float one element with a fixed width to the left, and have an element next to it fill the remaining width.
The only solution that i know of is to float the first element, and then the element next to it will automatically fill the remaining width. The problem i'm having is the following:
http://codepen.io/anon/pen/udBsx
If the green content is higher than the red, it will jump down below the red. Is there any way to prevent this from happening? I've played around with clear but i don't think there's anything i can do to keep it from happening.
To make it even worse, the site is responsive. If it weren't, i could just give the green element a static width and float it as well, but that is not the case. I can't use percentage because the red element has a static width.
I believe flexbox has what i'm looking for but unfortunately it's not an option right now due to lack of support.
Ideas?
EDIT:
The css code should look like this:
.floated {
width:200px; float:left;
}
.fill {
margin-left:200px;
}
Let's see:
Container box is 920px, left box is 600px, right box width dinamically changing between 200px and 400px. As we know in basic situation if two floated box wider than their container the lastest one breaks into a new line.
I tried to solve it with negative leftmargin on right box and it works fine. (buggy on IE6 but it does not matter.)
Is negative margin good or can I avoid annoying float box breaking in other way? (i don't want to use absolute positioning.)
Negative left margin is great. I use it lots of time to align to the center left:50%; margin-left: -250px; // width == 500px; so don't worry you can use it without a problem.
Also ppl use it for lot's of small things. It's not uncommon for sites to have elements with negative margins.
Even here in Stackoverflow if you look at the CSS you can find negative margins.
I have an issue (code is dynamic so difficult to print - I hope this is simple) whereby when a parent container div contains 3 div elements floated left, yet the if the 3rd div goes beyond the body of the page (i.e. the browser's width) it line breaks to go underneath.
I want it to float: left whatever, whether it goes past the 'end of the browser' or not. Is this possible?
Example code:-
<div id="container"><div id="divLeft"></div><div id="divCenter"></div><div id="divRight"></div></div>
Where all the divs left, center and right are float: left;
Yet #divLeft will break to go under divCenter if it's width goes outside the browser width.
Any help much appreciated!
The best way to be sure is to set a fixed width to your div here.
An example here
#container{width:306px;display:block;border:1px solid black;overflow:auto;}
#divLeft, #divCenter,#divRight{float:left;border:1px solid red;width:100px;}
Don't forget the overflow:auto on your container if you want to apply a background or a border, else it won't be under your divs.
it seems the divs don't fit in container div, and the last one floats under them. this is how float works. you must arrange the widths of them.
Check my website, and see the Divisions left menu. When you have maximized your broswer there is no problem, but when you restore it to half of screen, the left menu overlaps to the right.
Here is the CSS code. Can someone help me?
It's because your "divisions" div is absolutely positioned.
You can remove "position: absolute" and increase the width of the "divisions" div to 300px.
Your left menu is absolutely positioned that's why it overlaps other content when window size is too narrow. But the solution for this problem is quite tricky and actually depends on what you want to achieve.
Percentage
One possible solutions would be to set width on "divisions" and "content" div in percentage. This way they'll never overlap. But it depends if you can afford to have dynamic width for your "content" div.
Repositioning
If your content must be fixed width... You'll first have to decide how would you like your content/menu to appear when window is too narrow (maybe even narrower than content width)... And work from there.
Body element width
Set minimum window content (as in <body>) width. Either by using:
transparent image at the beginning of your document <img src="t.gif" width="1250">
set body's minimum width css as min-width: 1250px; has to be 1250px wide, because content is centrally positioned, so it must have equal space on the left and on the right (right one being useless empty space just allowing non overlapping space on the left of content)
The last one is actually the simplest and works. It only makes it a bit wide for smaller screen sizes, but your content width (including menu on the left) already exceeds 1030px anyway...
A very straight-forward and simple
and quick-fix solution would be with CSS :
#content {style.css (line 17)
left:-270px;
margin:0 auto;
padding:30px 10px 0 550px;
position:relative;
width:780px;
}
I tried this in my Firebug and it worked fine. hope it'll suit you're needs :)
next time just use css floats:
put the side menu and the content div in a wrapper,
float:left for the menu, and give the wrapper a fixed width, and center align it.
you can also make the navigation menu go "out" from the left with negative left positioning it.