Darth_helge
asked on
div height and width
hello.
i am trying to show a left menu panel and a content panel without using tables. i have tried something like this, but it doesn't show well in both IE and FF.
the menu panel is blue and the content panel is black.
-I want the blue div to be 200px and the black div to fill the rest of the window (100%)
-Height on both Divs should be 100%
-The black div should appear to the right of the blue div, not beneath.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body style="height: 100%">
<form id="form1" runat="server">
<div style="width: 100%; height: 100%">
<div style="width: 200px; height: 100%; background-color: Black; float: left">
LeftPanel
</div>
<div style="width: 100%; height: 100%; background-color: Blue; float: left">
MainPanel
</div>
</div>
</form>
</body>
</html>
We programmers just don't have the mind for designing web pages
i am trying to show a left menu panel and a content panel without using tables. i have tried something like this, but it doesn't show well in both IE and FF.
the menu panel is blue and the content panel is black.
-I want the blue div to be 200px and the black div to fill the rest of the window (100%)
-Height on both Divs should be 100%
-The black div should appear to the right of the blue div, not beneath.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body style="height: 100%">
<form id="form1" runat="server">
<div style="width: 100%; height: 100%">
<div style="width: 200px; height: 100%; background-color: Black; float: left">
LeftPanel
</div>
<div style="width: 100%; height: 100%; background-color: Blue; float: left">
MainPanel
</div>
</div>
</form>
</body>
</html>
We programmers just don't have the mind for designing web pages
You could use css, something like this
<style>
#left {
position:absolute;
left:10px;
top:30px;
}
#right {
position:absolute;
left:210px;
top:30px;
}
</style>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body style="height: 100%">
<form id="form1" runat="server">
<div style="width: 100%; height: 100%">
<div style="width: 200px; height: 100%; background-color: Black; float: left" id=left>
LeftPanel
</div>
<div style="width: 100%; height: 100%; background-color: Blue; float: left" id=right>
MainPanel
</div>
</div>
</form>
</body>
</html>
<style>
#left {
position:absolute;
left:10px;
top:30px;
}
#right {
position:absolute;
left:210px;
top:30px;
}
</style>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body style="height: 100%">
<form id="form1" runat="server">
<div style="width: 100%; height: 100%">
<div style="width: 200px; height: 100%; background-color: Black; float: left" id=left>
LeftPanel
</div>
<div style="width: 100%; height: 100%; background-color: Blue; float: left" id=right>
MainPanel
</div>
</div>
</form>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You could also move the width to here like so:
#left {
position:absolute;
left:10px;
top:30px;
width:200px;
}
#left {
position:absolute;
left:10px;
top:30px;
width:200px;
}
For that first link, it might be better to start the tutorial from the beginning:
http://css.maxdesign.com.au/floatutorial/tutorial0801.htm
http://css.maxdesign.com.au/floatutorial/tutorial0801.htm
ASKER
thanks stormy
i will take a look at it
i will take a look at it
#left {
position:absolute;
left:10px;
top:30px;
width:200px;
}
No. Position:absolute causes more problems than it fixes. Don't use it.
position:absolute;
left:10px;
top:30px;
width:200px;
}
No. Position:absolute causes more problems than it fixes. Don't use it.
I personally like to use an transparent image that 1 px Height and 1 px Width ...Let me know if you want an example!
Again, I disagree. Why resort to positioning elements precisely if you can have the browser do it more consistently and simply.
@Steven-Fernandez, what if I have images turned off in my browser?
@Steven-Fernandez, what if I have images turned off in my browser?
Well the reason i prefer a pixel image for resizing it the browsers turn to position <div> differently.
As you know...Unless you the will always use the same browser of use Strict- CSS which are the same on any browser the positions will be different. Even with my prefered technic, it's not always the same.
Just my opinion.
As you know...Unless you the will always use the same browser of use Strict- CSS which are the same on any browser the positions will be different. Even with my prefered technic, it's not always the same.
Just my opinion.
You could try this:
for the 200px use a pixel image for the other use 100%.
Give it a try.
for the 200px use a pixel image for the other use 100%.
Give it a try.
There are many things you could try, the question is ...which one is the most soutable for you.
If you write the CSS and HTML correctly, there is no difference between browsers, at least not a difference that matters.
But, I digress. Anyway, Darth, have you taken a look at those links? Is this what you're looking for?
But, I digress. Anyway, Darth, have you taken a look at those links? Is this what you're looking for?
I agree, lets put our opinions aside and turn to the main topic which is to find a solution. :o)
ASKER
hi stormy.
i have had the weekend off, so i will take a look at it tomorrow.
steven:
i know i can work it out that way, but im trying to do a clean, css-formatted html page without the use of spacer images and tables..
i have had the weekend off, so i will take a look at it tomorrow.
steven:
i know i can work it out that way, but im trying to do a clean, css-formatted html page without the use of spacer images and tables..
OK, Understood, and i think it's a great idea.
https://www.experts-exchange.com/questions/21689773/height-100-for-the-table-optional-overflow-exact-pixels.html
The short answer is that you will have all sorts of trouble using divs when you mix pixels and percents. You're much better off using tables in this situation.