I'm not quite sure how to describe this...
If I use a table in HTML, then I can put content in cells.
If I have something below a particula cell...
Then when the content above gets bigger, it automatically pusshes down the content below.
I can't get my head around how I might be able to achieve the same by just using CSS?
I take it that I'm write in saying 'purist' CSS users advocate NOT using tables?
Any feedback/help would be appreciated.
Thanks.
JamYou need to understand float and clear, this page (<!-- m --><a class="postlink" href="http://www.complexspiral.com/publications/containing-floats/">http://www.complexspiral.com/publicatio ... ng-floats/</a><!-- m -->) gives a basic explaination.
Below is a basic simulation of a table done with css.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>css table</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
.table_css {
position:relative;
width:auto;
border:1px solid blue;
}
.tr_css {
clear:both;
}
.td_css {
float:left;
}
.column1 {
width:40%;
}
.column2 {
width:60%;
}
-->
</style>
</head>
<body>
<div class="table_css">
<div class="tr_css">
<div class="td_css column1">1.Etiam iaculis ultricies diam. Nulla eget erat vel lacus auctor lobortis. Sed sagittis ultricies nulla.</div>
<div class="td_css column2">2.Vivamus lacinia adipiscing libero. Sed ac ipsum. Etiam nonummy nibh nec augue.
Nullam tempor magna eu dui. Quisque placerat commodo urna. Ut rutrum mi vitae ante.
Vivamus bibendum elementum augue. Etiam iaculis ultricies diam. Nulla eget erat vel lacus auctor lobortis. Sed sagittis ultricies nulla.</div>
</div>
<div class="tr_css">
<div class="td_css column1">3.Vivamus lacinia adipiscing libero. Sed ac ipsum. Etiam nonummy nibh nec augue. Nullam tempor magna eu dui.
Quisque placerat commodo urna. Ut rutrum mi vitae ante. Vivamus bibendum elementum augue. Etiam iaculis ultricies diam.
Nulla eget erat vel lacus auctor lobortis. Sed sagittis ultricies nulla.</div>
<div class="td_css column2">4.Etiam iaculis ultricies diam. Nulla eget erat vel lacus auctor lobortis. Sed sagittis ultricies nulla.</div>
</div>
<div class="tr_css"></div>
</div>
</body>
</html>you can adjust the height attribute.
Infact I found a few differences between firefox and IE in this area.
It seems that IE will 'stretch' the lower boundaries of the <DIV> area if the contents over flow, at least this is true with text, I haven't checked with images. Firefox requires that you be more accurate and set the height of the area accordingly, allowing text to overflow the lower edge of the <DIV> area if there is not enough space to accomodate it.
Which borwser are you using?Originally posted by bol
you can adjust the height attribute.
Infact I found a few differences between firefox and IE in this area.
It seems that IE will 'stretch' the lower boundaries of the <DIV> area if the contents over flow, at least this is true with text, I haven't checked with images. Firefox requires that you be more accurate and set the height of the area accordingly, allowing text to overflow the lower edge of the <DIV> area if there is not enough space to accomodate it.
Which borwser are you using?
erm... that sounds like a lot of work.
with a table, you can just type and insert images and you wouldn't need to worry at all.
how do you calculate the height of your text?
is there a dynamic way of doing this?
and i would add, that i also have to dynamically generate code through asp for instance. in that case, you would have to do everything on the fly. surely in that case things might get messy, because along with calculating the text height, you also might have to calculate the dimensions of an image?
let me know what you think.
thanks.Originally posted by bol
... It seems that IE will 'stretch' the lower boundaries of the <DIV> area if the contents over flow, at least this is true with text, I haven't checked with images.
That is indeed correct. Internet Explorer/Win will stretch any element so that its contents fit, the contents being block, inline or floated. The width and height CSS attributes in Internet Explorer/Win are treated more like the min-width and min-height CSS attributes. IE/Win also encapsulates floated elements when it shouldn't. For instance:
<div style="background-color: grey;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"whatever.gif" width="100" height="100" style="float:left;" />
</div>
Internet Explorer will make the DIV the same height as the image, but all other browsers - including IE5/Mac - will not show any grey background. Floated elements do just that, they float over all other block level elements.It won't stretch the element if the contents are an unbroken text string. I wonder if that glitch could be used to force other contents to exceed the boundaries of elements in ie/win
<div style="background-color: grey; width: 50px; height:50px">
aReallyReallyLongUnbrokenTextString
</div>
at least it didn't on my site...Originally posted by bol
It won't stretch the element if the contents are an unbroken text string. I wonder if that glitch could be used to force other contents to exceed the boundaries of elements in ie/win
<div style="background-color: grey; width: 50px; height:50px">
aReallyReallyLongUnbrokenTextString
</div>
at least it didn't on my site...
The DIV is still probably stretching, but it may be contained inside another element with a width set, and the overflow property set to "hidden." If the stretched DIV's parent element has the overflow set to hidden, the DIV will seem to not stretch.
If I use a table in HTML, then I can put content in cells.
If I have something below a particula cell...
Then when the content above gets bigger, it automatically pusshes down the content below.
I can't get my head around how I might be able to achieve the same by just using CSS?
I take it that I'm write in saying 'purist' CSS users advocate NOT using tables?
Any feedback/help would be appreciated.
Thanks.
JamYou need to understand float and clear, this page (<!-- m --><a class="postlink" href="http://www.complexspiral.com/publications/containing-floats/">http://www.complexspiral.com/publicatio ... ng-floats/</a><!-- m -->) gives a basic explaination.
Below is a basic simulation of a table done with css.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>css table</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
.table_css {
position:relative;
width:auto;
border:1px solid blue;
}
.tr_css {
clear:both;
}
.td_css {
float:left;
}
.column1 {
width:40%;
}
.column2 {
width:60%;
}
-->
</style>
</head>
<body>
<div class="table_css">
<div class="tr_css">
<div class="td_css column1">1.Etiam iaculis ultricies diam. Nulla eget erat vel lacus auctor lobortis. Sed sagittis ultricies nulla.</div>
<div class="td_css column2">2.Vivamus lacinia adipiscing libero. Sed ac ipsum. Etiam nonummy nibh nec augue.
Nullam tempor magna eu dui. Quisque placerat commodo urna. Ut rutrum mi vitae ante.
Vivamus bibendum elementum augue. Etiam iaculis ultricies diam. Nulla eget erat vel lacus auctor lobortis. Sed sagittis ultricies nulla.</div>
</div>
<div class="tr_css">
<div class="td_css column1">3.Vivamus lacinia adipiscing libero. Sed ac ipsum. Etiam nonummy nibh nec augue. Nullam tempor magna eu dui.
Quisque placerat commodo urna. Ut rutrum mi vitae ante. Vivamus bibendum elementum augue. Etiam iaculis ultricies diam.
Nulla eget erat vel lacus auctor lobortis. Sed sagittis ultricies nulla.</div>
<div class="td_css column2">4.Etiam iaculis ultricies diam. Nulla eget erat vel lacus auctor lobortis. Sed sagittis ultricies nulla.</div>
</div>
<div class="tr_css"></div>
</div>
</body>
</html>you can adjust the height attribute.
Infact I found a few differences between firefox and IE in this area.
It seems that IE will 'stretch' the lower boundaries of the <DIV> area if the contents over flow, at least this is true with text, I haven't checked with images. Firefox requires that you be more accurate and set the height of the area accordingly, allowing text to overflow the lower edge of the <DIV> area if there is not enough space to accomodate it.
Which borwser are you using?Originally posted by bol
you can adjust the height attribute.
Infact I found a few differences between firefox and IE in this area.
It seems that IE will 'stretch' the lower boundaries of the <DIV> area if the contents over flow, at least this is true with text, I haven't checked with images. Firefox requires that you be more accurate and set the height of the area accordingly, allowing text to overflow the lower edge of the <DIV> area if there is not enough space to accomodate it.
Which borwser are you using?
erm... that sounds like a lot of work.
with a table, you can just type and insert images and you wouldn't need to worry at all.
how do you calculate the height of your text?
is there a dynamic way of doing this?
and i would add, that i also have to dynamically generate code through asp for instance. in that case, you would have to do everything on the fly. surely in that case things might get messy, because along with calculating the text height, you also might have to calculate the dimensions of an image?
let me know what you think.
thanks.Originally posted by bol
... It seems that IE will 'stretch' the lower boundaries of the <DIV> area if the contents over flow, at least this is true with text, I haven't checked with images.
That is indeed correct. Internet Explorer/Win will stretch any element so that its contents fit, the contents being block, inline or floated. The width and height CSS attributes in Internet Explorer/Win are treated more like the min-width and min-height CSS attributes. IE/Win also encapsulates floated elements when it shouldn't. For instance:
<div style="background-color: grey;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"whatever.gif" width="100" height="100" style="float:left;" />
</div>
Internet Explorer will make the DIV the same height as the image, but all other browsers - including IE5/Mac - will not show any grey background. Floated elements do just that, they float over all other block level elements.It won't stretch the element if the contents are an unbroken text string. I wonder if that glitch could be used to force other contents to exceed the boundaries of elements in ie/win
<div style="background-color: grey; width: 50px; height:50px">
aReallyReallyLongUnbrokenTextString
</div>
at least it didn't on my site...Originally posted by bol
It won't stretch the element if the contents are an unbroken text string. I wonder if that glitch could be used to force other contents to exceed the boundaries of elements in ie/win
<div style="background-color: grey; width: 50px; height:50px">
aReallyReallyLongUnbrokenTextString
</div>
at least it didn't on my site...
The DIV is still probably stretching, but it may be contained inside another element with a width set, and the overflow property set to "hidden." If the stretched DIV's parent element has the overflow set to hidden, the DIV will seem to not stretch.