Simple css layout [Archive] - AppleNova Forums

dmegatool

2008-12-01, 22:21

Hey guys,
I'm not that good with css and I trying to do something and it doesn't work. It's for a site layout.

So I got a fixed content area that need to be centered. On each side, there is some graphics but there are "optionnale" I don't want scroll bar if the sceen isn't wide enough.... like gametrailers.com (http://www.gametrailers.com/). Anyone could help me start this ?

I could easily do this with a table but... I would like to avoid that :)

To make it clear:
liquidOptionnal - Fixed - liquidOptionnal

...centered

ThunderPoit

2008-12-01, 22:45

a quick look at the source code and i find this in one of their stylesheets:

body
{
background: #000000 url(/images/GT_VGA_Gamestop_SiteSkin_Final.jpg) repeat-y scroll top center;
}

looks like its just a repeating background image and the main content is centered inside of it.

dmegatool

2008-12-01, 23:06

Yeah but mine needs to be 2 different on each side... Well I could do it with one but, It would just feel weird. Cause there will be a fixed background on each side+a repeating bg. I'll use nested div to do it cause I can't use multiple background as it's CSS3 only right ?

Anyway, if somebody could suggest something with 2 div snapped to the content area :)

But thanks for the reply. I guess my example wasn't that good.

Partial

2008-12-02, 01:28

It looks like Gametrailers looks like this:

Set flexible % based widths on the outer container elements, and set a fixed width for the main content container. I would think that would take care of it, but I'm more of a server side guy myself.

<div id="blackBackground">
<div id="images">
<div id="mainContentContainer">
</div>
</div>
</div>

dmegatool

2008-12-02, 16:41

Well that's another 1 image solution. I'll be doin' a 3 table cell if nobody comes with a solution within the next... let say 3 hours. :)

dmegatool

2008-12-02, 22:03

I've found a semi-solution. The dvi are placed correctly but the sidebars would need to be the same height as the content. Any idea from here ? At least, you got a clear a idea of what I'm trying to do. Now if the height would follow, that would be perfect.

here what I got:

<html>
<head>
<title>Untitled</title>

<style type="text/css">
html,body {
padding: 0;
margin: 0;
}
body {
text-align: center;
}
#content { background-color:#093;
width: 853px;
margin: 0 auto;
text-align: left;
}
.column {
width: 50%;
position: absolute;
top: 0;
text-align: left;
}
.left {
left: 0;
}
.right {
right: 0;
}
#leftcol { background-color:#996;
margin-right: 426px;
}
#rightcol { background-color:#F30;
margin-left: 426px;
}
</style>

</head>
<body>

<div id="content">Content<p>Content<p>Content<p>Content<p>Content<p></div>

<div class="left column">
<div id="leftcol">left</div>
</div>

<div class="right column">
<div id="rightcol">right</div>
</div>

</body>
</html>