CSS - Text Stays In One Spot When I Resize Browser Window

Hey guys. I have a layout designed right now that has, in brief, a wrapper around my main content and then a left and right float(both floated left). My wrapper of the whole site is just set to a margin of 30px on the right and left, meaning it doesn't have a set width. My left float is a column, and is set to a width of 220px. Then, whenever I add content to my right side, it will stay there until it goes over a certain amount, and then it will break and go below the left float.

I have used the clearfix method on the main container float, and I really don't know where to turn now. Here are the styles for my main container, left, and right floats:
Code:

#content {
	background: #fff;
	padding: 0 10px;
	padding-top: 5px;
       /* This division also has the .clearfix class */
}
#left {
	float: left;
	width: 220px;
	border-right: 2px solid #ccc;
}

#right {
	float: left;
	padding: 0;
	margin-left: 10px;
	font-size: 1.2em;
        /* This is the Div that drops after too much content */
}

I would like it so that the content in the right div will adjust when the window is resized, but it won't break to the line under the left float.

I know this is an easy fix, I just don't know it. Basically I have a vertically that spans the top of my page, but if the window is too small or resized too small, the menu is broken into two parts, the part that doesn't fit the menu forms a new line. How can this be fixed? Much thanks!

Here's the site with the issue: http://www.entertainmentengineering.com/v6.issue1/
Reply With Quote

Hello,
For some reason I'm having difficulty with this,

I'm designing a page that needs a background image centered even when the browser is resized like on ask.com. I don't need several different background options, just one background. It seems to me it should be simple enough but I'm having one of those nights. Can anyone point me in the right direction? Thanks,

Jasontor

I am a novice at web authoring. I am working a jQuery slide show. I would like to make this slide show automatically resize to fit the browser window. But the show is contained in a div element which requires a fixed size in pixels. When I try to substitute percentages for pixel values, the images no longer appear. Please advise if there is a way to accomplish this resizing. Due to a prohibition against posting URLs for new user accounts, I can't provide a link to the slide show I am trying to resize, or a link to an example of the resizing behavior which I would like to emulate.

Hi, I'm trying to redesign my website to be CSS and XHTML compliant. While I've managed it and everything is almost perfect, IE has one very minor glitch. The page is http://hiveworldterra.ibboard.co.uk/HWTv2.html

My 3-col design is based on (and modified from) a 3 col layout I found on the net (there is a credit in the CSS of the page).IE displays everything perfectly and even resizes horizontally without a problem, but as soon as you try to resize vertically, the left column will often overlay the center column. Refreshing the page without resizing the window fixes it and resizing the page horizontally fixes it.

As per usual, Firefox is perfectly fine, no matter how you resize the page (until you get down to rediculously small, at which point its to be expected!)

It doesn't seem to be a width issue, as I've got a 1280x1024 monitor at work and at full width on one monitor or down at 500px wide there are only a handful of vertical sizes where the left column doesn't overlap, but every time it does overlap then if you resize horizontally by a single pixel then it fixes itself.

Anyone have any ideas or IE only hacks (preferably neat ones!) to stop this minorly annoying behaviour? From problems I had while modifying the original layout, it almost seems as if IE is losing the float on the left column.

Thanks

Hi there,

I'm making a weblog layout made in php all the articles are going to be stored on the center of the screen, the code I used for this is width:50%, but how do I make the css code so that the center page color will be all the way at the bottom no matter what size of a window is used?

Thanks in advanced!

Good day,

I'm hoping to have this content right up against the top of the browser window. I've played around with padding values, but they don't seem to do anything and I'm unsure of what to try next. Any advice appreciated.
Code:

#sectionHeader {
	width: 800px;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
}

Code:

<body>
<div id="sectionHeader">
<img src="images/header.jpg" alt="Welecome to Doctor Martin's Site" width="800" height="321" border="1" />
</div>
</body>

hey all

i have a prob....when the browser window is maximised it is fine...however...when i make it a bit smaller the content div shoots off halfway down the page

Go Here To See What I Mean

the css can be found here

any ideas...cus im stumped

thanks very much

RF

I am not experienced in CSS or any web design for that matter. I am trying to make a very simple web site using CSS and I am being frustrated by some positioning problems. I would appreciate your help!

Problem:
When I restore the browser window to a smaller size, "things" in my web page start to overlap eachother. The smaller the window, the greater the overlap.

What I have done:
I have validated everything, guess and checked multiple positioning elements, fiddled with margins, and have browsed through multiple CSS sites looking for help.

What I would like fixed:
When the browser is in a smaller window, there will be a scrollbar that appears preserving the size of the web page instead of scrunching it all together.

Graphical Representation:

Full-Screen
Smaller Window - Overlapping
I Like This - Note the Scrollbar on the bottom

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Chapel</title>

<style type="text/css">
	@import "layout.css";
	
</style>
</head>

<body>



<div id="chapell">
<img src="graphics\chapel1.jpg" alt="chapel">
</div>

<div id="news">
<a href="news.html">
<img src="graphics\news.jpg" alt="news">
</a>
</div>

<div id="us">
<a href="index.html">
<img src="graphics\us.jpg" alt="us">
</a>
</div>

<div id="directions">
<a href="directions.html">
<img src="graphics\directions.jpg" alt="directions">
</a>
</div>

<div id="contact">
<a href="contact.html">
<img src="graphics\contact.jpg" alt="contact">
</a>
</div>


<div id="schedule">
<a href="schedule.html">
<img src="graphics\schedule.jpg" alt="schedule">
</a>
</div>

<div id="myspace">
<a href="http://www.myspace.com" target="_blank">
<img src="graphics\myspace.jpg" alt="myspace">
</a>
</div>

<div id="art">
<a href="art.html">
<img src="graphics\art.jpg" alt="artistry">
</a>
</div>

<div id="messages">
<a href="messages.html">
<img src="graphics\messages.jpg" alt="messages">
</a>
</div>



<div id="scoop">
<img src="graphics\scoop.jpg" alt="scoop">
</div>

<div class="roundcont">
   <div class="roundtop">
	 <img src="tl.gif" alt="" 
	 width="15" height="15" class="corner" 
	 style="display: none" />
   </div>

   <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
   elit, sed do eiusmod tempor incididunt ut labore et 
   dolore magna aliqua. Ut enim ad minim veniam, quis 
   nostrud exercitation ullamco laboris nisi ut aliquip 
   ex ea commodo consequat. Duis aute irure dolor in 
   reprehenderit in voluptate velit esse cillum dolore eu 
   fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
   non proident, sunt in culpa qui officia deserunt mollit 
   anim id est laborum.</p><br><br>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
   elit, sed do eiusmod tempor incididunt ut labore et 
   dolore magna aliqua. Ut enim ad minim veniam, quis 
   nostrud exercitation ullamco laboris nisi ut aliquip 
   ex ea commodo consequat. Duis aute irure dolor in 
   reprehenderit in voluptate velit esse cillum dolore eu 
   fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
   non proident, sunt in culpa qui officia deserunt mollit 
   anim id est laborum.</p>
  
   <div class="roundbottom">
	 <img src="bl.gif" alt="" 
	 width="15" height="15" class="corner" 
	 style="display: none" />
   </div>
</div>	




</body>
</html>

Code:

	
	body {
		color: white;
		background-color: #FDF8DF				
		}

	#chapell img {
		position: absolute;
		left: 21.5%;		
		top: 34%;
		border: none;
		margin-bottom: 10%;
		margin-right: 10%;
		}	

	#news img {
		position: absolute;
		left: 20%;		
		top: 38%;
		border: none;
		margin-bottom: 10%;
		margin-right: 10%;
		}

	
	#us img {
		position: absolute;
		left: 20%;		
		top: 42%;
		border: none;
		margin-bottom: 10%;
		margin-right: 10%;
		}
	
	#directions img {
		position: absolute;
		left: 20%;		
		top: 46%;
		border: none;
		margin-bottom: 10%;
		margin-right: 10%;
		}

	#contact img {
		position: absolute;
		left: 20%;		
		top: 50%;
		border: none;
		margin-bottom: 10%;
		margin-right: 10%;
		}
	
	#schedule img {
		position: absolute;
		left: 20%;		
		top: 54%;
		border: none;
		margin-bottom: 10%;
		margin-right: 10%;
		}

	#myspace img {
		position: absolute;
		left: 20%;		
		top: 58%;
		border: none;
		margin-bottom: 10%;
		margin-right: 10%;
		}

	#art img {
		position: absolute;
		left: 20%;		
		top: 62%;
		border: none;
		margin-bottom: 10%;
		margin-right: 10%;
		}
	
	#messages img {
		position: absolute;
		left: 20%;		
		top: 66%;
		border: none;
		margin-bottom: 10%;
		margin-right: 10%;
		}

	#whoarewe img {
		position: absolute;
		left: 37%;		
		top: 25%;
		}

	#scoop img {
		position: absolute;
		left: 36%;		
		top: 25%;
		margin-bottom: 10%;
		margin-right: 10%;
		}		

	#findus img {
		position: absolute;
		left: 40%;		
		top: 25%;
		}	

	#banter img {
		position: absolute;
		left: 32.5%;		
		top: 25%;
		}	

	#docket img {
		position: absolute;
		left: 39%;
		top: 25%;
		}

	#expressions img {
		position: absolute;
		left: 37%;		
		top: 25%;
		}	
	
	#listen img {
		position: absolute;
		left: 39%;		
		top: 25%;
		}	

	.roundcont {
		top: 35%;
		right: 35%;
		width: 35%;
		background: white;
		color: black;
		position: absolute;
		margin-left: 10%;
		margin-top: 0%;
		}
	
	.roundcont p {
		margin: 0 3%;
		font: 12px arial, tahoma, serif;
		}

	.roundtop { 
		background: url(tr.gif) no-repeat top right; 

		}

	.roundbottom {
		background: url(br.gif) no-repeat top right; 
		}

	img.corner {
  	 	width: 3%;
  	 	height: 15px;
   		border: none;
   		display: block !important;
		}
 

Thank you,
Daniel

I am trying to center a 760x580 DIV box in the center of the browser window (horizontally AND vertically) regardless of the user's screen size. Horizontal centering hasn't been a problem, but I can't figure out how to get the thing to center vertically.

Here is my code at the moment:

Code:

<html>
<head>
	<title>Center a DIV</title>
	<style type='text/css'>
		html {height:100%;}
		body {height:100%; margin:0; padding:0;}
		
		#content {
		  position: absolute;
		  right: 0;
		  left: 0;
		  width: 760px;
		  height: 580px;
		  margin: 0 auto;
		  overflow-x: hidden;
		  overflow-y: hidden;
		  background-image: url(grunge_paper.jpg);
		}		
				
		img {display: block;}
	</style>
</head>
<body bgcolor='black'>
<div id='content'>
	
</div>
</body>
</html>

I am trying to get my container to be 100% the height of the browser window but have so far been unsuccessful, and I am not sure what I am doing wrong. Thanks for any help.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>TEST</title>
<style type="text/css" media="all">
body {
    margin: 0;
    padding: 0;
    color: #333;
    font: 13px Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
    background: #EEEEEE;
    text-align: center;
    }
a {
   	color: #434C3E;
    }
a:hover {
    color: #F15925;
    }
#container {
    margin: 0 auto;
    width: 724px;
	height:100%;
    position: relative;
    background: #fff;
    padding: 0 10px 0 10px;
    text-align: left;
    }
* html #container {
    width: 744px;
    w\idth: 724px;
    }
#logo {
    position: absolute;
    top: 20px;
    left: 70px;
	width:94px;
	height:147px;
	background-image:url(../images/logo.gif);
    }
h3 {
	color:#555555;
    }
#top {
    height: 145px;
	margin-left:240px;
    }
#container #intro #quickSummary .p1 {
    font-size: 11px;
    height: 171px;
    margin: 0;
    width: 724px;
    color: #fff;
    font: 12px/150% Trebuchet MS;
    }
#container #intro #quickSummary .p1  span {
    padding: 30px 530px 0 30px;
    display: block;
    margin: 0;
    font: 12px/150% Trebuchet MS;
    }
#text {
    margin: 20px 20px 0 243px;
    }
#text p {
    line-height: 150%;
    margin: 10px 0 10px 0;
    }
#footer {
    color: #fff;
    height: 48px;
    text-align: right;
    padding: 0 10px 0 0;
    line-height: 26px;
    font-size: 11px;
    }
#footer a {
    color: #fff;
    text-decoration: none;
    }
#footer a:hover {
    text-decoration: underline;
    }
</style>
</head>
<body>
<div id="container">
	<div id="intro">
		<div id="logo"></div>
		<div id="top"></div>
		<div id="text">
			<h3>Heading number one</h3>
			<p class="p1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam arcu purus, sodales volutpat, eleifend ac, semper ut, dolor. Curabitur porttitor suscipit ligula. Sed vehicula mauris non sapien suscipit luctus. Fusce luctus pulvinar lectus. Aenean mi. Pellentesque rutrum nibh ut diam. Mauris porta, lectus sit amet ultricies lobortis, metus mauris semper orci, porta tincidunt neque dui ac magna.</p>
			<p class="p2">Curabitur nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum eu purus ac nisl vestibulum ultrices. Pellentesque lacus. Suspendisse quam risus, hendrerit sit amet, gravida non, dapibus quis, ante.</p>
		</div>
	</div>
	<div id="text">
			<h3>Heading Number Two</h3>
			<p class="p1">Etiam nec metus vestibulum lacus facilisis consectetuer. Cras sed odio. Sed et purus a pede condimentum fermentum. In hac habitasse platea dictumst. Integer ornare nisl eu sem.</p>
			<p class="p2">Nam laoreet, eros non cursus varius, nisi enim pharetra nisi, ut fringilla nisl turpis a diam. Proin ac elit ut nibh nonummy ultrices. Phasellus felis quam, consectetuer in, bibendum et, dictum id, mi. Nunc quis eros id metus auctor volutpat. Nunc diam odio, vehicula a, accumsan a, semper quis, mauris. Ut mauris enim, ultricies sed, viverra non, porta vitae, dui.</p>
	  <div>
			<h3>Heading Number Three</h3>
			<p class="p1">Curabitur nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum eu purus ac nisl vestibulum ultrices. Pellentesque lacus. Suspendisse quam risus, hendrerit sit amet, gravida non, dapibus quis, ante.</p>
      </div>
    </div>
	<div id="footer">Foo</div>
</div><!--end container-->
</body>
</html>

I deleted the other posting as it take too long to work on it and it doesn't work. So, I got the other code from google search and decided to use it. There, I rearrange, redo, customzie the scripts to make it work better. Now I have one problem. See the class "wrapper" that make use of the height. I when I have it set at 100%, the footer extend too far down and the vertical scroll bar appear at the right. This is not what I want. I figure maybe it's because of the float that the browser doesn't know the real height of the header and footer. Can anyone help? I would really apppreciated it.


Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  background-color: #FFFF00;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
}
html {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  width: 100%;
}
table {
  border: 0px solid #000000;
  border-collapse: collapse;
  border-spacing: 0px;
}

#columnleft {
  margin: 0px;
  padding: 0px;
  width: 10%;
  height: 100%;  /* Required by IE to inherit from wrapper (IE Hack) above */
  background-color: #0000FF;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position: absolute; */
  float: left;
}
#columnright {
  margin: 0px;
  padding: 0px;
  width: 10%;
  height: 100%;  /* Required by IE to inherit from wrapper (IE Hack) above */
  background-color: #0000FF;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position: absolute; */
  float: right;
}
#footer {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 65px;
  background-color: #FFCC00;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position: relative; */
}
#clearfooter {
  clear: both;
}
#header {
  margin: 0px;
  padding: 0px;
  width: 100%; 
  height: 65px;
  background-color: #FFCC00;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position:relative; */
}
#main {
  margin: 0px;
  padding: 0px;
  width: 79.8%;  /* #columnleft + #main + #columnright = 100% width, but take away 0.02% for the #main due to for some browser's inaccurate mathetical rendering, such as 100.1% or 100.2% which cause the Right Column to jump to the bottom, so 99.8 % total width is better as it make the browser's glitch not be that noticeable. Just add some background color to the #wrapper so that the color can match either the #main or #columnright */
  height: 100%;  /* Required by IE to inherit from wrapper (IE Hack) above */
  background-color: #FFFFFF;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position: relative; */
  float: left;
}
#wrapper {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  /* min-height: 80%; */  /* Might not be needed, it's an IE Hack... */
  background-color: #FF0000;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position: relative; */
}
/* IE Hack - Layout REQUIRES a height here to work */
/*
* html #wrapper {height: 100%;}
*/
</style>
</head>

<body>
<div id="header">Header Text</div>
 <div id="wrapper">
  <div id="columnleft">Left Text</div>
  <div id="main">Center Content</div>
  <div id="columnright">Right Text</div>
 </div>
<div id="clearfooter"></div>
<div id="footer">Footer Text</div>
</body>
</html> 

Thanks,
FletchSOD

I'm using The Man in Blue's "footerStickAlt" code to ensure a footer sticks at the bottom of the page even with *short* content.

No problem there til I resize my browser window. When the browser window shortened and I scroll down, the footer has jumped up and is concealing part of the menu. Yikes.

Pages where the content is longer than the menu are fine, so I haven't uploaded them. It's only when content is shorter than the menu that this issue arises ~ which is the exact issue it's supposed to be tackling!

Flaw/s in the code?

I've already tried ripping out the horizontal min-widths and it seems there's no conflict there. From what I can make out, it's just a matter between the menu and the footer.... altho, when the browser is shortened in the way I've described the actual footer moves higher than it should be. Still, can't believe it's blueman at fault here. Must be something I've missed or tagged wrong. Or maybe it just doesn't work with this kind of menu?

For reference, Blue Man's original code is he http://themaninblue.com/writing/perspective/2005/08/29/

Am just hoping the clever folk here will have some advice. I've burnt the whole day on this to no avail :|

heloo geniuses.


please to someone helping me for preventing more of the hair pulling out.

I am trying to figure out how to repeat a border image, basically to repeat the div holding the wood images on this page:
http://greentypeoftube.com/kc/

essentially to have the bottom expand with the user's browser window size.

thanks to you for the thinking and the helping of me with it.

s

oh. also I am hoping for a way to show the scroll buttons only if the text [will be in another div being cropped by the content window}.

is there a way to do this with css?


I am working much very hard to be more with css to design than just designing it.