why relative div position is not right?

[alicia]

Dear all,

Can someone please advise why when I add in a relative div (boxy2v class) into my layout, but the box moved to the wrong position as I see in dreamweaver (it suppose to stay on top/overlap between T1 (right end) and T2 (bottom left) div). Now the box is displayed at the (top overlap) bottom of ABC, 123 and top of T1 which is totally out of the position I put. Besides, the text inside this div is displayed outside of the the container below. Did I put my div for the boxy2v class in the wrong place or I have the wrong css setting? I can’t use absolute position because I need to use while loop to display this multiple times using the same classes.please advise.

123


ABC


T2


T1


Green box

[alicia]

no.. i can’t use it because i am using php while loop to display multiple records by using the same div.. so there is no way I can use absolute since that will only fix in first record and others won’t be there.. i did try that and that was the result I got unless I did it wrongly.. please advise

[Senff]

I’m also not really sure what you’re trying to do, but here’s a few tips that may get you in the right direction.

Give the green box a top of 0 and left of 0, and you’ll see where it would end up without any specific positioning (in my case, top left). Then with adding values to top and left, you can position it better.

Give it float:left, like all the other blocks. That way, it’ll interact the same way as the other blocks do with eachother. If you don’t do that, the default placement is top left.

Instead of using position:relative, use margins to position the block where you want it.

Just a few suggestions you might want to look into!

[wolfcry911]

alicia, do you have a mockup you could share with us. I strongly believe you’re going about this all wrong… I’d love to be able to help you out.

Incidentally, the browsers are displaying it correctly, while DW is not (another reason I said DW is a pile of dung in your other thread). The position of boxy2v is where you’ve set it, and the text inside of it is overflowing because the previous floats are displacing it.

[alicia]

chris, may i know why your script works with absolute but not mine? is there something wrong with my original code.. i tried to compare mine with yours but I didn’t see any difference but the still my green box doesn’t show on the right position but yours did.. please advise what I have missed. thanks

[alicia]

hi wolfcry, what mockup you meant? I was trying out the layout by using the code I have above… may I know where you think I have done wrongly?

[alicia]

another one that I tried with absolute position. It looks fine in dreamweaver (on top of bottom c and top d div) but when it loads in browser, it moved to far right.. I tried to figure out whats wrong but failed.. hopefully someone can give me an idea what I have done wrong,.. thanks

a


b


c






d

[alicia]

dear wolfcry, thanks for your comment.. do you mind to explain a little further about :
the text inside of it is overflowing because the previous floats are displacing it.
Did you mean my text is too long and the div below push it to other position? if that is the case, what is the right way to get what I want?

[wolfcry911]

by mockup I mean can you show us a pic of what you want this to look like with some fake content (other than abc, green div, etc.)

I’ll explain the overflowing text being displaced by the floats, but the remedy most likely is to completely redo the html, but again I don’t know without seeing some substantial content and without knowing the desired rendering.

Let’s jump down to the boxy2botbox classed div (terrible class names btw). This div has a set height and 5 child divs (as stated in the other thread, too many divs). The first 4 divs are floats, which are taken out of the document flow, but their content will displace inline boxes of elements left in the document flow. The fifth child (green box) div begins at the top left corner of the boxy2botbox, because the previous siblings were removed from document flow. Because the green box has a set width and height, its displayed as such. But the inline box within the div containing the text ‘green box’ has been displaced by the floats. If you remove the height and width of .boxy2v you’ll see that div grow to encompass its text node. The green div is actually rendered 20px down and right of the top left of its parent because of the position relative and the top and right offsets you’ve given it. I hope this helps explain why its rendering this way. I realize it doesn’t help in fixing things, but I need more information to help you.

[alicia]

i just tried to change the boxbox position to relative and it fixed the boxview absolute position issue. now it can displayed on the correct position.. if i keep this way of writing the css, will it cause any major issue in my page? i tried to check with multiple type of browsers and all looks fine.. please advise tq

by the way, if I don’t put div for each of the content I want to put, what will be the right way to do it since you said there are too many div inside a container.. if I don’t use div, I won’t able to separate the div with different style and content right? need your advise again.. thanks

[wolfcry911]

divs and span are structural elements – they have no semantic value (even if you give appropriate id or class names). The content should be marked up describing what it is. In your example, what is ABC? what is 123, T1, T2, green box? Are they headers? Is this tabular data? I’m beginning to think it is, and if so, tables are the correct method in marking up the data.

Again, it’s difficult if not impossible to answer your questions correctly without more information.

[alicia]

i thought div can load faster than table?

[alicia]

to display e-ticket with thumbnail and info in a box

[Paulie_D]

Alicia,

We’re all struggling to work out how this is supposed to look…. at least I am.

Can you please provide us with an image of a couple of rows of the table (ideally with some example content) so we can all visualise what it is you are trying to achieve?

[Author]

Posts