Why browser on the right isnt auto re-sizing?

adamwestrop · 08-12-2011, 08:45 AM

Hey guys,

Im just learning CSS and trying to get my head round elements that float, absolute positioning and the 'jello' aspect of having auto re-sized margins.

Im just playing around with code and just came up with this, can someone tell me why my browser window on the RIGHT doesnt resize... The browser on the left does.......

Also, can someone tell me what the most common layout design is for really great websites... For websites that are 3 column for instance, I assume they are using absolute positioning? Can we combined auto re-sized margins 'jello' with absolute positioning somehow as that would seem to be perfect... Unless you can float images for a 3 column layout (keep content centre and float images left and right for 3 column layouts??)

<html>
<head>
<title>Oh yeah</title>

<style type="text/css">

.granddaddy { width: 8000px;
left-margin: auto; right-margin: auto; }

.ohyeah {
background-color: red; }

</style>

</head>
<body>
<div class="granddaddy">
<div class="ohyeah">
<p>
Oh yeah that is what I was talking about<br/>
<img src="http://files.sharenator.com/oh_yeah_Print_Screen_your_Desktop_9262010-s600x896-94422.jpg" alt="an image" width="7000px" height="200px" />
</p>
</div>
<p>

<img src="http://jspivey.wikispaces.com/file/view/warrenton-baptist-church-1-credit-peyton-knight-728499-1.jpg/99234159/warrenton-baptist-church-1-credit-peyton-knight-728499-1.jpg" />
<img src="http://www.kollewin.com/EX/09-16-01/Christ%2520Church%2520fall%252005%2520500.jpg" />

</p>
</body>
</div>
</html>

Sammy12 · 08-12-2011, 08:48 AM

any number of columns uses floats

a 4 column layout:

Code:

<div style="width: 960px; margin: 0 auto;">
 <div style="width: 100px; float: left;"></div>
 <div style="width: 200px; float: left;"></div>
 <div style="width: 200px; float: left;"></div>
 <div style="width: 460px; float: left;"></div>
 <div style="clear: all;"></div>
</div>

the better question is: what is the right browser?

Code:

.granddaddy {
width: 8000px;
left-margin: auto;
right-margin: auto;
}

margin-left: auto;
margin-right: auto;

your width is 8000px, most computers are around 1200. the safe width is 960px-1000px; (I used 960px in my example above)

adamwestrop · 08-12-2011, 09:41 AM

Thanks Sammy, I thought you would only be able to float a one or two, but I see now, you can float things to the right of what you have floated etc, thus as long as your width is wide enough, you can float numerous pictures or text blocks (not paragraphs as they will cause a link break)... Then for the centre block which isnt being floated, I can wrap that in a span and create a margin etc? Am I right?

Im learning CSS and feel that positioning is obviously key, I am starting to feel I understand it bit more now. Thanks Sammy!

So, I assume floats with auto margins are probably quite popular? It seems relative is just used to annoy people for coupons and opt in lists and absolute is probably good for a very busy page with a lot of information where someone would want the browser maximised anyway?

Thanks again Sammy,

I came up with this code:-

<html>
<head>
<title>Oh yeah</title>

<style type="text/css">

.granddaddy { width: 2000px;
left-margin: auto; right-margin: auto; }

.ohyeah {
background-color: red; }

.picture2 { float: right; }
.picture3 { float: left; }
.picture4 { float: left; }
.excellent { margin-left: 50px }

</style>

</head>
<body>
<div class="granddaddy">
<div class="ohyeah">
<p>
Oh yeah that is what I was talking about<br/>
<img src="http://files.sharenator.com/oh_yeah_Print_Screen_your_Desktop_9262010-s600x896-94422.jpg" alt="an image" width="700px" height="200px" />
</p>
</div>
<p>

<img class="picture2" src="http://jspivey.wikispaces.com/file/view/warrenton-baptist-church-1-credit-peyton-knight-728499-1.jpg/99234159/warrenton-baptist-church-1-credit-peyton-knight-728499-1.jpg" width="300px" />
<img class="picture3" src="http://www.kollewin.com/EX/09-16-01/Christ%2520Church%2520fall%252005%2520500.jpg" width="200px" />
<img class="picture4" src="http://www.kollewin.com/EX/09-16-01/Christ%2520Church%2520fall%252005%2520500.jpg" width="300px" />
<span class="excellent"> And I suppose this text will be centralised then. </a>

</p>
</body>
</div>
</html>

Sammy12 · 08-12-2011, 06:03 PM

1. wrap your code in [code][/code] tags.
2. no computer has the width you defined, the average width is around 1200px;
3. the code needs a doctype, I used the most recent one, html5 doctype
4. an image's size should not be distorted, should maintain is width to height ratio
6. a span cannot be centered (inline-element), only a block element can
7. margin: 0 auto; or margin-left: auto; margin-right: auto; are used to center an "object" like a div

essentially (span + "display: block" = div)

updated code:

Code:

<!DOCTYPE HTML>

<html>
	<head>
		<title>Oh yeah</title>
		<style type="text/css">

			.granddaddy { 
				width: 100%;
				margin: 0 auto;
			}
			
			.ohyeah {
				background-color: red;
			}
			
			.picture2 {
				float: right;
			}
			
			.picture3 {
				float: left;
			}
			
			.picture4 {
				float: left;
			}
			
			.excellent {
				display: block;
				text-align: center;
			}
			
			.ohyeah img {
				width: 300px;
				height: 448px;
			}
			
		</style>
	</head>
	<body>
		<div class="granddaddy">
			<div class="ohyeah">
				<p>
					Oh yeah that is what I was talking about<br/>
					<img src="http://files.sharenator.com/oh_yeah_Print_Screen_your_Desktop_9262010-s600x896-94422.jpg" alt="Kool-Aid Oh Yeah Image"/>
				</p>
			</div>
			<p>
				<img class="picture2" src="http://jspivey.wikispaces.com/file/view/warrenton-baptist-church-1-credit-peyton-knight-728499-1.jpg/99234159/warrenton-baptist-church-1-credit-peyton-knight-728499-1.jpg" width="300px"/>
				<img class="picture3" src="http://www.kollewin.com/EX/09-16-01/Christ%2520Church%2520fall%252005%2520500.jpg" width="200px"/>
				<img class="picture4" src="http://www.kollewin.com/EX/09-16-01/Christ%2520Church%2520fall%252005%2520500.jpg" width="300px"/>
				<span class="excellent">And I suppose this text will be centralised then.</span>
			</p>
		</div>
	</body>
</html>

take a look at your code with "inspect element". Chrome has the best inspect element, firefox has firebug which is similar. Inspect Element is the most useful tool for a web developer. right click on the screen then select "inspect element"