Congratulations to AcaCandy on her 100,000th post!
There's no such thing as a stupid question, but they're the easiest to answer.
JoinTour
Login
 
Tag Cloud
acer audio black screen blue screen boot bsod computer connection crash css dell drive driver drivers email error ethernet excel firefox firefox 3 hard drive internet internet explorer itunes laptop linux malware monitor network networking nvidia outlook outlook 2003 outlook 2007 outlook express partition problem router security slow software sound trojan usb video virus vista windows windows xp wireless
Web Design & Development
Search
Search in:
 
Advanced Search
Tech Support Guy Forums > Internet & Networking > Web Design & Development >
Solved: Question about CSS layout


HELLO AND WELCOME! Before you can post your question, you'll have to register -- it's completely free! Click here to join today! We highly recommend that you print a copy of our Guide for New Members. Enjoy!

Closed Thread
 
Thread Tools
tomdkat's Avatar
Computer Specs
Distinguished Member with 3,705 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
09-Jan-2008, 05:06 PM #1
Solved: Question about CSS layout
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's Avatar
Computer Specs
Senior Member with 213 posts.
 
Join Date: Mar 2007
Location: Christchurch, New Zealand
Experience: Advanced Design/HTML/CSS - Intermediate PHP
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's Avatar
Computer Specs
Distinguished Member with 3,705 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
10-Jan-2008, 11:01 AM #3
Thanks for the info! I'll give it a whirl!

Peace...
Fyzbo's Avatar
Senior Member with 1,777 posts.
 
Join Date: Feb 2002
Location: North Carolina, USA
Experience: Programming-Advanced|EVER
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's Avatar
Computer Specs
Distinguished Member with 3,705 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
10-Jan-2008, 01:55 PM #5
Quote:
Originally Posted by jaymanson View Post
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's Avatar
Computer Specs
Junior Member with 9 posts.
 
Join Date: Jan 2008
Experience: Web Dev. , Design. Hardware and software expert
11-Jan-2008, 09:12 AM #6
Just don't make restrictions
tomdkat's Avatar
Computer Specs
Distinguished Member with 3,705 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
11-Jan-2008, 10:57 AM #7
What do you mean?

Peace...
jaymanson's Avatar
Computer Specs
Senior Member with 213 posts.
 
Join Date: Mar 2007
Location: Christchurch, New Zealand
Experience: Advanced Design/HTML/CSS - Intermediate PHP
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's Avatar
Senior Member with 1,777 posts.
 
Join Date: Feb 2002
Location: North Carolina, USA
Experience: Programming-Advanced|EVER
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's Avatar
Computer Specs
Distinguished Member with 3,705 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
11-Jan-2008, 02:37 PM #10
Quote:
Originally Posted by jaymanson View Post
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...
Closed Thread

THIS THREAD HAS EXPIRED.
Are you having the same problem? We have volunteers ready to answer your question, but first you'll have to join for free. Need help getting started? Check out our Welcome Guide.


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
WELCOME TO TECH SUPPORT GUY! Are you looking for the solution to your computer problem? Join our site today to ask your question -- for free! Our site is run completely by volunteers who help people like you solve computer problems. See our Welcome Guide to get started.



Thread Tools


You Are Using:
Server ID
Advertisements do not imply our endorsement of that product or service.
All times are GMT -4. The time now is 07:36 PM.
Copyright © 1996 - 2008 TechGuy, Inc. All rights reserved.
Powered by vBulletin, Copyright © 2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0
Powered by Cermak Technologies, Inc.