div css control  | Expert | | Join Date: Feb 2008 Location: Australia
Posts: 913
| |
I am trying to re-do everything on my site so it is all neat and organized code, which includes re-doing my css. I have realized a problem that can be overcome in other ways but it would be easier if I could do it here.
Here is some of my css: - body {
-
font: 12px Verdana, Arial, Helvetica, sans-serif;
-
background: #000000 url(top_bg.png) repeat-x;
-
height: 100%;
-
width: 1024px;
-
margin: 0 auto;
-
padding: 0;
-
behavior: url("../csshover3.htc");
-
}
-
#header {
-
width: 100%;
-
margin: 0;
-
padding: 0;
-
background: silver;
-
text-align: center;
-
}
-
#content_wrapper {
-
height: 100%;
-
width: 1000px;
-
margin: 20px 0;
-
padding: 10px;
-
border: gray groove 2px;
-
background: silver;
-
display: block;
-
overflow: hidden;
-
}
-
#left_menu {
-
height: 100%;
-
width: 150px;
-
float: left;
-
padding: 5px;
-
border: black groove 2px;
-
}
-
#content {
-
width: 668px;
-
float: left;
-
padding: 0;
-
border: black groove 2px;
-
}
-
#footer {
-
width: 1000px;
-
margin: 0;
-
padding: 5px 12px;
-
background: silver;
-
}
Firstly, my div's (#left_menu and #content) are not 100% height. Everywhere just says make sure the body and parent div is height 100% and all is good, however this is not working in my case.
Second, I have noticed a very annoying problem which is if I have padding / borders / margins and use width 100% / height 100% it simply adds it on to the body width / height. Let me explain: The body is 1024px. If I have the #header width as 100% it works fine. If I add a 2px border it is 1028px wide (100% + 4px). Is there a way to have the 100% include the 2px, or do you have to do nested div statements?
Thanks for your help.
|  | Expert | | Join Date: Sep 2006
Posts: 5,561
| | | re: div css control
So body is 100% of what? You need to set html to 100%, also.
'width' is the width of the content. Borders, margin and padding are outside the width.
| | Expert | | Join Date: Feb 2008 Location: Australia
Posts: 913
| | | re: div css control
OK, so there is no easy way to have one width for the body, or html, and the rest is done automatically when the rest includes borders, padding and margins?
And just a quick note: The editor I am using (phpDesigner) doesn't recognise html as a css class like it does body? Is html a normal class to define? And besides using minheight (I can never get it to work in IE) can something else be done to height to use it like that?
| | Expert | | Join Date: Sep 2006
Posts: 5,561
| | | re: div css control
I just set html,body{height:100%} in my css. Originally, IE would not allow setting styles on <html> but I think that's fixed in IE7.
Up through IE6, min-height did not work and IE treated height as min-height. But that's IE for you. IE7 still screws it up when it's combined with height.
Google for Diaz min-height hack.
| | Expert | | Join Date: Feb 2008 Location: Australia
Posts: 913
| | | re: div css control
Thanks for your help, I will have a look.
| | Expert | | Join Date: Feb 2008 Location: Australia
Posts: 913
| | | re: div css control
Hey, been working on this but it’s constantly got issues: - html,body {
-
min-height: 500px;
-
height: auto !important;
-
height: 100px;
-
width: 1024px;
-
margin: 0 auto;
-
padding: 0;
-
}
-
#content_wrapper {
-
height: 100%;
-
width: 1000px;
-
margin: 10px 0;
-
padding: 10px;
-
border: gray groove 2px;
-
background: silver url(content_bg_dark.gif) repeat;
-
display: block;
-
}
-
#left_menu {
-
height: 100%;
-
width: 150px;
-
float: left;
-
padding: 10px 5px;
-
border: gray groove 2px;
-
text-align: center;
-
background: silver url(menu_bg.png) repeat-y;
-
}
-
#content {
-
height: 100%;
-
width: 648px;
-
float: left;
-
padding: 10px;
-
border: gray groove 2px;
-
background: silver url(content_bg.gif) repeat;
-
}
-
#news_bar {
-
width: 618px;
-
border: gray groove 2px;
-
background: black;
-
color: red;
-
padding: 0 10px;
-
margin: 0 auto;
-
text-align: center;
-
}
-
#inner_content {
-
width: 618px;
-
margin: 10px 0 auto;
-
padding: 5px;
-
text-align: left;
-
}
-
#right_menu {
-
height: 100%;
-
width: 150px;
-
float: right;
-
padding: 10px 5px;
-
border: gray groove 2px;
-
text-align: center;
-
background: silver url(menu_bg.png) repeat-y;
-
}
-
The page is as follows: -
<body>
-
<div id="content_wrapper">
-
<div id="left_menu">
-
<p>Left Menu</p>
-
</div>
-
<div id="content">
-
<div id="news_bar">
-
<p>News Bar</p>
-
</div>
-
<div id="inner_content">
-
<p>Inner Content<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />This is a word.</p>
-
</div>
-
</div>
-
<div id="right_menu">
-
<p>Right Menu</p>
-
</div>
-
</div>
-
</body>
-
Now the problem is: The height fix works very well, provided that the height of the contents (for example #inner_content) does not exceed the height specified in the body definition at the top (100px). If it does, the left and right menu do not size along with the #content, and #content just gets bigger while #left and #right menu stay the same height as the parent definition (100% = 100px) which is what I have told it to do.
Is there a way to have them resize along with the rest of the contents (ie. #content)?
| | Expert | | Join Date: Sep 2006
Posts: 5,561
| | | re: div css control
Does all that height stuff have to be in there for any reason? I took it all out and just added 'height:100%'.
| | Expert | | Join Date: Feb 2008 Location: Australia
Posts: 913
| | | re: div css control
If you're talking about the body tag then yes. That was Diaz's fix. When I get home I will check it on all browsers to see if it can be just height: 100%;
And if you mean individual tags, then yes the height value must be passed on between parents otherwise it will be defaulted to auto I think and lose the body height. Is my question clear?
| | Expert | | Join Date: Feb 2008 Location: Australia
Posts: 913
| | | re: div css control
Just height 100% works fine on all browsers, but I haven't tried IE6. So does anyone have a suggestion as to how I could solve my problem?
| | Expert | | Join Date: Aug 2008
Posts: 397
| | | re: div css control
You could help solve our problem by putting your page on your server and pointing to it in your post. Trying to guess what you want based on markup and confused CSS is a waste of everyone's time, imo.
Notes on the file. Tested in compliant browsers and IE 6/7. If it ain't what you want, tell us what needs to change.
Please see: http://www.chelseacreekstudio.com/ca/cssd/test-108.html | | Expert | | Join Date: Feb 2008 Location: Australia
Posts: 913
| | | re: div css control
Sure: My site.
The problem is, I have 3 columns in the middle div and they are not all the same height. I want them all the same height.
If there are any PHP errors, ignore them, this is the test site, so just look at the layout and CSS.
| | Expert | | Join Date: Feb 2008 Location: Australia
Posts: 913
| | | re: div css control
Thanks for your help mate, I will read up and come back if I have any more questions.
| | Expert | | Join Date: Sep 2006
Posts: 5,561
| | | re: div css control
I don't understand. You said just height 100% fixed the problem. In the site you linked to, you didn't add height:100% to html.
| | Expert | | Join Date: Feb 2008 Location: Australia
Posts: 913
| | | re: div css control
If i change the html tag to 100% all it does is get my screen size and make my page that big. I want a dynamic one, however I think that because the middle content divs which I would like to be made the same height are not working because they are floating. I did not find that those previous articles answered my problem, but it was interesting anyway.
|  |
| | |  /bytes/about
We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights.
Get the best answers to your questions from over 226,272 network members.
|
