I am not sure why my right div wraps to the bottom when content w/in it is longer than one line. This is happening when viewed in Firefox. It works as expected in IE, which I know means diddly, but I was hoping someone could help me to understand what I need to do in order to get it to work in Firefox and other standard compliant browsers.
I would think that since the left div is contained w/in the container div, the content should wrap w/in the left div, but still be floated next to the right div, like columns. Is there something that needs to be done to the container in order to
1) keep the left and right divs next to each other, no matter how much content is in each
2) make the container div's height expand to accomodate the height of the tallest div
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
#container {
width: 100%;
margin: 0;
padding: 0;
}
#left {
background : #EEEEEE;
width : 30%;
float : left;
border-right: 4px solid #999999;
overflow: auto;
}
#right {
float : left;
background : transparent;
}
</style>
</head>
<body>
<div id="container">
<div id="left">left side
<p>text to overflow text to overflow text to overflow text to overflow text
to overflow text to overflow text to overflow text to overflow text to overflow
text to overflow text to overflow </p>
</div>
<div id="right">right side
<p>text to overflow text to overflow text to overflow text to overflow text
to overflow text to overflow text to overflow text to overflow text to overflow
text to overflow text to overflow </p>
</div>
</div>
</body>
</html>Originally posted by wood_tah
I am not sure why my right div wraps to the bottom when content w/in it is longer than one line.
You need to give your #right <div> a width, and it will float as you require.Thanks -- it is always the little things.... Out of curiosity, why does a width need to be specified? I was under the assumption that b/c it was in a container, it would automatically fill the available space.
Because I am using a border, I can't use a width of 70%, or width: auto in Firefox to get my right div to stretch to fill the available space (both works in IE, however -- again, it doesn't mean much). Do you know of a way that I can get the right div to stretch and fill the remaining space in the browser window, without showing a horizontal scroll bar, in Firefox and IE? Or do I just need to figure out the math? The clients would like it to be as "fluid" as possible, that is why I was trying to use percentages instead of fixed widths. If I had to use a fixed width, it could be on the left div, but the right should still be fluid enough to fill the rest of the page.Thanks -- it is always the little things.... Out of curiosity, why does a width need to be specified? I was under the assumption that b/c it was in a container, it would automatically fill the available space.
Because I am using a border, I can't use a width of 70%, or width: auto in Firefox to get my right div to stretch to fill the available space (both works in IE, however -- again, it doesn't mean much). Do you know of a way that I can get the right div to stretch and fill the remaining space in the browser window, without showing a horizontal scroll bar, in Firefox and IE? Or do I just need to figure out the math? The clients would like it to be as "fluid" as possible, that is why I was trying to use percentages instead of fixed widths. If I had to use a fixed width, it could be on the left div, but the right should still be fluid enough to fill the rest of the page.If you do not set a <div>'s width, it will take up 100% of it's parent element's width. So since the width wasn't explicitly set, the #right <div> took up 100%, and thus couldn't fit on the same line as the #left <div>.
I would think that since the left div is contained w/in the container div, the content should wrap w/in the left div, but still be floated next to the right div, like columns. Is there something that needs to be done to the container in order to
1) keep the left and right divs next to each other, no matter how much content is in each
2) make the container div's height expand to accomodate the height of the tallest div
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
#container {
width: 100%;
margin: 0;
padding: 0;
}
#left {
background : #EEEEEE;
width : 30%;
float : left;
border-right: 4px solid #999999;
overflow: auto;
}
#right {
float : left;
background : transparent;
}
</style>
</head>
<body>
<div id="container">
<div id="left">left side
<p>text to overflow text to overflow text to overflow text to overflow text
to overflow text to overflow text to overflow text to overflow text to overflow
text to overflow text to overflow </p>
</div>
<div id="right">right side
<p>text to overflow text to overflow text to overflow text to overflow text
to overflow text to overflow text to overflow text to overflow text to overflow
text to overflow text to overflow </p>
</div>
</div>
</body>
</html>Originally posted by wood_tah
I am not sure why my right div wraps to the bottom when content w/in it is longer than one line.
You need to give your #right <div> a width, and it will float as you require.Thanks -- it is always the little things.... Out of curiosity, why does a width need to be specified? I was under the assumption that b/c it was in a container, it would automatically fill the available space.
Because I am using a border, I can't use a width of 70%, or width: auto in Firefox to get my right div to stretch to fill the available space (both works in IE, however -- again, it doesn't mean much). Do you know of a way that I can get the right div to stretch and fill the remaining space in the browser window, without showing a horizontal scroll bar, in Firefox and IE? Or do I just need to figure out the math? The clients would like it to be as "fluid" as possible, that is why I was trying to use percentages instead of fixed widths. If I had to use a fixed width, it could be on the left div, but the right should still be fluid enough to fill the rest of the page.Thanks -- it is always the little things.... Out of curiosity, why does a width need to be specified? I was under the assumption that b/c it was in a container, it would automatically fill the available space.
Because I am using a border, I can't use a width of 70%, or width: auto in Firefox to get my right div to stretch to fill the available space (both works in IE, however -- again, it doesn't mean much). Do you know of a way that I can get the right div to stretch and fill the remaining space in the browser window, without showing a horizontal scroll bar, in Firefox and IE? Or do I just need to figure out the math? The clients would like it to be as "fluid" as possible, that is why I was trying to use percentages instead of fixed widths. If I had to use a fixed width, it could be on the left div, but the right should still be fluid enough to fill the rest of the page.If you do not set a <div>'s width, it will take up 100% of it's parent element's width. So since the width wasn't explicitly set, the #right <div> took up 100%, and thus couldn't fit on the same line as the #left <div>.