fluid width with dynamic content overflowing screen resolution

Hi I have a lil problem and not too sure how to fix it without using any jquery. atm i have a fluid width layout and in the content area i have dynamic content that can stretch over the size of my screen's max resolution. Problem is 100% width will only go up to viewport size.
But this creates a gap when scrolling the overlowing content is there a way to fix this via css only so everything extends up to the largest child? Using overflow will just cut the content. My clients usually only want fixed widths designs or standard widths so never encountered this prob before. Should also note using overlow properties makes me loose my right padding which is not an option.

 

Sorry what do you specifically mean here, something is causing horizontal scrolling? What's you layout like, try to explain it in a bit more detail or provide a link if possible.

 

Here is an example:

<div style="width:100%; min-width:1142px; ">
<div style="width:100%; height:20px; background-color:#000;"></div>
<img src="http://wiki.developers.facebook.com/images/e/ed/Connect_dark_large_short.gif" width="1400px" height="23" alt="fb" />
</div>

Code (markup):

 

The default behavior of a DIV is to expand to 100% if the content is smaller than that, or expand past that as neccessary.

Therein lies your solution - don't declare width on those elements and let the DIV's default behavior do the work for you... at least, if I'm understanding your question properly. As a rule of thumb, there is rarely if ever a good reason to be declaring width:100% on anything.

Though since your image is only 20px tall, I'm questioning if that image should even BE in the markup... and an 1124 width not even being 1024 friendly probably means the layout is made of /FAIL/, and kind-of defeats the point of using fluid in the first place.

BTW, px on a HTML width attribute is invalid.... and I'm assuming this was for demonstration purposes since production code shouldn't use the style attribute (or the style tag for that matter)

 

Yea it's a demo i whipped up in a few secs to show what happens only (i c&p the px by error, hey it was late lol) , i never use inlines cept for jquery/java interactions. The site is a "hd" site for larger monitors so 1142 it is. The problem is if you scroll right the divs won't expand to full width because of the overflow of the viewport by the image (which will be a flash movie in the layout that changes sizes from 1280x720 down to 640x360 on user selection).

 

So.... 'viewport'?!? Do you mean you are setting overflow:hidden somewhere in the document? When I say pull width I probably should mention pull any unnecessary overflow states (or at least set them to overflow:auto) - since there are no elements called 'viewport' in a HTML document, I assume you are somehow dicking with it in javascript or something?

Though jquery, designing to not gracefully degrade to at least 800 friendly, and flash movie 'in the layout' - that sounds like three of the cardinal sins in web design right there... since as a rule I would never use ANY of those. Jquery is a fat bloated pile of trash, min-width that wide means you've got a complete accessibility /FAIL/ - and unless that video is actually some sort of movie or game it probably doesn't belong as flash. Lemme guess, using some form of 'grid' type CSS framework loaded with presentational classes as well?

Do you have a full example of what you are trying to accomplish? (as in the ENTIRE layout, not some crappy little snippet where we're stuck guessing?)

 

Lol there is no cute grid framework that's just awful and like i said we don't care so much about users with 800 px wide screens, since the site is catering to higher end users so wide screens mostly. Site will also only cater to high speed internet users. Movie will be hd flash content too and were not even considering ie6 there will be a pop up to tell em to upgrade their 8 yr old browser. So you can say it's not a mainstream website for everyday use or users, only top end users. I guess we could limit the max video resolution by disabling a link to the bigger movie for the smaller monitors <1280 or enabling the jquery hack just for them, but i'm trying to get this prob fixed the natural way with css only so it looks proper if you scroll right on lower resolution when the window is shrunk. Now if i play with overflow the movie or image placeholder will get chopped off at the max screen resolution maybe it's hardware issue but this is what happens here so no go.

The example is good enough to show the bug that's happening, not allowed to show the actual design, too high profile and not live yet. There is some right floated content as navigations for the header and footer tho and they have to be at the ends and overlayed over a patterned bg ( or inside a parent if you want) with a unique bg of their own.

 

I'm not 100% sure on what you want, but is it because the children DIV are not expanding the full width of the image?

Well firstly if you knew the width of the contents then you could just apply the width to the parent.

Secondly if you don't then you adding float:left to the parent should make it wrap around by default. like this:

<div style="min-width:1142px; float:left;" >
<div style="height:20px; background-color:#000;"></div>
<img src="http://wiki.developers.facebook.com/images/e/ed/Connect_dark_large_short.gif" width="1400px" height="23" alt="fb" />
</div>

Code (markup):

Is that what you were looking for?

You were setting 100% width on the parent container, which was therefore giving it 100% width of the viewport, you shouldn't set it a width (min and max widths should be fine) so it can wrap around it's children by default. The float:left sort of triggers it to wrap around if the children are larger than 100% of the viewport (for some reason I don't exactly know why).

 

Hi unfortunately not exactly since the layout (blackline in this case) has to stretch 100% width for larger monitors 24" n such so this wouldn't make the layout fluid over the wrapped child. Also i wouldn't be able to have the navigation that should be floated to the right in that black lined div at the extreme right of the page in all cases, even under a viewport overflow resulting in a window scroll.

There happy with the jquery handling the width, problem is i'm not if there's a css solution with no compromises.
I'm starting to think about positioning as maybe being a possible solution.

 

I really think you are overthinking this - but I'd have to see the whole layout and content around it not just the snippet.

From what you are describing this should be all you need - don't declare width:100% on anything, it should expand, or if too small give scrollbars.

<div style="min-width:1142px; ">
	<div style="height:20px; background-color:#000;"></div>
	<img 
		src="http://wiki.developers.facebook.com/images/e/ed/Connect_dark_large_short.gif"
		width="1400px" height="23"
		alt="fb"
	/>
</div>

Code (markup):

If it isn't, then something's wrong upstream of it in your page... one of the wrapping elements having width declared on it. Get rid of all width declarations on div's, end of problem... there is no good reason to EVER be declaring width:100% on a non-floating element apart from tripping haslayout - and then there are always other ways of tripping haslayout (like height, zoom, etc)

Again, do you have a full page, not just a microsnippet? You're not going to get a whole lot of help without showing the full deal, or at least a full example. What I just showed, which is what I said originally SHOULD do what you are asking, if it's not then something is wrong elsewhere in your code.

 

Wait, I see what you were trying to say, when too narrow the div you made black is not expanding the same width as the image - is that what you were talking about? (screencap of the problem would have been clearer than your engrish)

What you want to trip there is overflow:hidden so that the outer element reports it's wrapping width to it's children. For IE6/earlier tripping haslayout will do the job too.

<!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"
/>

<title>
	Overflow test
</title>

<style type="text/css">
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

#pageWrapper {
	overflow:hidden;
	min-width:1142px;
}

* html #pageWrapper {
	position:relative; /* make sure IE refreshes this */
	overflow:visible;
	height:1%; /* trip haslayout */
	width:1142px; /* in case expression fails */
	width:expression(
		(document.body.clientWidth>1174) ? "auto" : "1142px"
	);
}

</head><body>

<div id="pageWrapper">
	<div style="height:20px; background-color:#000;"></div>
	<img 
		src="http://wiki.developers.facebook.com/images/e/ed/Connect_dark_large_short.gif"
		width="1400px" height="23"
		alt="fb"
	/>
</div>

</body></html>

Code (markup):

Should do the job. If you don't care about IE6, delete the part behind the * html hack.

 

Yep that's what i'm talking about. However the above code will chop off the end of the image on a lower resolution monitor, like i said in my first post about using overflow, plus in this case we loose the scroll bars. If i use floats i loose right padding on the image i tried using borders and such but that din't work either.

 

No it won't - if you don't set any widths... That's the key. Don't set width on body, or any of the div, and you should get your scrollbars. If you aren't, then something else is wrong with your page. Overflow:hidden can't chop anything off if you don't tell it WHERE to chop things off. Don't declare a width on the outermost element, end of problem.

 

Hmm well i used the exact above code stand alone ( cept for adding the missing style close ) and it chops the right end of the button i can show you a screen grab if you want, doesn't work over here.

 

What browser? I've only tested it in IE8/FF/Opera/Chrome. When I'm at my workstation next I'll take a look at what saffy and IE 6/7 do with it.

 

ff3.5 on windows and linux, haven't run it on browsercam yet tho to see if it's hardware related but on opera it chops off at the t < so does chrome but the black div goes full width, ff will actually have the black div a bit smaller (like 20px) than the viewport width while in ie6 it is the viewport size so scroll right a bit and it chops off.