1

I have the following mark up:

<div id="playArea" style="position: relative;"> <div style="position: absolute; left: 295px; top: -1px; width: 313px; height: 269px;">Hello</div> <div style="position: absolute; left: 63px; top: 35px; width: 80px; height: 42px;">World</div> <div style="position: absolute; left: 534px; top: 329px; width: 183px; height: 251px;">Bye</div> </div>

But i would like to have a paragraph of text under the 'playArea' div, but because all the divs inside playArea is absolute, the text doesnt appear at the bottom of the last absolute positioned div.

I have looked into this and found an alternative by using float:left and clear:left however after using this method on the first div, you cannot position the div correctly as the starting point of the second div is under the first div and not at (0,0). Any ideas of how i can get by this.

Thanks

Improve this question
2
  • 1
    have you got a working example? or at least this as an example. Commented Dec 24, 2009 at 11:16
  • I havent, as i am currently working on localhost. sorry, See the comment that i have just added below to BalusC, this describes the problem more Commented Dec 24, 2009 at 11:42

4 Answers 4

Reset to default
0

If I understood correctly, you just have to give the "playArea" div the right height.

Edit: I mean, the combined height of everything inside it.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

But i would like to have a paragraph of text under the 'playArea' div, but because all the divs inside playArea is absolute, the text doesnt appear at the bottom of the last absolute positioned div.

As you seem to know all the dimensions and positions already, just add another absolutely positioned div to it and put the relative content in it.

I have looked into this and found an alternative by using float:left and clear:left however after using this method on the first div, you cannot position the div correctly as the starting point of the second div is under the first div and not at (0,0). Any ideas of how i can get by this.

You need to remove position: absolute to get the floats right. Just width and height are enough.

Improve this answer

3 Comments

I have removed the position: absolute, and changed the top and left to be margin-top and margin-left. But on the second and other following divs, the starting position is not at the top left of playArea (0,0), its the position under the first div. So if the first div was at (30,0) and the height was 100px, then the secon div would start at (30,100) but i want it to be (0,0) Note: These in brackets are co ordinates in terms of (X,Y)
After all, it is actually hard to understand where exactly you like to have the text. In a block element below the lowest div of the three divs? You could just add another absolute positioned div exactly there and put the paragraphs in it.
Yeah I'd like to have the text in a block element below the lowest of the three divs. If i was to position it using absolute then i believe this raises two issues. 1. I can never future things to the page without positioning them 2. My footer is positioned absolute so i dont want to have to be changing that every time and calculated where that should be
0

Float the three inner divs left, put overflow: hidden; on the playArea div and put your <p> under the three inner divs with clear: both;

Improve this answer

Comments

0

After reading the comment thread between you and "BalusC", it appears that you have modified your CSS and are now trying to float your items, and use margin-top and margin-left for positioning. You are totally able to do it that way, but you are forgetting that you can also use negative margins to position your elements as well. For example if you use margin-top:-10px; then it will pull the element up (instead of pushing it down, like a normal positive valued margin). The same goes for all of your other margins.

That seems to be the missing ingredient for you now.

Improve this answer

2 Comments

Hey, i do realise that you can use negative margins but it just means taking the height from the previous div away from the current div's margin first and this is quite a nasty way of doing things i think
The cleanest and simplest way to perform what you need to do is not float any elements. Just add a height to #playArea, as mentioned by Kaze no Koe. Based on the info you've given I can't imagine there is a better or easier way to do it than what he suggested.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.