Right Column Overlapping Center Column

HTML & CSS
1

Ugh!! I hope this isn’t a hard problem to track down or fix… :wall:

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…

(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…

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

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

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.:slight_smile:

4

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.:slight_smile:

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


<!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…


#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

From that snippet it looks like your min-width is about 820px and not 720px.

e.g.


#pageWrapper{
min-width: 820px;
}
6

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. :slight_smile: (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

520 + 100 + 200 = 820


#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.


<!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

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

[QUOTE=DoubleDee;5453352
One last question…
Why do we add min-width: 821px to #pageWrapper instead of to #pageInner??
[/QUOTE]

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

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!! :tup:

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

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

WOW!!! :eek: (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?! :wink:

(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!!!) :cool:

Looks like I’ll be buying some more SitePoint books shortly… :wink:

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

Sincerely,

Debbie