9 replies [Last post]
alt234
Offline
Regular
Last seen: 12 years 18 weeks ago
Timezone: GMT-4
Joined: 2007-06-20
Posts: 22
Points: 0

I have an idea for a layout, but I'm not totally sure how to achieve it. I would like to have a content div that floats above a one color background where the content div does not touch the bottom, left, right, or top of the screen. Similar to a frame around a picture where the picture is the content in this case. I would like it to be liquid to an extent. For example I want the "frame" edges to grow and shrink, but I want the content to be the same width (it will have an image header). I am not really sure how to accomplish this. I made a feeble attempt at it just using margins for the body. Here is my style file.

html, body { background: #000000; margin: 0px; padding: 50px; height: 100%; width: 100%; } #content { background: #FFFFFF; float: left; width: 800px; height: 100%; }

And here is my HTML file.


Test





If you view this site, you can see that it looks almost like I described but its not liquid and its not centered properly.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 19 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Why not just use a thick

Why not just use a thick border on the content element?

Verschwindende wrote:
  • CSS doesn't make pies

alt234
Offline
Regular
Last seen: 12 years 18 weeks ago
Timezone: GMT-4
Joined: 2007-06-20
Posts: 22
Points: 0

Well, the way I'd eventually

Well, the way I'd eventually like to have it is the content have its own 1px border so it just kind of looks like its floating above the background.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 19 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Well wrap the content in

Well wrap the content in another element and use padding on that.

Or do you want it to fit the whole screen?

Verschwindende wrote:
  • CSS doesn't make pies

alt234
Offline
Regular
Last seen: 12 years 18 weeks ago
Timezone: GMT-4
Joined: 2007-06-20
Posts: 22
Points: 0

"Well wrap the content in

"Well wrap the content in another element and use padding on that."

I thought that was kind of what I was doing in my first example by wrapping the content in the body and have padding on the body.

"Or do you want it to fit the whole screen?"

I want the content to be centered on the screen and the "frame" around it to fill up the rest of the screen. I just found a decent example of a similar layout...

http://www.freewebpageheaders.com/

Notice how there is a centered content frame with an image header and the gray background around the outside grows and shrinks until the content body is hit.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 19 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

If you're using the "body"

If you're using the "body" element as the container then it can't have a width of 100%!

Give it a width and padding, then use auto margins to center it.

Verschwindende wrote:
  • CSS doesn't make pies

alt234
Offline
Regular
Last seen: 12 years 18 weeks ago
Timezone: GMT-4
Joined: 2007-06-20
Posts: 22
Points: 0

Ok, so here is what I've

Ok, so here is what I've come up with...

html, body { background: #000000; text-align: center; margin: 50px auto; } #content { background: #FFFFFF; margin: 0 auto; height: 100%; width: 800px; text-align: left; }

My content section just doesn't seem to be utlizing the 100% height. The content div only shows up when there is stuff inside of it.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 19 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

That's because the content

That's because the content div is only filling up 100% of it's container.

Give the HTML and BODY elements 100% height, it should all fall into place Wink

Verschwindende wrote:
  • CSS doesn't make pies

alt234
Offline
Regular
Last seen: 12 years 18 weeks ago
Timezone: GMT-4
Joined: 2007-06-20
Posts: 22
Points: 0

Awesome, thanks. I always

Awesome, thanks. I always seem to forget about that. I really appreciate your help. This is all pretty new to me.

It's pretty much exactly how I want it now, I just have one more question. It seems the bottom margin has disappeared making it so the content window goes all the way to the bottom. Here is the general layout CSS code again.

html, body { font-family: arial; background: #000000; text-align: center; height: 100%; margin: 10px auto; } #content { background: #333333; margin: 5px auto; height: 100%; width: 800px; text-align: left; border: 1px #646464 solid; }

Does the content height need to be fixed as well? I don't quite see why the bottom margin would have disappeared...

EDIT: Actually the margin only disappears in firefox, IE keeps it. However in both browsers an scrollbar is created that I have to scroll down on. I want it so a scrollbar is only created if there is enough content in the content div to require more space.

EDITEDIT: I figured it out. I wasn't taking into account the size of a header and links bar I had above it. My content height was at 100% and it should have been smaller.

Thanks again for all the help. I appreciate it!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 19 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Glad you got it sorted,

Glad you got it sorted, thanks for letting us know Wink

Verschwindende wrote:
  • CSS doesn't make pies