css issue

[TechBoyJK]

Hi Guys,

I have a layout which is currently setup to be liquid. Aka it spreads out depending on how big the browser window is.

I'm trying to get it to be a set width. I can't quite get it figured out.

Here is the link to the current layout (made to be generic).

It's a layout I got from a CCS class.

current layout

The css is here

css code

The entire package can be downloaded here

entire layout package (html, css, images)

Now, to explain how I want it to look, I took my browser and made it just wide enough to show how wide I want the layout to be, and took a screenshot. But I can't get my css to make the whole layout that wide.. I'm scracthing my head here because it's probably really easy.

screen shot of "fixed width" appearance that is desired

Let's not worry about the exact width, but I want to define in the css the pixel width, so that can be changed whenever.

EDIT: it needs to be centered and fixed width

 

[CrazyLazy]

There is a decent tutorial here: http://articles.techrepublic.c...-10878_11-5314471.html

To set the div as a specific size just do {width: 700px;} or whatever size you want. Not sure if that's specifically what you are asking though.

 

[TechBoyJK]

Originally posted by: CrazyLazy
There is a decent tutorial here: http://articles.techrepublic.c...-10878_11-5314471.html

To set the div as a specific size just do {width: 700px;} or whatever size you want. Not sure if that's specifically what you are asking though.

I've tried that, but it doesn't seem to apply to the whole layout, just parts.

Can you possibly look at the CSS to see if there is a particular spot to try? I spent all weekend and couldnt get it right.

 

[TechBoyJK]

I'm hoping there is something like a wrapper I can include

div#wrapper {
position:relative;
margin-left:auto;
margin-right:auto;
top: 20px;
width:750px;
background-color: #CCCCCC;
}

 

[CrazyLazy]

Originally posted by: TechBoyJK

Originally posted by: CrazyLazy
There is a decent tutorial here: http://articles.techrepublic.c...-10878_11-5314471.html

To set the div as a specific size just do {width: 700px;} or whatever size you want. Not sure if that's specifically what you are asking though.

I've tried that, but it doesn't seem to apply to the whole layout, just parts.

Can you possibly look at the CSS to see if there is a particular spot to try? I spent all weekend and couldnt get it right.

You need to throw all your existing code inside a single div with a fixed width. For your html just something like

<div id="container">
<!-- all your existing body code goes here -->
</div>

then the css for that container would be something like,

div#container {
position: relative;
width: 750px;
}

The article I linked explains this much better than I do.


EDIT: You can use another wrapper it if you want everything center aligned.

 

[TechBoyJK]

Originally posted by: CrazyLazy

Originally posted by: TechBoyJK

Originally posted by: CrazyLazy
There is a decent tutorial here: http://articles.techrepublic.c...-10878_11-5314471.html

To set the div as a specific size just do {width: 700px;} or whatever size you want. Not sure if that's specifically what you are asking though.

I've tried that, but it doesn't seem to apply to the whole layout, just parts.

Can you possibly look at the CSS to see if there is a particular spot to try? I spent all weekend and couldnt get it right.

You need to throw all your existing code inside a single div with a fixed width. For your html just something like

<div id="container">
<!-- all your existing body code goes here -->
</div>

then the css for that container would be something like,

div#container {
position: relative;
width: 750px;
}

The article I linked explains this much better than I do.


EDIT: You can use another wrapper it if you want everything center aligned.

cool, that actually worked...

well, its contained to the left.. what would be the best way to center it? Can I put the centering element into the same "container" wrapper you mentioned above?

 

[TechBoyJK]

i noticed it works in firefox, but not IE.. its centered in Firefox, but still aligned left with IE.. any ideas?

 

[CrazyLazy]

You need to use the wrapper to center it, and it needs to be a separate div. Just add the wrapper div around all your code like last time with the css something like,

div#wrapper {
position:relative;
margin-left:auto;
margin-right:auto;
width:700px;
}

 

[TechBoyJK]

Originally posted by: CrazyLazy
You need to use the wrapper to center it, and it needs to be a separate div. Just add the wrapper div around all your code like last time with the css something like,

div#wrapper {
position:relative;
margin-left:auto;
margin-right:auto;
width:700px;
}

It works with containing the site in a fixed width, and the whole page is centered with Firefox, but it's still aligning left in IE.

 

[TechBoyJK]

Originally posted by: TechBoyJK

Originally posted by: CrazyLazy
You need to use the wrapper to center it, and it needs to be a separate div. Just add the wrapper div around all your code like last time with the css something like,

div#wrapper {
position:relative;
margin-left:auto;
margin-right:auto;
width:700px;
}

It works with containing the site in a fixed width, and the whole page is centered with Firefox, but it's still aligning left in IE.

Anybody? It's centered in Firefox but not IE.. not sure what the issue is.

 

[TechBoyJK]

i figured out what the problem is, at least the "cause"..

When I use the basic html template as I posted, it centers fine.

As soon as I turn it into a .cfml file, it centers fine in everything but IE.

 

[TechBoyJK]

Originally posted by: TechBoyJK
i figured out what the problem is, at least the "cause"..

When I use the basic html template as I posted, it centers fine.

As soon as I turn it into a .cfml file, it centers fine in everything but IE.

i figured it out