Sun, 2009-05-24 09:55
Hello,
How do I create this layout: one div for the center which will be fixed size (900px), a div for the right and one for the left. The side divs width will match the place between the center div and the end of the screen (fill that area).
I worked on it for a few hours and couldn't get it right.
Thanks,
Ori.
Sun, 2009-05-24 10:37
#1
Will the left and right
Will the left and right 'columns' actually contain content or are you just talking about the areas outside the layout where the body background shows through?
Sun, 2009-05-24 10:39
#2
They won't contain content,
They won't contain content, but background images (I can't use the body bg, because it is a different image for the left and for the right).
Ori.
Sun, 2009-05-24 10:47
#3
Would need to see what it's
Would need to see what it's going to look like to best advise what to do.
Sun, 2009-05-24 17:34
#4
This might help progress things
Let's see if we can progress things a little for you and focus just on the code between your and tags. You might like to try the following:
Put a wrapper
around the whole page and amongst other declarations, set its width to the 900px you want and then use the classic margin: 0 auto; to centre this
, or in other words, centre the entire content of your page.
Next, and make sure it is outside the page wrapper
you have just created, put in an empty
with a unique ID. Your page template will then look a bit like this:
<body> <div id="page-wrapper"> ...the rest of your page ...will occupy this space </div> <div id="extraImage1"></div> </body>
What you then have is a centred page with margins as wide as they need to be. And you now have two "hooks" on to which you can add background images. For example, use the body for the left-hand background image and the div#extraImage1 (just an example name) for the right-hand background image. Also add position: absolute; to this extra div and you can then put both images just exactly where you want them.
(Actually the absolute positioning is not strictly necessary for this particular example - but it would be a good idea if the extra div were in amongst the rest of your code somewhere.)
Some purists might object to adding a non-semantic
solely for imagery, but pop over to the fabulous http://www.csszengarden.com/, one of the most well-known sites for encouraging beautiful web design, where this technique is the cornerstone of the majority of the inspired designs. Enjoy.
Regards
Sun, 2009-05-24 21:58
#5
Or you could just attach an
Or you could just attach an image to the body and then another to a full-width page wrapper div, but like I said before, really need to see what the layout's s'posed to look like to be able to tell.
Sun, 2009-05-24 23:48
#6
As long as we're guessing at
As long as we're guessing at the page,
html { background: lightblue url("left.png")left repeat-y; height: 100%; } body { background: transparent url("right.png") right repeat-y; min-height: 100%; } * html body { /* for IE6 */ height: 100%; }
//edit to add height properties. --gt
cheers,
gary
Mon, 2009-05-25 09:12
#7
I've always wondered of that
src("right.png")
That's a new one to me??
I've always wondered of that worked. Previously I'd only tried with background colours to see what would happen (body didn't go 100% high like I thought it would, and like it does if HTML has no background declarations).
I noticed something:
With a non-repeating image, the HTML element, while its background colour would spread across the viewport as expected, the background image did not like "left center" in some browsers (FF2/K-Meleon and 3, Opera) while Saffy-Chrome and IE (and Konq) treated "center" as center of the viewport.
Adding to anything inside the body (to increase its height) moved the "centered" html-element's image, as did explicitly stating "height: 100%;" on the HTML (even thought the background colour made it look like it was already 100% high and wide).
Horizontal centering worked in every instance.
Mon, 2009-05-25 17:57
#8
Stomme poes
src("right.png")
That's a new one to me??[
:bigoops: I'll edit that. :blushing:
I've always wondered of that worked. …
To html, add {{height: 100%;}. To body, add {min-height: 100%;}, and for IE6, {height: 100%;} (properly filtered).
cheers,
gary
Tue, 2009-05-26 07:55
#9
It's in there now, commented
It's in there now, commented out (just height on html alone worked, though I didn't check IE6 again). I'd screwed around a bit with that page to see what would happen.
Nice technique, I'll likely use it.
Tue, 2009-05-26 18:09
#10
Thanks, an interesting
Thanks, an interesting technique. I'll probably use it in the future, but I'm afraid it won't help in my case.
I need that the BG images will be attached to the center.
(Examples:
Before resizing: http://img16.imageshack.us/img16/8528/beforeo.jpg
And after: http://img14.imageshack.us/img14/6851/afterv.jpg)
Thanks for your help!
Ori.
Tue, 2009-05-26 22:47
#11
This has issues, but maybe
This has issues, but maybe they won't matter.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta name="generator" content= "HTML Tidy for Linux (vers 7 December 2008), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" /> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="author" content="Gary Turner" /> <style type="text/css"> /*<![CDATA[*/ #wrapper { width: 900px; margin: 20px auto; position: relative; } #sidepic1 { position: absolute; top: 0; left: -150px; } #sidepic2 { position: absolute; top: 0; right: -150px; } /*]]>*/ </style> </head> <body> <div id="wrapper"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis velit risus, ut suscipit dui? Nulla at porttitor nulla. Pellentesque enim elit, ultrices nec consequat non, pretium ut nisi. Pellentesque nec augue sem. Pellentesque consequat dictum orci nec vehicula. Proin id ultrices quam. Pellentesque non lorem malesuada arcu vehicula semper. Aenean bibendum suscipit blandit. Sed vestibulum, neque vel volutpat dapibus, neque metus fermentum nulla, vitae luctus velit arcu vitae quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam placerat fringilla sodales? Vivamus eu consequat leo. Curabitur accumsan semper pharetra. Vestibulum sit amet leo lacus! In fringilla pretium elit aliquet consequat.</p><img id="sidepic1" src="bullseye.jpg" alt="" height="150" width="150" /> <img id="sidepic2" src="bullseye.jpg" alt="" height="150" width="150" /></div> </body> </html>
cheers,
gary
Wed, 2009-05-27 06:45
#12
Hello, Someone directed me
Hello,
Someone directed me to this page:
http://www.pmob.co.uk/temp/fixed-center-fluid-sides.htm
Which is exactly what I need. Thanks everyone for your replies!
Ori.