Solved: Question about CSS layout

tomdkat · 09-Jan-2008, 05:06 PM #1

Here is a CSS page layout I came up with on my own:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
  <title>Three Column layout by Tom</title>

  <style type="text/css">
.pagebody {
  border: 1px solid red;
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 0px;
  padding-bottom: 0px;
  bottom: 0px;
  padding-right: 0px;
  padding-left: 0px;
  width: 95%;
  max-width: 800px;
}
.header {
  display: block;
  width: 100%;
  height: 150px;
  border-bottom-color: #999999;
  border-bottom-style: ridge;
}
.footer {
  border-top: 2px solid #999999;
  display: block;
  width: 100%;
  height: 75px;
  margin-bottom: 0px;
  padding-bottom: 0px;
  bottom: 0px;
  text-align: right;
  clear: both;
}
.left {
  display: block;
  float: left;
  position: relative;
  border-right-style: solid;
  border-right-color: #999999;
  padding-left: 5px;
}
.right {
  display: block;
  float: right;
  position: relative;
  border-left-style: solid;
  border-left-color: #999999;
  padding-left: 5px;
}
.column {
  display: block;
  width: 150px;
  min-height: 460px;
}
.content {
  display: block;
  margin-right: 150px;
  margin-left: 150px;
  height: 460px;
  padding-left: 10px;
  padding-right: 10px;
  min-width: 200px;
}
  </style>
</head>

<body>
<div class="pagebody">
<div class="header">header</div>
<div class="left column">left</div>
<div class="right column">right</div>
<div class="content">main-content</div>
<div class="footer">footer</div>
</div>
</body>
</html>

It mostly works in IE6 and works well in the other modern browsers (haven't been able to try IE7). My question is this: if you make the browser window narrow enough, the "min-width" attribute I have set for the "content" class element isn't honored.

Any idea as to why this happens? If you keep making the browser window narrow, the content DIV will collapse to disappearing.

Thanks!

Peace...

jaymanson · 10-Jan-2008, 02:44 AM #2

Hi Tom,

The main problem is that while you've put the 200px min-width restriction on the 'content' div, it is contained inside the 'pagebody' div which has no minimum restriction. The browser is simply giving priority to the higher level div's values.

The fix - simply give the pagebody class a min-width of 500px (150px each sidebar and 200px content) and remove the min-width from the content class as it is no longer required.

IE6 isn't so supportive of min-width, so you may want to look at some other fixes. Stu Nicholls looks at some fixes on his website

Hope this helps

Jay

tomdkat · 10-Jan-2008, 11:01 AM #3

Thanks for the info! I'll give it a whirl!

Peace...

Fyzbo · 10-Jan-2008, 11:54 AM #4

Also min-width and max-width are not supported by IE6. You can however use an expression for ie to simulate the effect and the other browsers will just ignore the invalid markup.

tomdkat · 10-Jan-2008, 01:55 PM #5

Quote:

Originally Posted by jaymanson

The fix - simply give the pagebody class a min-width of 500px (150px each sidebar and 200px content) and remove the min-width from the content class as it is no longer required.

Works beautifully! Thanks again!

Quote:

IE6 isn't so supportive of min-width, so you may want to look at some other fixes. Stu Nicholls looks at some fixes on his website

I'm going to look at this now.

Peace...

BushwH4ck3r · 11-Jan-2008, 09:12 AM #6

Just don't make restrictions

tomdkat · 11-Jan-2008, 10:57 AM #7

What do you mean?

Peace...

jaymanson · 11-Jan-2008, 12:58 PM #8

It think what BushwH4ck3r is saying is just don't use min/max_width at all. Not too constructive, but hey!

I personally favour fixed width layouts myself - there's just too much that can break in fluid layouts, especially since all my clients have control over their own content. As a designer, I also like to preserve my layouts, and there's usually a reason why I position elements in certain places!

Just my 2 cents

Glad I could help, even though I wouldn't do it myself

Jay

Fyzbo · 11-Jan-2008, 01:38 PM #9

I prefer the fluid to a point using min/max width. The design looks good on the common resolutions without ugly wasted space and doesn't get so distorted that it's unusable on really low/high resolutions. Best of both worlds.

tomdkat · 11-Jan-2008, 02:37 PM **#10**

Quote:

Originally Posted by jaymanson

It think what BushwH4ck3r is saying is just don't use min/max_width at all. Not too constructive, but hey!

Ok.

Quote:

I personally favour fixed width layouts myself - there's just too much that can break in fluid layouts, especially since all my clients have control over their own content. As a designer, I also like to preserve my layouts, and there's usually a reason why I position elements in certain places!

I can understand this.

Quote:

Originally Posted by Fyzbo

I prefer the fluid to a point using min/max width. The design looks good on the common resolutions without ugly wasted space and doesn't get so distorted that it's unusable on really low/high resolutions. Best of both worlds.

Yeah, this is along the lines of my thinking as well. I'm not sure if I'll actually use the layout above but I was wanting to see if I could create a "simpler" version of this 3-column CSS layout, which uses some negative margins. The main thing I wanted to accomplish was to have the two side columns flush along the sides of the "parent" DIV by floating them.

Thanks for the feedback and any other comments people have is greatly appreciated. If you think the layout above sucks, please tell me why!

Peace...

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)