Solved

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

Posted on 2014-03-06
12
3,823 Views
Last Modified: 2014-03-07
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
Comment
Question by:nvs_victor
  • 6
  • 4
  • 2
12 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 450 total points
ID: 39910048
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 50 total points
ID: 39910137
Your 'design' is inherently flawed from the outset.
Maybe if you tell us what you are trying to achieve we can help you.
0
 

Author Comment

by:nvs_victor
ID: 39910498
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
 
LVL 58

Expert Comment

by:Gary
ID: 39910595
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
 

Author Comment

by:nvs_victor
ID: 39910823
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
 
LVL 58

Expert Comment

by:Gary
ID: 39910854
But that not what your original code was doing, you've now separated them into separate columns.
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

Author Comment

by:nvs_victor
ID: 39911039
"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
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 450 total points
ID: 39913323
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
 

Author Comment

by:nvs_victor
ID: 39913362
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
 

Author Comment

by:nvs_victor
ID: 39913496
@ 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
 
LVL 58

Expert Comment

by:Gary
ID: 39913506
Don't worry about it, it's fine. ;o)
0
 

Author Comment

by:nvs_victor
ID: 39913778
Ok, great :) Thanks!
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now