Responsive layout with absolute positioning – is it possible ?

[writetonsharma]

Hi,

I am actually a c++ programmer and new to web (html, css, js etc). Working since last 6 months.

Let me explain my issue. I work on a product which has a MS word like editor and we can create a full document (which can include images, tables, styles, fonts, graphics, charts, and much more than this) in it. I developed a html driver as part of export feature which is based on absolute positions. So the user creates a document and says “export” and the code generates an html which is working perfectly.

Now as a next step I have to give support for multiple devices (screens). I have read a lot over the web and the majority of things I came across is responsive/fluid layouts (for eg. twitter bootstrap). These layouts looks to working with no positions (or with normal flow of the document) and if I give any positions, they don’t work.

Any ideas how can I go about this thing? for eg. is this possible only with CSS or I have to do something when the user opens the html and change the layout at runtime using JS. Any possible pointers would help me.

Thanks,
ns.

[jamygolden]

This may help: (link removed by admin, 404ing)

Centered responsively with position: static (default, but relative would work here too) and position: absolute;

[writetonsharma]

Thanks for the reply Jamy.
This seems to be working horizontally but lets say I do this:

this is a test para.this is a test para.this is a test para.this is a test para.this is a test para.this is a test para.this is a test para.this is a test para.

Now the text is going to flow into second div as the top coordinate is always constant.

In case of this:

#static { background: lightblue; margin: 0 auto;position:absolute; left:500px;top:50px; }

#absolute { background: red; position: absolute; left: 50px; top: 50px; }

The right div will overflow the screen when the screen gets small.

[jamygolden]

position: absolute ignores other elements, apart from it’s position: relative ancestor.
Therefore #static doesn’t care about #absolute in your example. If you want the elements to respond to eachother, perhaps you are looking at doing this the wrong way. Do you have an image of what you’re trying to achieve?

[writetonsharma]

I have taken a small segmet of the html generated by the driver below. some parts may be missing but it can give you an idea what kind of html is generated.

YOUR BANKING STATEMENT











A PARTNER YOU CAN COUNT ON

Now if you see, the html has positions for every element so that it looks exactly like a print media (eg. pdf). Now I need to change it so that it can work as a responsive layout. If you want a full html, I can show that too.

Thanks.

[Author]

Posts