Relative and absolute positioning - css

I'm trying to understand if it's possible to place content after an absolute positioned div that's within a relative positioned div. if I don't know the height of the relative positioned div.
Basically, I have this configuration ...
<div style="position:relative">
<div style="position:absolute; top:0; left:100;">
<div style="position:absolute; top:100; left:100;">
<div>
(... and I'd like to place content here)
Since this is dynamic, I don't have the actual height of the relative div. so I can't place it within this container's CSS.
I created a jsfiddle (http://jsfiddle.net/o7k2dpdz/) to illustrate what I'm trying to do. I left an artificial 500px as my height but I'd like to remove this and have it still work if possible.

I think you don't need to use the position:absolute; approach for this kind of layout.
Here is a solution example i made without absolute positioning
jsFiddle
Hope this is what you intended to create.

Related

Display relative containers (with variable height) below each other

I have some relatively positioned containers (that vary in height) and I want to display them under each other. What's happening is they are displaying on top of each other (see fiddle).
I am using position:relative on the containers because I want the child elements to have position:absolute and display relative to their container. I think there is probably a quick fix with a fixed height for example but that isn't very flexible, my containers (or their children) will vary in height.
Desired result - fiddle
Actual result - fiddle
Code:
<style type="text/css">
.outside
{
position:relative;
border:1px solid red;
}
.inside
{
position:absolute;
top:0;
left:0;
}
</style>
<div class="outside">
<div class="inside"><p>absolute 1</p></div>
</div>
<div class="outside">
<div class="inside"><p>absolute 2</p></div>
</div>
<div class="outside">
<div class="inside"><p>absolute 3</p></div>
</div>
When you position something absolute inside a relative element, this relative element won't take in consideration the width or height of the absolute element, so just add a height:30px; - DEMO -
If you do not wish to have a fixed height, then use at least a min-height. - DEMO -
The problem you are having is that your outside containers have no dimension because the inside divs are absolutely positioned.
Since you say these are variable height containers, I know of no way to fix this.
What's wrong with the 'desired result' fiddle? It seems that you are trying to recreate the default behavior of how boxes are rendered.

Position DIVs in same place, toggle them

I'm having a little issue with couple of DIVs.
I need two DIVs to be positioned in exactly same place, and toggle them. As one div disappear, another should appear. This I will do using jQuery toggle().
The issue is that both DIVs should be part of the page flow and positioned exactly the same way. How I would achieve that?
So, there is some previous div, that occupies some place, has relative positioning and non-fixed sizes (dependent on window measures)
<div class="header">
... </div>
Then my div
<div id="galleria" style="height:700px;width:920px; margin:0 auto; border:1px solid green; ">
... </div>
and other my DIV
<div id="aboutDiv" >
This is ABOUT
</div>
Two later divs should occupy the same place. What positioning tags I could use?
The design adjusts to the window size due to flexible element -- very first DIV "header", so no absolute positioning is possible.
just put them one after another
<div id="galleria" style="height:700px;width:920px; margin:0 auto; border:1px solid green; "> ... </div>
<div id="aboutDiv" >
This is ABOUT
</div>
both should be positioned relative , when one is hidden then other will move up and they will be in the same place - as long as you are using toggle to always have one hidden and one shown
You either need a relatively positioned parent container with absolutely positioned children, or hide one and show the other when its faded out completely

CSS div positioning (original state)

I'm trying to make a basic system but stying has to be done with divs.
The thing is, I'm always messing my div styling when I do it myself. Like, a div goes out of container div and things like that.
What I'm trying to archieve is very basic.
There should be a 800x800 container div.
The first 200px height and 600px width should contain a new div named
description.
200px width on right side should be a new div named logo.
There should be another div here, 200px height and 800px width.
In the bottom, we got 400px height and 800px width to use. I want to
make it something like this: (all 400px) height.
From left to right;
100px - a div named block (contains a block image) 150px - a div named item-1. 100px - a div named block (contains a block image) 150px - a div named item-2. 100px - a div named block (contains a block image) 150px - a div named item-3. 100px - a div named block (contains a block image)
Could anybody help me in this case? A little example will get my going.
Thank you.
The following code should help you. Your total width goes out of 800px so I have increased the width to 850px.
<body>
<div style="width:850px; margin:0 auto;">
<div style="height:400px; width:100px; float:left" name="block"></div>
<div style="height:400px; width:150px; float:left" name="item-1"></div>
<div style="height:400px; width:100px; float:left" name="block"></div>
<div style="height:400px; width:150px; float:left" name="item-2"></div>
<div style="height:400px; width:100px; float:left" name="block"></div>
<div style="height:400px; width:150px; float:left" name="item-3"></div>
<div style="height:400px; width:100px; float:left" name="block"></div>
<div style="clear:both"></div>
</div>
</body>
First, most people here don't take kindly to being asked to do your work for you, which is basically what you're asking here. You'll be far better off trying what you're looking to do, then coming back here with specific questions.
That said, I'm going to instead try to help you with the issue that lies underneath your stated question, given the notes within your post.
It sounds to me like you don't have a good understanding of floats, and how they affect HTML elements (and their parent elements). CSS-Tricks has a phenomenal article on floats. In short, applying float to an element takes it out of the normal flow of HTML documents and allows you to align block-level elements next to one another. Issues arise when all child elements of a container are floated, which makes the parent container collapse on itself. This collapsing effect can also happen when one child element is floated, but another one isn't, and the non-floated element takes up less vertical space than the floated one. In that situation, the parent "collapses" to that smaller childe element, leaving the larger floated one overflowing the parent. Once you understand how floats (and float clearing) work, your life will be a lot easier.
Additionally, you might also want to look into display: inline-block;, which can solve a number of headaches with things like horizontal navigation.
Edit From the looks of the site you linked, another one of your issues is that you're trying to fix the height of your container elements, then making the child elements total height add up to more than the parent. For that, I refer you back to CSS-Tricks, for information on the CSS box model.
In short, though, if you have a box that's 2 feet tall, and inside it you stack two more boxes, one that is 1 foot tall, and one that is 1.5 feet tall, then the inside boxes will stick out of the container, because their height adds up to more than the height of the container. The same concept applies to web design, especially when you're using fixed sizes.

What's a good way to make parent div height reflect padding/border/margin of child div?

Background
I have the following html code:
<div id="parent">
<div id="child">
I'm the child!
</div>
</div>
I want the parent div to be positioned relative to the bottom of the page as with the css properties position: absolute, bottom: 0px.
This works fine if the child div(s) have no padding or border. However, as showcased in this JSFiddle example, if the child has padding or a border, it expands beyond the bottom of the parent div (notice the rendered page is scrollable and there is additional content from the child div below the bottom of the page).
Question
What's the best way to make sure the parent div fully encompasses the child div vertically? (Correct me if I'm wrong, but this doesn't appear to be a problem with horizontal padding/borders)
My best idea was to add the sum of the padding/border/margin of to the padding to the parent div. Using something like SASS to generate the actual css makes this slightly more palatable, but still seems like a really unclean solution. Is there a better way?
Thanks!
(As a side note, when I made the JSFiddle example I noticed the right border was missing on the child div. Is this just a fluke with JSFiddle or something?)
If you get rid of those display: inline;s it will work like a charm.

position in CSS

what is difference between relative position and absolute position is CSS
eg
.style
{
position:relative;
}
.style
{
position:absolute;
}
From W3schools:
Absolute
Generates an absolutely positioned
element, positioned relative to the
first parent element that has a
position other than static. The
element's position is specified with
the "left", "top", "right", and
"bottom" properties
Relative
Generates a relatively positioned
element, positioned relative to its
normal position, so "left:20" adds 20
pixels to the element's LEFT position
Also check this page, it will give you very nice overview about positions in CSS.
The standard describes it here: Comparison of normal flow, floats, and absolute positioning
Is there something in particular about this which you don't understand or want explaining further?
With relative you can position the element relative to its original position and the original space is still holding the item.
Absolute takes the item out of the regular flow of the HTML and you can position it relative to the parent element.
Here is a good tutorial about that:
http://jimbojw.com/wiki/index.php?title=Position_absolute_is_really_relative%3F
Use relative when you consider range to parent element or elements before.
Use absolute when you want to make an element in inviolable position.
You can also learn the difference between margin-left and left css property for relative and absolute
<html>
<body>
<div style="width:300px; height:200px; margin:auto; background:red">
<div style="position:relative; left:10px; top:20px;">
test
</div>
<div style="position:relative; left:10px; top:20px;">
test
</div>
<div style="position:absolute; left:0; bottom:0px;">
test
</div>
<div style="position:absolute; margin-left:0; margin-bottom:0px;">
test
</div>
</div>
</body>

Resources