How to prevent overlapping when re-sizing a page using a CSS layout?

Hi experts,

I am trying to use CSS + DIVs instead of tables for laying out content. However, I am having trouble getting my content to not overlap when I resize the width of the page, all the way till you can’t make it thinner.  The arrow in the middle gets overlapped by the third column after resizing the page to the smallest in width. How can I prevent this in the sample code that I have below?

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #top_left_test { 
	            position: relative;
                left: 0;
                background-color: #ff6a00;
            }
            #top_middle_test { 
	            position: absolute;
                left: 35%;
                top: 0px;
                width: 100%;
	            background-color: #ffd800;
            }
            #top_right_test { 
	            position: absolute;
                left: 60%; 
                top: 0px;
                width: 100%;
                background-color: #4cff00;
            }
        </style>
    </head>
    <body> 
        <div id= "top_left_test">
            left
            <div id= "top_middle_test">  
                middle
                <input type="submit"  value =" " style="background:url(./add.png) no-repeat; height: 45px; width: 50px; border-style: none; cursor: pointer" />
            </div>
            <div id= "top_right_test">   
                  right  
            </div>
        </div>
    </body>
</html>

Open in new window


You can see it in action online as well:
http://www.apologeticscenter.net/radeusFiles/experts/preventOverlap.html

Thank you!
nvs_victorAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
That is a common problem when you use percentages which are addaptive but not responsive.

The the browser has to convert the percentages to pixels, and the proportions are not consistent across all resolutions, so some relationships get distorted.

If you are trying to support a range of resolutions to support multiple devices you might want to llok a media queries:
https://developer.mozilla.org/en-US/docs/CSS/media_queries

For the maximum control you need to use the viewport relative units and CSS calc()

In many cases a combination of the two will solve most problems, though in extreme cases you may end up needing to detect resolution and deliver alternate pages.

Cd&
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GaryCommented:
Your 'design' is inherently flawed from the outset.
Maybe if you tell us what you are trying to achieve we can help you.
0
nvs_victorAuthor Commented:
Hi COBOLdinosaur and Cathal,

thank you for your help!


COBOLdinosaur: Ok, thanks. But it seems using tables might be easier, no?


"Maybe if you tell us what you are trying to achieve we can help you."

Hi Cathal, thank you again for helping. Basically, I am trying to have three columns with content inside them, and when the page is resized to be smaller, I want the third column not to overlap the 2nd column. If you look at the sample I provided (below), you should be able to see what I am trying to prevent. The third column overlaps the Arrow graphic in the 2nd column, and it's not supposed to, when you resize the page all the way to the thinnest possible. In reality, I have more content there, so it will overlap even with the smallest resizing. Using a tabular design, I believe I won't have this problem. But using CSS + DIVs, it don't know how to solve this problem. Perhaps I should switch back to a tabular design? Using <table></table>?

http://www.apologeticscenter.net/radeusFiles/experts/preventOverlap.html

Thanks!
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

GaryCommented:
That kind of layout doesn't work in the real world - trying to make something that looks the same at 1000px as it does at 300px is not how you design a web page.
You can set your right div to this {
#top_right_test {
    background-color: #4CFF00;
    left: 70%;
    position: absolute;
    top: 0;
    width: 30%;
}

Open in new window


and your middle div to this

#top_middle_test {
    background-color: #FFD800;
    left: 35%;
    position: absolute;
    top: 0;
    width: 65%;
}

Open in new window


But that is the best you will get.
What may look ok spread over 3 columns on a desktop is no problem but don't expect it to work at 320px - nobody designs sites that way.
This is why we have frameworks like Bootstrap to rearrange the layout for mobile devices etc.
0
nvs_victorAuthor Commented:
Hi Gary,

thanks for your feedback. But a table layout using the <table> tag would do this sufficiently fine, as below:

http://www.apologeticscenter.net/radeusFiles/experts/preventOverlap_table.html

Thanks!

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .color1 {
                background-color: #ff6a00;
            }

            .color2 {
                background-color: #FFD800;
            }

            .color3 {
                background-color: #4CFF00;
            }
       
        </style>
    </head>
    <body> 

        <table border="0" width="100%" cellpadding="3" cellspacing="3">
	        <tr>
		        <td>
                    <span class= "color1">left</span>
                </td>
                <td>
		        <span class= "color2">middle
                <input type="submit"  value =" " style="background:url(./add.png) no-repeat; height: 45px; width: 50px; border-style: none; cursor: pointer" />
                </span>
                </td>
                <td>
                    <span class= "color3">right</span>
                </td>
	        </tr>
	       
        </table>


    </body>
</html>

Open in new window

0
GaryCommented:
But that not what your original code was doing, you've now separated them into separate columns.
0
nvs_victorAuthor Commented:
"But that not what your original code was doing, you've now separated them into separate columns."

Well, I was trying to create columns with my original code using CSS + DIVs.
I have read on Stackoverflow that using CSS + DIVs is better than using tables for layouts:
http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html

But seeing difficulty here with using CSS + DIVs, I think I might go back to tables.

Thanks to COBOLdinosaur, one of his solutions works well with one of my pages, but not for the other.

But thank you, I think I have found my answer here... CSS + DIVs are not easy to work with to replace tables to begin with.
0
COBOLdinosaurCommented:
Tables have a lot of problems that are a negative impact on the user, resource usage, and performance.  Those are all things that a professional has to put ahead of ease of development.  However using modern CSS based approaches is definitely not more difficult than hacking things together with tables.  

Your problem is based on not being able to get away from 20th century grid concepts and adapt to the flowing, responsive design that is the basis of virtually every modern design you will find on today's web. As long as you think of a web page as a piece of paper like a magazine page; you are going to have a problem. A table can never give the dynamics, adaptivity, or responsive behavior that users expect from a modern design.

Cd&
0
nvs_victorAuthor Commented:
Thank you COBOLdinosaur for your extended answer to my response regarding using tables.

I'll keep your points in mind.

For me to use CSS + DIVs and modern-CSS based approaches, I think I'll have to do training in order to get comfortable with it. Thanks for pointing me in the right direction.

And thank you everyone for your help! I appreciate it.

Best regards!
0
nvs_victorAuthor Commented:
@ Gary. Sorry, I made a mistake in points assignment.... I wanted to give you more points for your time in looking at my question :/ I know 50 points is very low. Again, I apologize. If I should ask the moderators to allow me to re-assign points, please let me know. Thanks!
0
GaryCommented:
Don't worry about it, it's fine. ;o)
0
nvs_victorAuthor Commented:
Ok, great :) Thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.