DIV Absolute Positioning Relative To Wrapper DIV?

[alandsborough]

Hello everyone!

I hope someone maybe able to help me with a CSS question!

I'm currently trying to create a website layout in CSS. I'm struggling to understand relative and absolute positioning and a couple of other things.

This is a draft of my website: http://www.unitedkerrydom.co.uk/index2.html

As you can see, I have the margins set to auto so it floats in the centre of the browser. I would like to have DIVs contained within my wrapper DIV that float relative to wrapper (not the browser window). When I set the wrapper DIV positioning to relative and the DIV I want floating relative to it with the 'absolute' positioning in place, the page breaks, and the content DIV won't extend, when I need it to for the content (which will vary in length). Why is this?

Also, I have to float the content DIV left or the page breaks. I don't understand why this is, or why float left works?

I've changed the design and what I want to do, is have various DIVs floating in absolute positions within the wrapper DIV. Does anyone know how I can do this?

All help appreciated. Many thanks in advance.

[RyanReese]

Right now the parent doesn't recognize it has floated children...floated elements are taken out of the flow of the document. Overflow:hidden added to the parent makes it contain them and make the parent recognize it.

Relative positioning basically creates a pseudo box of the element you use it on, all the colors and what not move onto the new pseudo box, and when you use top:10px or whatever, you are moving the colored box and not the physical actual thing. It also creates a stacking context and a reference point for any other positioned elements.

I can't go and check out your actual code but that should be of some help .

Absolute positioning takes elements out of the flow completely. Unless it has a closer parent to reference the offset coordinates, it will take the coordinates you set (top:0) and reference it from the window. If a parent hsa position:relative, it will reference the coordinates from there.

In short, you can't float+absolute position. AP wins out because what it does to elements is stronger, per say, than what floating does. IDK really why AP wins out but I believe it's because of what it does to the element.

[alandsborough]

Thank you for your reply Ryan.

In that case, what is a floated DIVs position relative to? The browser window, or a parent DIV, or? If I can figure that out, if it's possible, then I can position the DIVs where I need them to be relative to my container/wrapper and not the browser window...This all wouldn't be a problem, if I wasn't setting auto margin so the wrapper to float in the centre of the browser, but that's how I'd like the design to be.

[RyanReese]

A floated element is relative to the parent element. The child knows the parent is there and thus bases where it goes on that. Floated (left) elements go up as far up and as left as is allowed. If you set a parent to margin:0 auto; and a width, it will float in the center of the screen. Now, when you float a child INSIDE that, (note, no position:absolutes are allowed here because it will negate the floating (you canuse it if the parent has position:relative and no floating property on it)) the float will be in the center of the screen as well, however, it will float to the top left portion (assuming float:left) of the wrapper element.

Does this all make sense?

[alandsborough]

Yes, I think so. Sorry, I am a bit of a noob, as you can tell.

Right so, I presume I then can't say child to float: left; with margin positioning attributes like margin: 200px. As in the child will float left from the parent div and 200px from that left float?

Sorry if that doesn't make sense. Like I say, noob! Trying to learn.

[Paul O'B]

Yes, I think so. Sorry, I am a bit of a noob, as you can tell.

Right so, I presume I then can't say child to float: left; with margin positioning attributes like margin: 200px. As in the child will float left from the parent div and 200px from that left float?

Sorry if that doesn't make sense. Like I say, noob! Trying to learn.

Hi,

You can add margins to floats just like other elements and the float will move by the amount of margin that you apply. If you say float:left;margin-left:200px then the float will be 200px from the left edge of its containing:block (step 2 here). The containing block will be the content edge of the nearest block level ancestor. In simple terms the float is bound by its block level parent (although the parent won't know about the float unless it is contained (by a clearing technique)).

So to answer your question you can float elements within a div to the left and right as required assuming that there is room and that you have widths on the floats or they will eventually stretch to 100% wide if they contain fluid content like text.

Don't mix absolute positioning into the mix as absolute elements are removed from the flow and should not be used for structural columns as such. Absolute elements are better suited to placing elements within a confined context where the flow of the page is already controlled by other means (e.g where an element already has a height and you want to place something absolutely in the corner).

[dresden_phoenix]

From the original post:

DONT think of floats as relatively absolutely positioned. STOP IT. STOP IT NOW. OK.

While floated elements become BLOCKS and get TAKEN OUT OF THE NORMAL FLOW. It doesn't mean you have applied positioning.. and it's easier to understand if you tackle each concept separately.

Floating behaviour can get complex, but for a crash course.. floating will do just what it says, by default. So float:left; will take the element out of the regular flow and pace it to left LEFTMOST AVAILABLE EDGE of it's PARENT ELEMENT. Vertically a float cannot appear ABOVE any element that came before it in the the HTML source. A floated element must be given WIDTH: or it will SHRINK WRAP to the width of its contents.

so how do we interpret the above? here are some examples:

If you have a container with all floated elements, the container's bg will seem to disappear ( collapse). This is what it's meant by "out of the flow' the container element doesn't KNOW the float is there so it assumes it's empty. There are many ways to prevent this, but by far the cleanest and most favoured (for MOST instances) is adding overflow:hidden; to the container. But another is to add or create a clearing element. BASICALLY: container:after{content:""; display:block; clear:both; }

Once you have floated an element you can still position it using MARGINS AND/OR RELATIVE POSITIONING ( absolute positioning would be redundant on a float but you CAN do it too, it's just NOT something you SHOULD do)

Example: {position:relative; top:-200px;} and {margin-top:-200px} do essentially the same thing.

it's important to not how relative position works. RP moves the DISPLAYED object margin ... ugh... well margin adjusts the margin.. which for all intents moves the actual object. since you have floated the element this difference is kinda minimized in most cases , but i find it useful to keep in mind that if you adjust a margin what ever is in the flow of that element ( let say other floated:left elements, for example will adjust too. But with RP you move the display but the SPACE the element took up is still there ( a "visible" gap ).

You can creat all sort of things depending how you manipulate these behaviours.

And that's the crash course!!!

[RyanReese]

Dresden, I disagree that margin and coordinates are basically the same. Margins (wheether on RP or normal object) move the elemnt around, and besides AP elements, all the other elements will shift around because they know the margin has been set. Refer back to my post above as to what coordinates do. They aren't the same (not even "basically" )

[alandsborough]

Great information Paul, Phoenix and Ryan. Thank you.

I think I essentially understand, although I'm still trying to get my head around the finer points of containing blocks.

Further to what has been mentioned, I was wondering whether then, several different divs can be used within a containing block with the a float applied to them. I.g, say I have 5 divs within my wrapper div, all with left floats applied with different margins added to each (say, side by side etc, but never on top of each other). Would this work? Also, is it good practice to use a mixture of float right AND left, if for example, one div is closer to the left than right? If that makes sense...

If no, what would be the best way to achieve this effect?

[Paul O'B]

Great information Paul, Phoenix and Ryan. Thank you.

I think I essentially understand, although I'm still trying to get my head around the finer points of containing blocks.

Further to what has been mentioned, I was wondering whether then, several different divs can be used within a containing block with the a float applied to them. I.g, say I have 5 divs within my wrapper div, all with left floats applied with different margins added to each (say, side by side etc, but never on top of each other). Would this work? Also, is it good practice to use a mixture of float right AND left, if for example, one div is closer to the left than right? If that makes sense...

If no, what would be the best way to achieve this effect?

Yes you can float multiple elements side by side as long as there is room and as long as they have widths that allow them to fit.

You can float to the right if you want the element over to the right rather than margined from the left. In a three column layout I usually float the first two columns to the left and then float the last column to the right. This has the benefit of providing a gutter between the last column and the middle column without needing an explicit margin. I do this because IE6 would always stretch an element if its content was wider than the width defined and if you account for every pixel across the width then a 1px discrepancy would cause the float to drop. Floating the last element to the right avoids this.

Remember though that if floats don't have room then they will drop down and try to find space and that often means that the float will snag oneny element that protrudes and won't necessarily start a new row.

[alandsborough]

Right, I see.

Just thought of something...My content div is floating above the header, footer and wrapper div (unless I'm misunderstanding), yet it is still able to effect the wrapper div - as in, the wrapper div extends if it needs to because the content within the content div is long. I don't understand how it's doing that. If the content div is floated, surely it shouldn't be able to effect the wrapper div (even though I want it too)?

Sorry for the silly questions, I really am trying to understand though.

[Paul O'B]

Right, I see.

Just thought of something...My content div is floating above the header, footer and wrapper div (unless I'm misunderstanding), yet it is still able to effect the wrapper div - as in, the wrapper div extends if it needs to because the content within the content div is long. I don't understand how it's doing that. If the content div is floated, surely it shouldn't be able to effect the wrapper div (even though I want it too)?

Sorry for the silly questions, I really am trying to understand though.

Hi,

I'd need to see your exact code to see what's going on but here's a quick explanation of how things should behave.

If a wrapper element (which does not create a new block formatting context (floats, inline-blocks, absolute elements and overflow other than visible all create new block formatting contexts)) contains only floated children then the height of that wrapper element will be zero.

To make the wrapper stretch around the floats it needs to be an element that creates a block formatting context as mentioned above or needs a static element to follow the floats and to be cleared (clear:both) before the closing div of the wrapper. This will drag the parent around the whole lot. The clearfix method (google it) does this by adding pseudo content to the end of the parent and clearing it to regain the flow of the document once again. The other popular method is to add overflow:hidden to the parent which as mentioned above creates a new block formatting context and will contain its children. If you need visible overflow then you can't use overflow:hidden and would use one of the other methods.

[alandsborough]

Thank you for your explanation.

I think in that case...my content div (floated) is followed by my footer div, which is cleared. Which is then the closing div for the wrapper. I presume this is why it has worked.

For reference, here is a rough draft of my CSS and HTML. Live test website is http://www.unitedkerrydom.com/index2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

body {
background: #000;
background-image: url(images/BGgradient.jpg);
background-repeat: repeat-x;
color: #FFF;
margin: 0;
padding: 0;
}

#wrapper {
width: 950px;
margin: 0 auto 0 auto;
padding: 0;
background: #000000;
background: url(images/repeatimage.jpg);
background-repeat: repeat-y;
}

#header {
width: 950px;
height: 560px;
margin: 0 auto 0 auto;
padding: 0;
background-image: url(images/topimagecomplete.jpg);
background-repeat: no-repeat;
}

#content {
float: left;
margin-top: -285px;
margin-left: 350px;
width: 440px;
display: inline;
}

#twitter {
float: right;
margin-top: -420px;
margin-right: 120px;
width: 170px;
}
#footer {
width: 950px;
height: 74px;
margin: 0 auto 0 auto;
padding: 0;
background:#000;
background-image:url(images/bottomimage.jpg);
background-repeat: no-repeat;
clear: both;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="header"></div>
<div id="twitter">Tweet</div>
<div id="content">
<p>Meat:
A hand above the water
An angel reaching for the sky
Is it raining in Heaven
Do you want us to cry

</p>
<p>And everywhere the broken-hearted
On every lonely avenue
No one could reach them
No one but you
</p>
<p>One by one
Only the good die young
They're only flying to close to the sun
Life goes on
Without you
</p>
<p>Another tricky situation
I get to drowning in the blues
And I find myself thinking
What would you do?
</p>
<p>Yes, it was such an operation
Forever paying every due
Hell, you made a sensation (sensation!)
You found a way through (found a way through)
</p>
<p>All:
And one by one
Only the good die young
They're only flying too close to the sun
</p>
<p>Meat:
We'll remember, forever
</p>
And now the party must be over
I guess we'll never understand
The sense of your leaving
Was it the way it was planned?
<p>
And so we grace another table
And raise our glasses one more time
There's a face at the window
And I ain't never, never saying goodbye
</p>

<p>All:
One by one
Only the good die young
They're only flying too close to the sun
</p>
<p>Meat:
Crying for nothing
Crying for no one
No one but you </p></div>
<div id="footer"></div>
</div>

</body>
</html>

[Paul O'B]

Yes its the cleared footer which drags the wrapper around it and thus regains the flow of the document once more.

I'm not sure from that code (the link's not working) why you have floated the #content anyway as it seems to be a single column. If its a single column it doesn't really need to be floated.

[dresden_phoenix]

Ryan ( and everyone else )

Dresden, I disagree that margin and coordinates are basically the same.

Actually I want saying they are the same. I was saying they can be used similarly to move an element visually. That's why elaborated that RP moves the element visually, bu margin actually affects the flow.

[RyanReese]

Yes but those key differences are pretty huge. That's like saying AP and position:fixed is basically the same. They both take it out of the flow but fixed will keep it on screen.

[dresden_phoenix]

WELL .. position:fixed is essentially AP = relative to VIEWPORT. I also see it AP position, but ignore the positioning declaration of all ancestors. So :fixed is really a special case of AP.

What I was saying was the opposite about margin /float/ RP/AP.. that they are not at all alike, but that they can be used to achieve the same thing.

[alandsborough]

Oops. Apologies. It's http://www.unitedkerrydom.co.uk/index2.html

[alandsborough]

I've floated it because it sits on top of part of the header wrapper. From my understanding, I thought divs could not be placed on top of each other without floating them? Unless I used relative and absolute positioning?

[Paul O'B]

I've floated it because it sits on top of part of the header wrapper. From my understanding, I thought divs could not be placed on top of each other without floating them? Unless I used relative and absolute positioning?

You only need to float when you want elements side by side. Normal static positioned elements will naturally follow each other in the flow of the document and you don't need to do anything special to them.

It looks like from your link that you are going to float a small left column anyway and if that's the case the content should be floated right instead and have no left margin because the left float won't be able to fit into a space where a margin has been applied.

[alandsborough]

Ah! I see!


I'm going to try and explain this in total noob speak, so I can understand what I'm trying to say...

If we pretend the twitter div isn't there for a moment...

Like building blocks (but within the wrapper div), the 'brick' on the top of the 'wall' is the header div, sat below it is the content div and then sat below that is the footer div. Say all these divs are normal static elements, like you say, naturally following each other. If you can see, the header graphic has part of the defined content area within the header div, but would require the content to overlap/be on top of whatever div is below it...Currently I have the content text in it's own div...

Could I in fact, put that content/text within the header div (not in another div), define the header graphic to top and no repeat and define to text margins to be x and y from top/bottom/left/right...then the header div would expand down as required by the length of the content? The wrapper div would also extend with it's background set to repeat and the footer div would move down with it all...

Is that right?

[RyanReese]

This is all assuming I understand you correctly

If you set a background image, the header will not expand to make room for it. It will only fully show if the height is enough. The header would expand as necessary depending on how much content is in it (assuming no height is set on it).

Again, same thing. The wrapper would extend assuming the height has not been clearly set.

Overall. I'd say you have it "right" .

[alandsborough]

Hmm...so I set the header div height so the full background image is visible, but then the text/content within it can't expand past that height UNLESS I say something like allow overflow or scroll?

In what way would I define the text margins separate to div margins?

Thank you for all your help guys. Really appreciate it.

[Paul O'B]

The header div is a wasted and unnecessary div as it holds no content apart from your image. You could have started the content div there instead and applied the image to the background of the content div and avoid the extra wasted div. Then you wouldn't need all those negative margins as everything goes back into the flow as required. Just ensure the content has a min-height to cater for the height of the background image if you have short pages somewhere.

Even if you did need an extra div for the header image you would have been better calling it .inner and wrapping it around the content so that you again did not need all the negative margins.

Try not to add elements when you already have elements in the page that can be utilised. A header that containes no actual content is not really a header it is just decoration and should not be noted in the mark up.

Alternatively your header should probably be done like this instead using an image replacement technique (gilder Levin)to get real content into the html.

<h1>United Kerrydom<span></span></h1>

Note that your 345k background image needs to be optimised down as that' way too big a filesize. You can probably get it down to about 50k without much noticable loss of quality.