I am pretty sure someone can help me out very quickly, but I am having problems when trying to replace a table layout using divs. When I view in IE, it looks like it should, but when I view in NS7.1, it is not quite right. My layout is simple, using 5 divs: header, footer, and container, which has left and right w/in it. In NS, my right div aligns to the right of the container div as it should, but it is below the left div, instead side by side with it, aligned at the top of the container div. Can someone please take a look at the code below and give me some suggestions? Thanks.
<html>
<head>
<style>
#header {
border: 2px solid #00FF00;
width: 100%;
}
#footer {
border: 2px solid #FFFF00;
width: 100%;
clear:both;
}
#left {
width : 30%;
float : left;
background : transparent;
padding-bottom : 10px;
color : #006400;
overflow: auto;
border: 2px solid #FF0000;
}
#right {
width : 70%;
float : right;
background : transparent;
padding-bottom : 10px;
color : #006400;
overflow: auto;
border: 2px solid #0000FF;
}
#container {
width: 100%;
}
</style>
</head>
<body>
<div id="header">Header Div</div>
<div id="containter">
<div id="left">
<table width="400" border="0">
<tr>
<td>some text</td>
<td>some text</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="right">Right Content Div</div>
</div>
<div id="footer">Footer Div</div>
</body>
</html>The left <div> width is set to 30%, the right <div>'s width is 70%, that equals 100% -- no problem there. Except you have 2px borders around both of those. That's why they won't fit side by side. Reduce the width of either of those <div>'s and your problem should be solved.from what i can see the easiest way is to make the right div 69% not 70%Thank you - I forgot to account for the border (which was only for my testing purposes). I do have a follow up question related to this same scenario. Is there a way to use CSS to say: "I want the left div to be no smaller than 250px, but if it is bigger, than just occupy 30% of the available real estate". I don't know how you could give an element 2 widths, and tell it to take the greater of the two....width: 30%;
min-width: 250px;
Thanks -- I tried that and it worked for NS, but not IE. Is there a way to do what you suggested above, that will work for both IE and NS?not that i know off ill have a lookmin-width is not supported by IE.
how about a transparent gif image, set the width to be your min width? That will then force it to be 250px wide (I think).If there is no other way to do it via CSS, then I guess I will have to go that route.... I was trying to avoid using them, if at all possible. Thanks for the input.or use a hr tag only in that part, and set it to width 250px using css.
<html>
<head>
<style>
#header {
border: 2px solid #00FF00;
width: 100%;
}
#footer {
border: 2px solid #FFFF00;
width: 100%;
clear:both;
}
#left {
width : 30%;
float : left;
background : transparent;
padding-bottom : 10px;
color : #006400;
overflow: auto;
border: 2px solid #FF0000;
}
#right {
width : 70%;
float : right;
background : transparent;
padding-bottom : 10px;
color : #006400;
overflow: auto;
border: 2px solid #0000FF;
}
#container {
width: 100%;
}
</style>
</head>
<body>
<div id="header">Header Div</div>
<div id="containter">
<div id="left">
<table width="400" border="0">
<tr>
<td>some text</td>
<td>some text</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="right">Right Content Div</div>
</div>
<div id="footer">Footer Div</div>
</body>
</html>The left <div> width is set to 30%, the right <div>'s width is 70%, that equals 100% -- no problem there. Except you have 2px borders around both of those. That's why they won't fit side by side. Reduce the width of either of those <div>'s and your problem should be solved.from what i can see the easiest way is to make the right div 69% not 70%Thank you - I forgot to account for the border (which was only for my testing purposes). I do have a follow up question related to this same scenario. Is there a way to use CSS to say: "I want the left div to be no smaller than 250px, but if it is bigger, than just occupy 30% of the available real estate". I don't know how you could give an element 2 widths, and tell it to take the greater of the two....width: 30%;
min-width: 250px;
Thanks -- I tried that and it worked for NS, but not IE. Is there a way to do what you suggested above, that will work for both IE and NS?not that i know off ill have a lookmin-width is not supported by IE. how about a transparent gif image, set the width to be your min width? That will then force it to be 250px wide (I think).If there is no other way to do it via CSS, then I guess I will have to go that route.... I was trying to avoid using them, if at all possible. Thanks for the input.or use a hr tag only in that part, and set it to width 250px using css.