# css help with layout



## the_slayer (Feb 2, 2008)

hiya ppl!

I am pretty new to CSS so i am constanly finding situations where i am unsure of the best way to structure the css for a design.

Here is one i am not sure about... the white/blue area needs to be scalable in height and the shadow would need to follow...

any advice please!


----------



## deepdiver01 (Dec 23, 2004)

The way to do this is to have what is basically a column on the left and right of the blue and fill their background with a 1px or 2px slice of the inner shadow. 

Then set background-repeat: repeat-y; tag in the respective selectors.


----------



## Big-K (Nov 22, 2003)

to help you out, alot of questions about the design need to be answered.

How is the height scaled? By the content within it? By a screen percentage?
Is the spacing on the top and bottom of the sidebars a percent or a static value?
Is it always going to be centered vertically or is that a static value? This goes back to the first question.
Is the width scaled at all? Is it static, a percentage of the screen width?
Same on the sidebars, are they just the remaining screen width after the blue box is rendered divided by two?

Honestly, this might be a situation where you need to fall back on the old table method, I havn't thought it through too much though. It could definately be done with css though.


----------



## the_slayer (Feb 2, 2008)

the width of the blue window is only scalable in height. the blue window is centered horizontally but the design as per the example is vertically at the top of the screen. any room on the sides is repeated and any room underneath will be filled by the bottom row. if the content inside the blue window increases then it will stretch the blue window down in height. the position where the blue window intersects the top and bottom row is fixed hence, the middle row will stretch with the blue window...

so far the only option thought of so far is to create 3 rows and then float the blue window over top but i dont see how i can then have the middle row scale with the blue window...

hmmm....

ps. deepdiver01 not sure if you missed the result in css layout i am looking for...?


----------



## tomdkat (May 6, 2006)

Interesting layout. I'll see what I can come up with. 

Peace....


----------



## Big-K (Nov 22, 2003)

I worked out a vague version of what you seem to be trying for. My usual webdev computer is out of comission, so its really bad code, but it accomplishes what you appear to want. Alot of the properties are essential, so if it doesnt work for you make sure you have, for instance, position:relative applied to all the divs. If you dont get how something works or why its there just pipe up. I'm also not sure how this works in IE, since i dont have that available, i just know its good in FF. The only issues i could imagine arising is centering.

To get the shadows, you would want to make a gif. On either side would be a 1px slice of the shadows, then between is a transparent space the width of the content area. Set this as the content area background image, making sure to set a new width and some padding accordingly.


```
hey
```


----------



## tomdkat (May 6, 2006)

the_slayer said:


> the width of the blue window is only scalable in height. the blue window is centered horizontally but the design as per the example is vertically at the top of the screen. any room on the sides is repeated and any room underneath will be filled by the bottom row. if the content inside the blue window increases then it will stretch the blue window down in height. the position where the blue window intersects the top and bottom row is fixed hence, the middle row will stretch with the blue window...
> 
> so far the only option thought of so far is to create 3 rows and then float the blue window over top but i dont see how i can then have the middle row scale with the blue window...


Question: do the black bars and white background fill the entire browser window?

Peace...


----------



## tomdkat (May 6, 2006)

This is proving to be quite the challenge, at least for me. 

Great job, Big-K! 

Attached are screenshots of what I came up with. The main issue is the centering of the blue area but it scales in height as the browser window changes height.

Here is the HTML:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Neat CSS layout</title>
  <style type="text/css">
body {
  margin: 0px;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.black-bar {
  background-color: black;
  color: #33cc00;
  display: block;
  height: 150px;
  width: 100%;
}
.middle {
  display: block;
  background-color: white;
  position: relative;
  width: 100%;
  height: 50%;
}
.pagebody {
  display: block;
  height: 600px;
}
.footer {
  display: block;
  position: absolute;
  bottom: 0px;
}
.blue {
  display: block;
  background-color: transparent;
  background-image: url(shadow2.png);
  background-position:  center center;
  width: 800px;
  color: #ffff33;
  z-index: 5;
  position: absolute;
  top: 0px;
  background-repeat: no-repeat;
  height: 85%;
  margin-top: 60px;
  margin-left: 17%;
}
.header {
  display: block;
  position: relative;
}
  </style>
</head>
<body>
<div class="pagebody">
<div class="black-bar header">header</div>
<div class="middle"></div>
<div class="black-bar footer">footer</div>
<div class="blue">&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; blue</div>
</div>
</body>
</html>
```
Peace...


----------



## Big-K (Nov 22, 2003)

did you try my centering methods? Set the container of the blue div to have text-align:center, set the blue div to have text-align:left; margin-left:auto; margin-right:auto.


----------



## tomdkat (May 6, 2006)

That won't work because I used an *absolutely* positioned DIV to overlay the other DIVs.

Peace...


----------



## the_slayer (Feb 2, 2008)

thanks heaps for the help here guys! I got close with it but it's proving to be a little too tricky plus i dont like the possibility of crossbrowser compatibility... this is a website for a client but it turns out that it will work better if i leave the middle row at a static height now... so because of that this a lot easier to layout in css now!

was an interesting layout challenge for css though!

cheers!


----------



## deepdiver01 (Dec 23, 2004)

I had a copy of an old 3 column layout that I cannot find at the moment, maybe I deleted it as I now tend to use a different system

anyway, the idea I had for this project was to use top margins to push the columns down below the top of the header.

This could mean that if say the header is 120px height, you could push the left and right columns down the 120px and the blue middle down say 60px. This way the inner shadows will start at the bottom of the header and the middle column will overlay the header.

The same can be done for the footer if needed.

This way, there should be no need for absolute positioning or z-indexes. Centreing should then be no problem with Big-K;s suggestion.

If I do find it I will post it.

Food for thought anyway.


----------



## tomdkat (May 6, 2006)

Well, I asked about this layout on the MozillaZine forums and got some assistance that proved to be most useful! 

Attached are screenshots in Opera 9.5 on Windows XP.

Here is the HTML:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Neat CSS layout #2</title>

  <style type="text/css">
html, body {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
background-color: white;
background-image: url(bbar.png);
background-repeat: repeat-x;
width: 100%;
background-attachment: fixed;
overflow: hidden;
}
.pagebody {
margin: 0px;
padding: 0px;
display: block;
height: 100%;
width: 100%;
background-image: url(bbar.png);
background-repeat: repeat-x;
background-position: left bottom;
background-attachment: fixed;
}
#content-area {
display: block;
margin-right: auto;
margin-left: auto;
background-repeat: repeat-y;
height: 80%;
background-position: center top;
background-image: url(shadow3.png);
width: 800px;
background-color: transparent;
margin-top: 5%;
}
#content {
display: block;
margin-left: 30px;
padding-left: 10px;
padding-top: 10px;
width: 91.5%;
}
  </style>

</head>
<body>
<div class="pagebody">
<div id="content-area">
<div id="content">
<h2> The Write Up</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vivamus ullamcorper sapien quis diam. Aliquam laoreet facilisis nisi.
Praesent turpis nulla, vestibulum quis, vulputate quis, gravida non,
eros. Vestibulum quis risus. Curabitur tempor, dui sed dapibus
dignissim, nunc libero mollis libero, et ullamcorper metus dolor non
diam. Nullam a lectus venenatis nibh commodo bibendum. Sed sit amet
urna. In orci. Nunc lacinia venenatis turpis. Nulla quam. Aliquam erat
volutpat. Ut et ante. Phasellus aliquet tempus arcu. Aliquam velit leo,
sollicitudin quis, tempus ut, pellentesque eu, lacus. Nulla facilisi.</p>

<p>Praesent blandit eros id turpis. Vivamus a lacus. Sed nec
libero. Maecenas tortor nunc, euismod nec, ultricies at, hendrerit a,
pede. Aliquam id nisl. Pellentesque imperdiet nunc eget tellus. Nulla
feugiat. Donec eu augue a ante sodales fermentum. Nunc auctor, tellus
vel pretium feugiat, est eros tempor metus, id commodo sapien ante ut
dui. Sed aliquam, nunc quis sollicitudin viverra, elit lorem
sollicitudin sapien, sit amet laoreet risus nisl vitae leo. Ut ac orci.
Maecenas nisl lectus, pharetra vitae, auctor vel, mattis nec, orci. Sed
aliquet, erat vitae porttitor varius, ipsum nunc pretium dolor, nec
semper metus nulla id ipsum. Nunc ultrices venenatis enim. Integer at
tortor. Integer quis odio. Vestibulum iaculis rutrum velit. Suspendisse
iaculis, leo eu condimentum consectetuer, nisi nisl imperdiet diam, in
blandit justo tortor id erat. Nunc pulvinar luctus turpis.</p>
</div>
</div>
</div>
</body>
</html>
```
Peace...


----------

