Content Retreats Past The Left Hand Side In Small Browsers

Hi,

I am using a simple web design which works good in all browser resolutions except for when the browser goes below 1024 x 768px. When the browser display is smaller than this size, the side bar starts to retreat past the left hand side and as the display gets smaller, the content in the middle starts to retreat past the left side also.
At first i wasn’t worried about this because less than 1% of PC internet users have a screen below this size, but now - phone browsers are on the rise and the design I am using looks crappy on these small browsers due to the left hand retreat.

I was wondering what would be the simplest way to stop the content from retreating past the left hand side? I am currently using separate divs and they are all absolute positioned.

This is an example of the code that i am using:

<div style=“position: absolute; left: 50%; margin-left: -325px; width: 650px; height: 284px; z-index: 2; top: 165px”>

I will provide 2 screenshots to give examples of what i mean by the content retreating past the left hand side.

Any help with the most simple solution for this would be much appreciated.

Thanks,

Glassy.

Hi Glassy. Welcome to SPF :slight_smile: As you can see, your attachments are still pending, awaiting approval. Maybe you can post a link to your site.

That said, looking at your example, gives an answer to your question. The inline styling you use (you should not use inline styling at all) is very poor. As the word suggest, position absolute is absolute. Just imagine what happens when someone resizes his/her browser window.

But like I said, post a link to the site and I’m sure we can find a solution to your problems.

OK,

Yes i would agree with you that i need to get around to putting those styles in a stylesheet. I need to redesign the whole thing.

The positioning works OK, except for browsers smaller than 1024 x 768px.

Here is the link to my site - http://www.phuket-fever.com

Thanks for wanting to take a look.

So basically it’s not working fine since there are still people around using a smaller browser, and not only that there are plenty of people around having the actual 1024 x 768px, but which are having their browser sidebar open, creating the same effect.

I don’t want to sound discouraging, but I think you should really try to make an effort to make this completely CSS based. It’s really quite a mess in your html with all those inline styles. Maybe someone else does, but I don’t see a quick fix.

Off Topic:

How is Phuket? I came their quite often, years back while I was living in Koh Samui

OK,

Thanks for looking at it and i agree with you that with all those inline styles, it is a mess.

Um, well i will redesign the whole thing again but the question i want to know is - what is the easiest way to design a fixed with site that stops retreating once it reaches the left hand side with smaller browsers?

Thanks.

Oh and Phuket was great as always, i was there 3 months ago and there were no where near as many tourists around which makes it very easy for a single guy to pick up women. I am going again in 2 weeks.

I went to Koh Samui 8 months ago and it was great there too, the Ark Bar Beach Resort was really good. I will go back there again as soon as i can.

The easiest way is not to have a fixed width, because that will inevitably break when the viewport is narrower than the fixed width. What you could do is to set a max-width rather than a width, so that the site will never grow wider then that width but can still shrink smaller when the viewport is smaller.

There are plenty of ways to design a site that works fine on narrow/variable screen sizes - you would need to be more clear about how the site should work and how the different elements should be positioned and should interact.

As Stevie D already mentioned. A max-width would indeed be more appropriate, but since you mentioned a fixed with in this post I made a quick setup, for you to have some kind of a start.


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html,body,address,blockquote,div,form,fieldset,caption,h1,h2,h3,h4,h5,h6,hr,ul,ol,ul,li,table,tr,td,th,p,img {
	margin: 0; 
	padding: 0; 
}

ul, ol, li {
	list-style-type: none; 	
}

img,fieldset {
	border: none;
}

html, body {
	height: 100%;
}

body {
	width: 100%;
	background: #FFF url(images/backgrounds/bg.gif);
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 87.5%;
	line-height: 130%;
	text-align: center;
}

#wrapper {
	width: 960px;
	min-height: 100%;
	margin: 0 auto -200px;
	position: relative;
	text-align: left;
}

* html #wrapper {
	height: 100%
}

#header {
		width: 100%;
		padding-top: 45px;
		position: relative;
		overflow: hidden;
}

/* logo and title images. */

#header .logo,
#header .title {
	width: 235px;
	height: 35px;
	float: left;
}

#header .title {
		float: right;
		background: url(images/backgrounds/title.gif)
}

#header .logo a {
	width: 235px;
	height: 35px;
	display: block;
	background: url(images/backgrounds/logo.gif) no-repeat;
	text-transform: uppercase;
	text-indent: -999em;
}

/* Top Menu */

#top-menu {
	width: 242px;
	margin-top: 30px;
	float: right;
	overflow: hidden;
	clear: both;
}

#top-menu li {
	width: 80px;
	height: 24px;
	line-height: 24px;
	float: right;
}

#top-menu li a {
	width: 80px;
	height: 14px;
	line-height: 14px;
	display: block;
	text-align: center;
	text-decoration: underline;
	color: #0000FF;
}

#top-menu li a:hover,
#top-menu li a:focus {
	text-decoration: none;
	color: #2D569E;
}

#top-menu li a.middle {
	border: solid #2D569E;
	border-width: 0 1px;
}

#content-wrapper {
	width: 100%;
	position: relative;
	overflow: hidden;
	clear: both;
}

#left,
#middle,
#right {
		width: 180px;
		min-height: 100px; /* For Demonstration purpose */
		float: left;
		background: red; /* For Demonstration purpose */
}

#middle {
	width: 600px;
	background: green;
}

#footer {
		width: 100%;
		height: 180px;
		position: relative;
		background: #D8D8D8; /* For Demonstration purpose */
		border-top: solid 20px #0073AA;
		clear: both
}

.clear {
		height: 200px;
		clear: both;
}


</style>
</head>

<body>
<!-- Start Wrapper -->
<div id="wrapper">

<!-- Start Header -->
<div id="header">
<!-- Logo -->
<div class="logo"><a href="#" title="Phuket Fever Logo">Phuket Fever Homepage</a>
<!-- End Logo --></div>

<!-- Title -->
<div class="title">
<!-- End Title --></div>

<!-- Top Menu -->
<ul id="top-menu">
<li><a href="#" title="">Home</a></li>
<li><a  class="middle" href="#" title="" >Contact</a></li>
<li><a href="#" title="">Maps</a></li>
<!-- End Top Menu --></ul>

</div><!-- End Header -->

<!-- Start Content -->
<div id="content-wrapper">

<div id="left"></div>

<div id="middle"></div>

<div id="right"></div>

</div><!-- End Content -->

<div class="clear"></div>
</div><!-- End Wrapper -->

<!-- Start Footer -->
<div id="footer">

</div><!-- End Footer -->

</body>
</html>


Note: There are several ways of doing this (100% height, sticky footer), this is just one

The key to your content disappearing is your centering method.


<div style="position: absolute; 
            left: 50%; 
            margin-left: -325px; 
            width: 650px; 
            height: 284px; 
            z-index: 2; 
            top: 165px">

The negative margin, when it draws an element past the edge of the viewport, is not scrollable. The AP element is out of the flow, and invisible to the other elements, including html.

This is another example of why absolute positioning is a poor tool for page layout.

As another post mentions, it’s not the screen size that matters, it’s the app’s window size. I would prefer to run my browsers at 800×600, a perfect size for a two column layout. Unfortunately, the current fashion is three columns, requiring 1024px width. Oh, and my work stations have 24", 1920×1200 and 1920×1080 monitors. My laptop is 16", 1366×768. I prefer to use the additional workspace for additional (visible) apps.

cheers,

gary

Thanks very much for your help and thanks donboe for the html example, i will try that out and see if i can work with it.
From what you guys are telling me, the max width is the way to go. With the max width layout, would photos and words float around inside the divs when the screen gets smaller, because id prefer the photos to not float around?

Oh and another question about the max width layout, once the layer stops stretching out due to the max width, wont this cause a larger space on the right side and give the appearance of the content - not being centered?