12 replies [Last post]
vbCrLf
Offline
newbie
Last seen: 13 years 12 hours ago
Joined: 2009-05-24
Posts: 4
Points: 0

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.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 32 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

vbCrLf
Offline
newbie
Last seen: 13 years 12 hours ago
Joined: 2009-05-24
Posts: 4
Points: 0

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.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 32 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Would need to see what it's

Would need to see what it's going to look like to best advise what to do.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

css-helper
Offline
Enthusiast
UK
Last seen: 12 years 21 weeks ago
UK
Joined: 2009-04-24
Posts: 120
Points: 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

=========================================================================
If you are climbing a mountain the person most useful to you is just ahead of you on the rope (since they are still learning too).
The person who has already made it to the top is usually not much help whilst you are struggling on the rock face.
=========================================================================

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 32 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 12 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 30 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I've always wondered of that

Quote:

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.

http://stommepoes.nl/Tests/htmlbody.html

I'm no expert, but I fake one on teh Internets

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 12 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Stomme poes

Stomme poes wrote:
Quote:

src("right.png")

That's a new one to me??[

:bigoops: I'll edit that. :blushing:

Quote:

I've always wondered of that worked. …

http://stommepoes.nl/Tests/htmlbody.html

To html, add {{height: 100%;}. To body, add {min-height: 100%;}, and for IE6, {height: 100%;} (properly filtered).

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 30 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

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.

I'm no expert, but I fake one on teh Internets

vbCrLf
Offline
newbie
Last seen: 13 years 12 hours ago
Joined: 2009-05-24
Posts: 4
Points: 0

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 12 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

vbCrLf
Offline
newbie
Last seen: 13 years 12 hours ago
Joined: 2009-05-24
Posts: 4
Points: 0

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.