 TheServant  1,168
Recognized Expert Top Contributor
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.
14 4127 
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.
TheServant 1,168
Recognized Expert Top Contributor
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?
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.
TheServant 1,168
Recognized Expert Top Contributor
Thanks for your help, I will have a look.
TheServant 1,168
Recognized Expert Top Contributor
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)?
Does all that height stuff have to be in there for any reason? I took it all out and just added 'height:100%'.
TheServant 1,168
Recognized Expert Top Contributor
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?
TheServant 1,168
Recognized Expert Top Contributor
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?
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 TheServant 1,168
Recognized Expert Top Contributor
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.
TheServant 1,168
Recognized Expert Top Contributor
Thanks for your help mate, I will read up and come back if I have any more questions.
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.
TheServant 1,168
Recognized Expert Top Contributor
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.
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: Bruce Rusk |
last post by:
I'm using Stephen Lebans' RTF2 control in a report, and have discovered what
may be a slight bug in it.
I have a lot of non-Western language (Chinese) text in my RTF field, and
such records get...
|
by: martin |
last post by:
Hi,
I am a web page and a web user control. My web user control is placed in my
web page using the following directive
<%@ Register TagPrefix="uc1" TagName="Header"...
|
by: John Lau |
last post by:
Hi,
Is there documentation that talks about the page lifecycle, the lifecycle of
controls on the page, and the rendering of inline code, in a single
document?
Thanks,
John
|
by: Guadala Harry |
last post by:
In an ASCX, I have a Literal control into which I inject a
at runtime.
litInjectedContent.Text = dataClass.GetHTMLSnippetFromDB(someID);
This works great as long as the contains just...
|
by: serge calderara |
last post by:
Dear all,
I am new in asp.net and prepare myself for exam
I still have dificulties to understand the difference between server control
and HTML control.
Okey things whcih are clear are the fact...
| | |
by: Mike |
last post by:
Hi,
I am strugling with a simple problem which I can't seem to resolve.
I have an asp.net page which contains a server-control (flytreeview,
which is a kind
of a tree to be exact).
The tree is...
|
by: gsb58 |
last post by:
Hi!
On a form I have a calendar. The form is rezised to 1024x768 (Don't
worry - this is a training case) when loaded.
Now I want to center the calendar on the form so that its edges are...
|
by: paul.hester |
last post by:
Hi all,
I have a custom control with an overridden Render method. Inside this
method I'm rendering each control in its collection using their
RenderControl method. However, I'm running into a...
|
by: Rolf Welskes |
last post by:
Hello,
I have an ObjectDataSource which has as business-object a simple array of
strings. No problem.
I have an own (custom) control to which I give the DataSourceId and in the
custom-control...
|
by: rizwanahmed24 |
last post by:
Hello
i have made a custom control. i have placed a panel on it. I want this
panel to behave just like the normal panel. The problem i was having is
that the panel on my custom control doesnt...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
| | |
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
| | |
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
| |
