Layout overlapping/collapsed shows in IE7

Ah. cool thanks. wish i could get these position thingy str8 into my head :frowning: i wanna be master of it like u and paul. you two are ninja’s

what i m using is nested table. the parent table has a class with height. the inner element is just a table with element. that is how i m overcoming faux column problem. am i going right?

Ah, that white gap…well that’s because using offset coordinates to position things only moves an element visually but not physically, changing it below will work

.rightcorner{background:url(../images/tr.jpg) no-repeat right 0 ;width:8px; height:10px;position:relative; right:-12px; [b]margin-[/b]top:-12px; float:right;}

Make it margin-top and not top: :slight_smile:

Where do I find the location and sharing boxes as I can’t see them on that page?

i was experimenting and i didn’t saved the back up. so gimme like 15 min to get it back as it was

paul now i have updated the page. i do get little better effects but the gap in between the 1st box and 2nd box is huge.

Hi,

That’s a bit of a mess and unlikely to work properly.:slight_smile:

You should put the general information, Location and Sharing elements inside a left floated wrapper so that you don’t get a gap where the right floated element finishes.

Remove the absolute positioning and the negative relative positioning from those elements also.

Where you need content aligned in columns then you must float whole columns and not try to float every little thing left and right because the floats won’t slide up into any gaps if it drops to a new line.

Put those three boxes in a left float and then they will stay together and the right floated upload image won’t affect the content inside the left float.

ok i will try that. meanwhile i have this very common problem of floats. when i need my elemets to float around eachother. they don’t. whereas i don’t use clear:right.why this happens?

Paul i did as u asked. remove absolute positioning as well as relative but my floats doesn’t fall right. float next to each other

You’d still need to float the location and sharing boxes to make them horizontal and then it should be good to go.

i did that. put them in a div The general info box location and sharing and gave them float:left. but the sharing box is not floating right side of next box.

No you don’t have the individual 300px width boxes floated.

Although you are containing the lefts side in a parent float you will still need to float individual boxes when you want horizontal alignment within that parent.

so ur saying that location and sharing will be floating in there own div and not the general information div.like first box will be float left, and second and 3rd block will have their down div in which it will float:right. thus float next to each other. right?

Don’t change anything else just float the location and sharing elements. No need to add divs around them. Just class them up and float them.

All those three elements need to stay inside the main left floated column or they won’t slide alongside the right floated column.

It should be straight forward :slight_smile:

it is straight forward. but if see at the link. the sharing box is below sharing not side by side :frowning: that is the problem, i put div for temporary use, after the style has been set i will put it in my css file. now i put a border to highlight too.

i was able to fix it with adding table{float:left} still i m curious. what effect it will have on other pages. shld i use inline?

You should just add a new extra class to those specific tables and then you won’t change all tables on all pages :slight_smile:

did you checked the link again? am i doing good?

The link has disappeared so I couldn’t check. :slight_smile:

Sorry.i deleted that page, now its