Stretching Div to the right of the browser

Look at this Untitled Document

How can I automatically stretch the ‘mainContent’ Div to the right of the browser window?

Thanks.

Don’t float it:

#mainContent {
    background-color: pink;
    [s]float: left;[/s]
    margin-left: 230px;
    overflow-x: hidden;
    overflow-y: auto;
    word-wrap: break-word;
}

BTW, on the left column, float and position:fixed are mutually exclusive, with positioning winning out. Generally, using fixed as you have is contra-indicated. My present viewport is 750px high and loses the bottom of the column. Fixed position is non-scrollable.

cheers,

gary

Thanks! That’s sorted it.

What would you suggest me doing with the left bar? The only thing I can think of is making the height smaller so it can fit on smaller screens…

Thanks

Nah, float it and lose the fixed position. There are those who will insist that the column should not be able to scroll off screen, but that is graphic design for print thinking. There are two things that visitors to web sites know better than anything else; how to use the back-button, and how to scroll. Fixed positioning breaks the scroll function. It is always a Bad Thing™ to mess with your visitors’ expectations of how things work.

cheers,

gary

In addition to axing the fixed positioning, you may want to try using MODERN markup techniques instead of HTML 3.2 with a 4 tranny on it… since this appears to be a new site and as such the FONT tag has NO BLOODY PLACE in your HTML.

It would also help you to use SEMANTIC markup – like heading tags for your headings, anchors for what obviously look to be anchors (and not bold tags), maybe use padding instead of “spacer div”, etc, etc…

and probably swing an axe at SIFR while at it, since that was NEVER a good idea to use on websites in the first place and the much more proper “webfonts” works much, MUCH better.

… and if you really want the menu column to “stay” there is a way to do it without position fixed. HTML is for saying what things ARE, not what they look like; this isn’t 1997 anymore.

It’s kinda weird because your page is this bizarre mix of 1997 and 2006…

Oh, and that analytics crap? delete it or move it where it’s valid, before </body> – or is that automatically crapped on the end by your host? (I HATE hosts who do that)

Modern HTML for what you have there should probably look more like this:


<!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"
	lang="en"
	xml:lang="en"
><head>

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

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Matt Hamilton Portfolio
</title>

</head><body>

<div id="fixedBar"> 

	<h1>
		Matt Hamilton<br />
		Portfolio<br />
		<small>Web Design, Print, Programming</small>
	</h1>
	
	<h2>Pages</h2>
	<ul>
		<li><a href="#">Elements</a></li>
		<li><a href="#">Archives</a></li>
		<li><a href="#">Full Width</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
	
	<h2>Skills</h2>
	<ul>
		<li><a href="#">All</a></li>
		<li><a href="#">Animation</a></li>
		<li><a href="#">Artwork</a></li>
		<li><a href="#">Motion Graphics</a></li>
		<li><a href="#">Print Design</a></li>
		<li><a href="#">Product Design</a></li>
		<li><a href="#">Web Design</a></li>
	</ul>
	
<!-- #fixedBar --></div>

<div id="scrollWrapper">
	testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>
	testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>
	testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>
	testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>
	testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>
	testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>
	testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>
	testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>
	testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>
	testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>
	testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>
	testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>
	testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>
	testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>
	testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>
	testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>
	testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>
	testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>
	testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>
	testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>
	testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>
	testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>
	testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>
	testing<br/>testing<br/>testing<br/>testing<br/>testing<br/>
<!-- #scrollWrapper --></div>

</body></html>

Gimme a few and i’ll slap together the CSS to go with it. SEMANTIC markup my friend…

… and I too scrapped the fixed positioning once I realized there was a MAJOR problem with it.

If the screen is too short (like say… 768 tall) you can’t scroll down to see the rest of the menu! See why fixed should NEVER be used on anything tall.

Matt Hamilton Portfolio

Not an exact 1:1 as I took a few liberties to make it accessible, but for the most part that’s how I’d go about making that layout.

As with all my examples the directory:
Index of /for_others/mattHamilton

is wide open for easy access to the bits and pieces.

Good work Jason but I see you have made the same “mistake” I see a number of people making (including Gary above) :slight_smile: (It’s not really a mistake but a browser interpretation).

When you use overflow to create a block formatting context alongside a float you have to lose the margins otherwise Safari and chrome reduce the width of the element by the amount of the margin.

Look at your example in Safari and Chrome to see what I mean.

The solution is simply to remove the left margin and then all is well. However that breaks IE6 so you need to add haslayout for IE6 and then it behaves the same and creates a square block to the side.

I though it worth pointing out as I have seen this a number of times now in peoples code.

Of course it still suffers from dropping if the page is squeezed small and there is fixed width content in the way. The solution then is to nest an inner floated element of 100% width with overflow:hidden added.


#content {
    padding:8px;
    overflow:hidden;
    zoom:1.0;
}
#inner-content {
    width:100%;
    float:left;
     overflow:hidden;
    background:#F88;
}

For other browsers it would be wise to add a min-width to the viewport at the width of the largest fixed content or content will be clipped without a scrollbar.

Ack! I didn’t practice due diligence. By that I mean I didn’t remove the existing overflow properties. Remove them? I didn’t even notice them. :frowning: My intent was use the existing margin to create the spacing while a normal block element took up all available width. Removing the float property meant no more shrink wrap, which was the initial issue.

cheers,

gary

No worries - I knew you knew :slight_smile:

Well that’s the most retarded thing I’ve ever seen a browser do – that’s worse than IE!

Must be why I do all my layouts as content first double-wrapped… Here I try to go old-school/simple without testing because that’s an old old old way of building a page; turns out Webkit’s a re-re.

Yes its pretty weird behaviour and doesn’t seem to make much sense.

I have so much to learn! My problem is I don’t fully understand the html and css that I use.

Thanks to you all

Updated my website now. Matt Hamilton Portfolio

Is the code up to scratch yet?
I’m having problems aligning the ‘filter’ text with the other menu items at the top.

Also whats with the text taking a few seconds to load? Is it just down to the speed of the host server or is it something I’ve done?

Thanks

You placed that rather awkwardly and the heading should really be on its own and not in the list as such. You can fix it in situ if you remove the padding from the list and apply it to the anchors only.


#filterTop li{padding-right:0}
#filterTop li a{padding-right:20px}

Also whats with the text taking a few seconds to load? Is it just down to the speed of the host server or is it something I’ve done?

Thanks

Font files are usually very large files and there is always a delay downloading them which is why I don’t like using them.

Well how come the text on my old page Matt Hamilton Portfolio loads way faster than the updated one [url=http://matthamilton.co.uk/new/test.html]Matt Hamilton Portfolio ?

You switched the load order… move your external link to the google fonts to before the screen.css

Or remove it entirely and do the fonts yourself. Personally I don’t trust pulling presentation off anyone else’s servers – even google’s.

Actually… hah, you’re loading them TWICE – one directly using @font-face from the code I gave you, once off google using LINK in the markup.

Pick one, not both.