[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5781
  • Last Modified:

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!
0
nvs_victor
Asked:
nvs_victor
  • 6
  • 4
  • 2
3 Solutions
 
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
 
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 6
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now