CSS - Images Wont Resize To Fit Browser Window In Ie

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 all i have a page here http://www.prxa.info/test/index.php
as you can see i am using rounded borders, but the bottom right and top right images don't want to appear, i don't know why either

Hiya, im trying to place a blog inside a table and also have a picture above the table and some links.

In Mac Firefox and Camino it works perfectly. but in IE or Safari it just doesn't want to work.

Please help

Thanks guys

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>

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.