SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Right Column Overlapping Center Column

    Ugh!! I hope this isn't a hard problem to track down or fix...

    I have a fairly complicated layout, and since my website is almost done, it is even trickier. (Not to mention that a lot of time has passed since I first wrote this CSS, so it's all very rusty!)

    Anyway, here is my issue...

    When my webpage is at Full Width, it looks like this...

    Attachment 62215

    (Notice how there is a nice 20px "gutter" between the Right Column Box and my Center Column Box...)


    However, if you grab the lower right-hand corner of the browser window, and slowly drag it to the left - thus making things more narrow - then eventually when my Middle Column "bottoms out", then the Right Column overlaps the Middle Column, like this...

    Attachment 62216


    Before I have to start posting a bizillion lines of HTML and CSS, it is my hope that the problem I just described is common enough that someone will say, "Oh, you just need to adjust ___."

    Any ideas what I screwed up since paul O' helped me lay things out 18 months ago??

    Sincerely,


    Debbie

    p.s. I am using a Max/Min setting for my Middle Column...

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    It'll be something simple enough, but we need some code to play with. Try to reconstruct the minimum code needed to demonstrate the issue and post it here.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Debbie,

    At a guess it looks like you need to set a min-width on the main container that is equal to the minimum width that the page can squash to. It looks like your 100% wide page is just continuing to shrink but your elements are at a width where they can't get any smaller. You have to set a min-width on the page to match this.

    However, as Ralph said we are just guessing until we can see a little code.

  4. #4
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi Debbie,

    At a guess it looks like you need to set a min-width on the main container that is equal to the minimum width that the page can squash to. It looks like your 100% wide page is just continuing to shrink but your elements are at a width where they can't get any smaller. You have to set a min-width on the page to match this.
    I had the same thought last night before bed. (I tried tweaking some things this morning, but no luck?!)


    However, as Ralph said we are just guessing until we can see a little code.

    Okay, here is a stripped down version of my code... (If you need more code, just say so.)

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    	<!-- ################## DEBBIE ##################### -->
    	<!-- HTML Metadata -->
    	<title>test11</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<meta name="description" content="" />
    	<meta name="keywords" content="" />
    
    	<!-- Page Stylesheets -->
    	<link type="text/css" rel="stylesheet" href="/css/z_main.css" />
    	<link type="text/css" rel="stylesheet" href="/css/z_layout.css" />
    	<link type="text/css" rel="stylesheet" href="/css/z_top_menu.css" />
    	<link type="text/css" rel="stylesheet" href="/css/z_components.css" />
    </head>
    
    <body>
    	<div id="pageWrapper" class="clearfix">
    		<div id="pageInner">
    			<!-- BODY HEADER -->
    
    <!-- PAGE HEADER -->
    <div id="pageHeader">
    
    	<!-- COMPANY BRANDING -->
    	<h1 id="companyLogo">
    		<a href="/">
    			<span></span>
    		</a>
    
    		DoubleDee, Inc
    	</h1>
    
    
    	<!-- TOP MENU -->
    	<ul id="topMenu">
    		<li >
    			<a href="">Home</a>
    		</li>
    
    		<li class="current">
    			<a href="">Section1</a>
    		</li>
    
    		<li >
    			<a href="">Section2</a>
    		</li>
    
    		<li >
    			<a href="">Section3</a>
    		</li>
    
    		<li >
    			<a href="">Section4</a>
    		</li>
    	</ul><!-- End of #TOPMENU -->
    
    </div><!-- End of #HEADER -->
    			<!-- MIDDLE COLUMN -->
    			<div id="pageMidCol_2">
    
    				<!-- FEATURED SUBSECTIONS -->
    				<div id="boxFeaturedSubsections">
    					<h2>Featured</h2>
    
    					<div class='boxSubSection'>
    											<h3>Economy</h3><div class='subFeatured'>
    														<a href='/finance/economy/fastest-growing-small-business-sectors-for-2013'>
    															<img src="/images/Cheetah_100x64.jpg" width=100" alt="" title="" />
    															<h4>Fastest Growing Small-Business Sectors for 2013</h4>
    														</a>
    														<p>Here is a look at the industries where U.S. companies with under $10 in annual sales have shown the highest and lowest percentage change during 2012.</p>
    													</div><div class='subArticles'>
    															<ul>			<li>
    																	<a href='/finance/economy/sequester-could-lead-to-more-start-ups']}'>Sequester Could Lead to More Start-ups</a>
    																</li>			<li>
    																	<a href='/finance/economy/sec-silent-as-crowdfunders-wait']}'>SEC Silent as Crowdfunders Wait</a>
    																</li>			<li>
    																	<a href='/finance/economy/which-states-support-main-street']}'>Which States Support Main Street?</a>
    																</li>			<li>
    																	<a href='/finance/economy/best-cities-for-small-business']}'>Best Cities for Small-Business</a>
    																</li>			</ul>
    													</div></div>
    				</div><!-- End of FEATURED SUBSECTIONS -->
    			</div><!-- End of #MIDDLE -->
    
    			<!-- RIGHT COLUMN -->
    			<div id="pageRightCol">
    				<div class='boxDimension'>
    											<h2>Location</h2>
    											<ul><li>
    										<a href=''>North America</a>
    									</li><li>
    										<a href=''>South America</a>
    									</li><li>
    										<a href=''>Europe</a>
    									</li><li>
    										<a href=''>Asia</a>
    									</li><li>
    										<a href=''>Africa</a>
    									</li></ul>
    										<a href=''>Australia</a>
    									</li></ul>
    										</div>
    
    
    			</div><!-- End of #RIGHT -->
    
    		</div><!-- End of #INNER -->
    	</div><!-- End of #WRAPPER -->
    
    	<!-- BODY FOOTER -->
    
    	<div id="pageFooter">
    		<ul>
    			<li><a href="">One</a></li>
    			<li><a href="">Two</a></li>
    			<li><a href="">Three</a></li>
    			<li><a href="">Four</a></li>
    		</ul>
    	</div><!-- End of FOOTER -->
    
    </body>
    </html>

    And here are the Styles I think you care about...
    Code CSS:
    #pageWrapper{
    	position: relative;
    	z-index: 0;
    	min-height: 100%;
    	min-width: 760px;
    	max-width: 1200px;
    	margin:	0px auto;
    	margin-top: -50px;
    }
     
    * html #pageWrapper{                        
    		height: 100%;
    }
     
    #pageInner{
    	position: relative;
    	z-index: 0;
    	width: 100%;
    	overflow: hidden;
    }
     
    #pageHeader{
    	position: relative;
    	z-index: 2;	
    	width: 100%;
    	background: #FFF;
    	border-top: 50px solid #F00;
     
    #pageLeftCol{
    	position: relative;
    	z-index: 2;	
    	float: left;
    	width: 200px;
    	overflow: hidden;
    }
     
    #pageMidCol_2{
    	position: relative;
    	z-index: 2;	
    	float: left;
    	width: 100%;
    	margin-right: -200px;
    }
     
    #pageRightCol{
    	position: relative;
    	z-index: 2;	
    	float: right;
    	width: 200px;
    	overflow: hidden;
    }
     
    #boxFeaturedSubsections h2,
    .boxDimension h2,
    .boxSubSection h3{
    	position: relative;
    	zoom: 1.0;
    	margin: 0 -15px 0 -15px;
    	padding: 0.4em 15px 0.2em 15px;
    	text-align: left;
    	font-size: 1.1em;
    	font-weight: bold;
    	-moz-border-radius: 4px 4px 0 0;
    	-webkit-border-radius: 4px 4px 0 0;
    	border-radius: 4px 4px 0 0;
    }
     
    #boxFeaturedSubsections{
    	margin: 20px 220px 50px 0px;
    	padding: 0 50px 50px 50px;
    	min-width: 520px;						/* 0px + 20px + 520px + 20px + 200px = 760px Min-Width */
    	max-width: 960px;						/* 0px + 20px + 960px + 20px + 200px = 1200px Max-Width */
    	clear: both;
    	text-align: justify;
    }
     
    #boxFeaturedSubsections h2{
    	margin: 0 -50px 0 -50px;
    }
     
    .boxSubSection{
    	margin: 30px 0 0 0;
    	position: relative;			/* 2013-05-22 */
    	overflow: hidden;
    }
     
    .boxSubSection h3{
    	margin: 0 -15px 1em -15px;
    }
     
    .subFeatured{
    	float: left;
    	width: 45%;
    	overflow: hidden;
    }
     
    .subFeatured a{
    	color: #333;
    	text-decoration: none;
    }
     
    .subFeatured img{
    	float: right;
    	display: block;
      margin: 0 0	0 15px;
    	background: #CCFFFF;
    }
     
    .subFeatured h4{
    	padding: 0;
    }
     
    .subArticles{
    	float: left;
    	width: 55%;
    	margin: 0 0 2.5em 0;
    }
     
    .subArticles ul{
    	padding: 0 0 0 50px;
    }
     
    .subArticles ul li{
        padding: 0 0 0.2em 0;
    }
     
    .boxDimension h2{
    	margin: 0 -15px 0.5em -15px;
    }
     
    .boxDimension ul li{
        padding: 0 0 0.2em 0;
    }


    WOW!! I feel dizzy?!


    Hopefully I grabbed all of the code you guys need to help out...

    Sincerely,


    Debbie

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    From that snippet it looks like your min-width is about 820px and not 720px.

    e.g.
    Code:
    #pageWrapper{
    min-width: 820px;
    }

  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    From that snippet it looks like your min-width is about 820px and not 720px.

    e.g.
    Code:
    #pageWrapper{
    min-width: 820px;
    }
    Weird, when I first tried your suggestion, it pushed my Middle Column to the left and my Right Column to the right so there were no gutters on the outside?!

    Then I quit out of FireFox, tried again, and it seems like we have a winner. (Actually 821px is perfect...)

    So dumb question, but can you help me understand how you came to the number 820px?

    When I tried to figure things out, I took the min-width = 520px on #boxFeaturedSubsections + 20px gutter + width = 200px on #pageRightCol. (Actually it looks like I had a mid-width = 760px on #pageWrapper, so not sure where I came to that?!)

    Also, why doesn't the Right Column *stop* when it hits the Middle Column, instead of continuing to go, and overlapping?

    Sincerely,


    Debbie

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post

    So dumb question, but can you help me understand how you came to the number 820px?
    520 + 100 + 200 = 820
    Code:
    #boxFeaturedSubsections{
    padding: 0 50px 50px 50px;/* 100px horizontal padding*/
    min-width: 520px;/* 520px min-width */
    }
    #pageRightCol{
    width: 200px;
    }
    Also, why doesn't the Right Column *stop* when it hits the Middle Column, instead of continuing to go, and overlapping?
    Because they are sitting in an element that is 100% wide and as the browser window gets smaller the elements is still 100% wide but the content inside is wider than that 100% and just sticks out of the 100% div and is just ignored. Its only when the min-width on the parent kicks in that the 100% inner container can say "hold on" I'm at my limit now.

    If a container is 100% wide then it is still 100% wide even when the window is very small so if you have a large fixed width element inside then at some stage it will always stick out unless a min-width is applied.

    Perhaps easier to see with a simple example.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .outer {
    	width:50%;
    	padding:20px ;
    	border:1px solid #000;
    	background:red;
    	min-height:300px;
    	margin:0 auto;
    }
    .test {
    	width:500px;
    	height:200px;
    	border:1px solid green;
    	background:yellow;
    	margin:0 auto;
    }
    </style>
    </head>
    
    <body>
    <div class="outer">
    		<p class="test">Testing</p>
    </div>
    </body>
    </html>
    See what happens to the inner yellow container as you resize the window. At a certain point the width of the inner element is greater than the width of the parent but as the parents width is in percentage then the browser ignores anything that sticks out of the container. The width of the parent will continue to decrease until it is effectively zero.

  8. #8
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    520 + 100 + 200 = 820
    Code:
    #boxFeaturedSubsections{
    padding: 0 50px 50px 50px;/* 100px horizontal padding*/
    min-width: 520px;/* 520px min-width */
    }
    #pageRightCol{
    width: 200px;
    }
    Okay, got it!


    See what happens to the inner yellow container as you resize the window. At a certain point the width of the inner element is greater than the width of the parent but as the parents width is in percentage then the browser ignores anything that sticks out of the container. The width of the parent will continue to decrease until it is effectively zero.
    Yes, that helps a lot!!

    One last question...

    Why do we add min-width: 821px to #pageWrapper instead of to #pageInner??


    Debbie

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee;5453352
    One last question...
    Why do we add [b
    min-width: 821px[/b] to #pageWrapper instead of to #pageInner??
    Same reason. If you set a 820px min-width on page-inner then it will stop that section getting smaller than 820px but pagewrapper can still go as small as 760px and so will keep on shrinking. It may at first not be obvious or noticeable but if you had a background on pagewrapper it would not encompass its children when the horizontal scrollbar appeared on the browser window.

    A wrapper needs to have a min-width equal to the sum of its largest fixed width element (or elements) unless all elements can scale to very small - which is unlikely unless they just contain plain text.

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I'm still playing around with FireBug, and trying to update the comments in my CSS, and make sure I literally understand things down to the pixel, but once again you have been an enormous help!! THANKS!!


    So, on a related topic, we discussed in the past, "How narrow should you allow?"

    In 2013, what is your take on that? (My website doesn't support mobile, and I just want a set-up that allows 95% of visitors to *comfortably* visit my website...)

    As you can see, I chose - for whatever reason - to have a Max-Width of 1200px. And while I'm tweaking things, I am debating what my Min-Width should be...

    My updated Min-Width is 842px, and I'd say for my Section landing page, that is about as narrow as I'd want to go, and still have it useable!!

    Thanks,


    Debbie

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    So, on a related topic, we discussed in the past, "How narrow should you allow?"

    In 2013, what is your take on that?
    A year in web design is a long time and things are constantly changing and evolving. These days "responsive design" is the buzzword but what does that mean exactly?

    It should mean that your page responds and adapts in some way to the device that is viewing it. Although, you say you are not supporting mobile does that mean you are not supporting tablets either? e.g. ipad, ipad mini, various other devices ranging in size but not specifically mobile. You may find that a lot of people now consume information via these smaller devices.

    The lines are more blurred than they have ever been in the past and we are at a point now where we just don't know what are visitors will be viewing our sites on. Some say that desktops will be in the minority and that tablets, mobile and other devices will take over. The truth is that they are all probably partly right and users can not be categorised into one group. When people are out and about they are mobile users; when they are at home they are ipad and tablet users; when they are at work (or working/coding/writing) then they are desktop users.

    So to answer your question you should make the site as narrow as your design allows and as narrow your user base expects.

    At present you have identified that the min-width of your page is 820px which means you cover most desktops as there are very few 800px users these days. Other devices may still view your site and what they see will depend on the device. Most will scale the site very small so it fits on the screen which means that the text is tiny and unreadable which is why some devices have "pinch and zoom" to allow sections of content to be read more easily.

    If you have identified that mobile is not a concern for you then you need to do nothing but should be aware that its easier to build in mobile support from the ground up rather than trying to tack it on later. There is no getting away from the fact that responsive design is more complicated and more time consuming to construct but ultimately leads to a better experience for all your users.

    I think the key to responsive design is not to think about devices but to think about the design. In your design you have a responsive site from 820px - 1200px so the next logical step would be to utilise media queries and change the design so that it fits from 820px and smaller. Perhaps going from 2 columns into one column. It doesn't have to be "full mobilisation" but some small steps in the right direction.

    Sorry, I can't give a simple answer because in the end it all depends...

  12. #12
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    WOW!!! (I didn't realize the world and the web had changed so much since I started on my v2.0?!)

    Well, a lot of what you said sounds like a REAL BUMMER... However, throughout my journey of trying to get v2.0 done, I have discovered that if I "Stop the Presses!!" every time something I do isn't up to someone else's standards, then I'd never finish my website?!

    (It's rather depressing to think some might say that the last 24 months of my life were for not, but such is life... However, deep down, I still want to believe that I have a solid website design - for now - and that I can always look into what you are saying when I start v3.0 later this summer - assuming I ever get v2.0 out the door!!!)

    Looks like I'll be buying some more SitePoint books shortly...

    Thanks for your help with my OP, and thank you also for helping me to keep my eyes on the future!!

    Sincerely,


    Debbie


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •