I have an image representation of graph made with .png images and -moz-border CSS trick (div id=gholder) I want that graph to be positioned as where the picture shows, And I did it using CSS position: absolute/relative tags, but I'm having problem using the two tag. When I use this CSS code
#gholder {
float: left;
bottom: 460px;
left: 60%;
position: relative;
}
The site shows a big space below the footer, is there a way to remove that big space when using the relative code?
Relative positioning always leaves a space where the element originally was. If you use absolute it should work correctly.
`#gholder { bottom: 460px; left: 60%; position: absolute;}`
You also don't need the float tag.
If the problem is that you want the main content div lines to stretch to the width of both divs, I'd create a div which contains both the content and the graph, and set it to a defined width and have the top and bottom line in it.
Then inside that div define a width for your content div and position it, then do the same for the graph div.
Think that makes sense.
Related
I have a main wrapper div with a content div and a button. The button is supposed to go underneath the content div but for some reason it's overlapping with it.
The content div has css:
#groupMembers {
position: absolute;
height: 50%;
width: 90%;
left: 5%;
overflow: scroll;
display: inline-block;
}
and the button has:
button {
display: inline-block;
width: 70%;
left: 15%;
}
I thought since they're both inline-block that they wouldn't overlap, but for some reason they are. I made a JsFiddle to show: http://jsfiddle.net/b5hp6boz/
Can anybody help me get the button to display beneath the content div?
Remove the (extensive) use of absolute positioning.... Change it to position: relative; if necessary. But on many elements even that is not necessary.
Move the button div up to under the <h4>add members</h4> in the HTML where you appear to want it.
Then adjust margins for #DIV_05 and the button.
Fiddle Update or Fiddle Update 2
(Note I merely performed a search to change absolute to relative in your CSS, then adjusted from there.)
By using absolute positioning so extensively you were forcing elements into unnatural positions. Then when it wasn't working out.. you are left wondering why. Let things fall where they naturally want to fall. Change the HTML for overall render order, don't force things with absolute positioning.
Use of absolute position is most commonly used to adjust z-index and make elements not alter positioning of other elements. (like a global float of sorts) It should not be the fall back for positioning everything in any layout.
The problem in your code is that you have given the #DIV_5 the following CSS:
position: absolute;
By giving a HTML element an absolute position it is removed from the normal rendering process by not obtaining any space in the document. That means it is not affecting the position of the following BUTTON_105 element. That's why the button is positioned right underneath the H4_4 element (which is the first element not having an absolute position).
To fix that simply remove the position: absolute; declaration for #DIV_5. (Btw: You should try not to make heavy use of absolute positioning as it can cause further issues.)
Try giving your div tag a higher z-index value.
I have one element (a div) floating to the right of content, and below the content (which can be varying in height) I have another div that I want to stack above the floated right div, but stay below the content.
Here's an example: https://jsfiddle.net/8nap0qm6/
While this is close, I need the content within the ".over" div to not wrap when it hits that right-hand div, but instead fill up the whole ".over" div while still overlapping the right-hand div.
Putting a "clear: both/left" on the ".over" div pushes the div below the right-hand div instead of overlapping it.
I know I could absolute position the over div:
.over {
position: absolute;
top: 200px; // or xx%
left: 0px;
z-index: 5;
}
but I need it to be vertically controlled by the content so I can't put a set "top" on it.
Is there a way to achieve this? (Make white text in blue box go full width of blue box.) I'm open to using completely different code if necessary.
You just need to set position: absolute;
.over {
position: absolute;
z-index: 5;
}
JSFiddle
As the given answers don't seem to satisfy exactly what's expected, I decided to change some things to make the output closer to what you expect. Check my fiddle.
Major changes:
1) Added a #parent div to wrap the whole content
2) Absolutely positioned the .right div, relative to #parent
3) Added width to .right and all #parent's p elements so that summing both results in 100%
Just add clear: both; to your .over class:
.over{
clear: both;
/* your properties */
}
I have a div and i want to put an image at the bottom right of the div and some images to the bottom left. They are different heights so i want to make sure they both align to the bottom of the div.
At first, i made the bottom right align by using:
position: absolute:
bottom: 0;
right: 0;
but then i couldn't put a margin around it (as it is out of the document flow). So then, based on some answers below, i tried to create the jsfiddle above to get it to work without any position: absolute.
Here is my jsFiddle example: http://jsfiddle.net/leora/FYw2D/.
My only issue now is that I want the images on the left hand side to align to the bottom of the div (versus aligning to the top of the right image). Also in certain cases i don't have any images on the bottom left but i want to have the same vertical spacing (so if i add an image dynamically, it doesn't reset the container height.
.images
{
float: left;
margin-top: 4px;
}
I tried adding vertical-align and a few other properties but couldn't get both to align to bottom.
Any suggestions?
You can use relative positioning to achieve the same bottom: 0; and right: 0; placement... but that won't take your .bottom element out of the document flow (like position: absolute; does). That said, your element needs to be within the document flow in order for margin and padding to be respected anyway.
It sounds like you just need to float it right, apply display: inline;, and apply your margin and padding. Place your text content above the image in the source order, and then the image should always fall beneath and to the right of the content above (depending on other unknown layout variables, that is).
.bottom {
float: right;
display: inline;
padding: 20px 0 0 20px;
margin: 20px 0 0 20px;
}
Updated
To fix your new challenge, I added position: relative; on .container and position: absolute; and bottom: 0; on .images:
http://jsfiddle.net/FYw2D/6/
I can't see a good way to achieve this with CSS alone.
position: absolute; will remove image from text flow.
The only approach I can see is to place your image in the middle of the text and float it right.
See this JSFiddle.
But, you will have to find a good spot in the text to place the image in order for it to look good. You can even write a JavaScript script for this.
The other approach is just to add bottom padding to image's container.
And probably it's a good time to revisit page's design and maybe re-design this element.
UPDATE:
Considering your updated question, I've edited your JSFiddle.
You can use position: absolute; bottom: 0; left: 0; to position left images wrapper inside of a parent container. This will work fine if your right image is taller that left ones (like in your example).
I've also refactored your Fiddle to fix some other issues. Please see the code.
I'm new to CSS and I have a question.
First, my HTML and CSS code:
<!-- HTML CODE -->
<body>
<div id="container">Container
</div>
<div id="inner">Inner</div>
</body>
<!-- CSS CODE -->
#container {
background-color:#b6ff00;
width:500px;
height:500px;
position:relative;
}
#inner {
background-color:#ffd800;
}
With current code, the browser shows the following page:
This is expected.
But if I add this css property to #inner element position:absolute; there will be a following output:
As you can see, the #inner div, takes only that much space it needs. Why this changed with only position:absolute; property added to #inner div?
That's because when you use position: absolute; the element will take up width upto the elements defined/content it contains., cuz it just gets out of the document flow so it is block level in nature but won't take up entire horizontal space on the document, as it's just out of the flow of the document..
If you want it to be full width you need to define width: 100%; explicitly so that it will take 100% of the relative parent's width as well as the height if you declare height: 100%;
Also, make sure you always use position: absolute; with a wrapper element set to position: relative; or your element will fly out in the wild which will eventually end up taking the viewport as the last relative wrapper if you set the position of the element using top, right, bottom or left.
I've explained here in detail, that how CSS Positioning Works
Worth to note that, you make any element a position: absolute; element, it will behave as a block level element, but you need to define height and width so for example, if you turn an inline span element a position: absolute; you can define height and width without making it display: block; (Unless and until you are using display: none; initially)
position: absolute; does not behave the same as block elements.
You will need to set a width and a height for a div that is absolutely positioned.
This is fundamentally how position absolute works. Once taken out of the flow of the document it becomes an inline-block element that is absolutely positioned within the nearest element that is positioned relatively (or the top most element)
If you need it to then be a certain dimensions you can try to set widths and heights, or you can do things like
#inner {
position: absolute;
left: 0;
right: 0;
}
...which would ensure it always stuck to the left and right sides of the screen.
It's generally good practice to put things that are positioned absolutely inside of an element with "position:relative" on it, as your code stands it suggests you want your #inner element to be placed anywhere on the page, whereas if you wanted it to be of a size and position relative to #container your code should look like this:
<body>
<div id="container">
Container
<div id="inner">Inner</div>
</div>
</body>
with CSS such as:
#container {
position: relative;
}
#inner {
background-color:#ffd800; width:500px;
height:500px;
position:relative;
}
You can see your output here:-
http://jsfiddle.net/KggJd/
Let me explain a little:
Postition: relative
This will align itself in accordance with the elements found before (i.e) Prior Siblings.
You can change the position by using margin-top, margin-left, ....
Position: absolute
This will always consider from the browser's start point and won't be in accordance with anything.
Drawbacks:
You cannot consider this as the parent or anything when absolutely positioned.
You can change its position by using top, bottom, right, left.
What I want: Stick text or an element to the right of the document, instead of window.
However, without currently implementation (position: absolute; right:0;), when I resize the window, the text always stay on the right side of the window, even there is a scrollbar showing up (because the element on the top of that has a fixed width). When I scroll right, the text is not right aligned any more.
Here is the example:
http://jsfiddle.net/N5jc9/
Note that, I have no control on container1. Anyone having a good solution for this using CSS?
Put container 2 inside container 1 and make container 1's position relative.
You can use the :after pseudo element and position it to the right of your <body> element. This of course will be evident only if you have set a fixed/min width for your <body> element.
Demo: http://jsfiddle.net/PPtD5/2/
Code:
body {
width: 70%;
height: 200px;
position: relative;
}
body::after {
content: "This one sticks to the right of <body>";
width: 100px;
position: absolute;
right: -120px;
top: 0;
}
Not sure if I understand completely what control you have for container1, but if you apply display:inline-block to each class the text will appear to the right of the container 1