Hi,

 

I have a static loading HTML web page that I'm trying to mimic to a responsive behaviour and am having issues getting my client's image to the edge as it does in the static HTML loading page.

 

Here's the URL for my working in trying to transform this page to Responsive: http://www.eparrs.com/Private/responsive/

 

And, here's a picture of the static HTML page I'm trying to mimic: http://www.eparrs.com/Private/responsive/StaticHTML-loading-page.png ...the white edge being the edges of the browser.

Any suggestion(s) will be GREATLY appreciated.

 

Thank YOU in advance,

Trish

Hi Trish,

 

Modify the following code:

 

Modify the padding for #maincontent to this:

padding: 10px 0 0 10px;

Modify the width for both span_1_of_2 divs to this:

width: 50%;

Remove the following from the CSS of .col:

margin: 1% 0 1% 1.6%;

Remove this from #right_div:

margin-left: 1%;

That'll fix your problem. Also, in your HTML, you have this error:

<div id:="containerR"

Remove the ':' and your div will align to the right as you desire. You'll need to weak the responsive styling to reflect the changes I've advised.

Edited January 6, 201412 yr by throzen

Thank YOU throzen... you are a gem!!!!

 

So far, so good. To get the sticky note that floats on the original HTML web page http://www.eparrs.com/Private/responsive/StaticHTML-loading-page.png will I need to use 3 col or can "float" be used in responsive design?

yes u can put it inside right div along with the image and float it..

 

also have a look at bootstrap

Edited January 7, 201412 yr by sash_oo7

Thank YOU sash_oo7,

Took some playing around with BOTH div tags but FINALLY I can say, this page is a success!

I found it odd that when editing on my WindowsXP computer I saw quit a different response to the containerR and stickyNote divs than what gets displayed online... and, yes, with the VERY same browser.

Thanks HEAPS both you and throzen for putting me onto the correct path!

Happy Camper I am

Trish