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  4124 
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.
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.
Thanks for your help, I will have a look.
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%'.
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?
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
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.
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.
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: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
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: 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,...
| |
