Hi, I'm trying to make div's act like table td's. I know you can set the display to be table-cell but I don't want to use CSS2. What happens is the divs don't keep the same width when nested. For example, use this code (take out the spaces and returns in the first nested dir):
<div>
<div style="width:100%;border:3px solid #CC0000">
asldifualvnavaksejhraoivnaoise
clvkjaso0djfoansvcxijzoserijzo
nvzosiejfzpszpcvjzkisdjnvozsd
ovvzjsdofijzodivawoeirfosdfoiS
EorijSDOfjefndfoisdfo
</div>
<div style="width:100%;text-align:right;border:3px solid #0000CC">test</div>
</div>
If you make your browser width smaller you'll see that the top div can't wrap so it stays the same width. But, the bottom one keeps shrinking. I nested the div thinking width would be 100% of the parent div's width. But to no avail, it still shrunk. I want the second div to be the same as the first and/or vise versa. (Without setting a absolute width.) Any help would be great! Thanks.It works in Mozilla FireBird (<!-- m --><a class="postlink" href="http://mozilla.org/products/firebird/">http://mozilla.org/products/firebird/</a><!-- m -->). Maybe it's an IE-quirk...
[J]onaHumm..., on my Firebird .7, it's even worse. In IE the second box just keeps shrinking but in Firbird the text doesn't wrap but both borders keep shrinking. So when you scroll over the text in the first div is outside the border. I think it may be a Firebird but there. I'm using both IE 6 and Firebird .7 on WinXP.Wait... if you're saying you want it to remain the same size and not shrink when the window is resized, you'll have to use pixel widths. Percentages are based in the width of the window, not the width of the screen.
[J]onaLet me try again:
I'm trying to make it so two div's will resize with the page. But when one of them hit's a spot where it can't wrap anymore it will get pushed off the screen to the right. I want the other div to stay at that width also instead of shrinking because it can wrap more yet. This works with tables because the two td's will always be the same width because they are connected via the table width. Ex, I'm trying to get div's to do the same thing as:
<table>
<tr><td>lksdjflsdkflsdkjflskdasdjfoivcoiajoaireovds</td></tr>
<tr><td align="right">test</td></tr>
</table>
Note that I'm aligning the second one right so you can see it resize.
The problem is that the above div example still resizes itself based on the windows size and not the block element size it's in (the parent div). Hope this clears it up, if not let me know and I'll try again.
Thanks for your help!This?
<div style="width:100%;">
<div style="width:100%;">
<div>lksdjflsdkflsdkjflskdasdjfoivcoiajoaireovds</div>
</div>
<div style="width:100%;">
<div style="text-align:right;">test</div>
</div>
</div>
[J]onaNot quite, your code does the same thing. I've got snapshots...
As you notice everything looks good before the first div can't wrap anything. Both borders are aligned with each other.
Image links no longer active.
But now when I resize the browser window smaller than what the div can wrap I get different results with each browser.
IE will properly stop the first div from resizeing but the second one will still get smaller.
Image links no longer active.
Firebird does something different. It will continue to "shrink" the borders of each div but the text won't wrap. So the text is pushed outside the border (notice the d at the end in this image).
Image links no longer active.
What I want it to do is stop like IE when it can't wrap and also have the second div stay at the same width as the first. Like a table does. Notice how when I resized the window smaller than what could wrap, and I scroll over, both td's widths stayed the same.
Image links no longer active.
The reson I'm trying to get this to work is because I'm converting my design from tables to divs and what not. ThanksThat's because no space exists, and Mozilla is actually doing it the right way. It exceeds the size of its containment block, and when that happens, it stretches outside of it. If you have a space in your text, it will work fine. If you're trying it for an image, use margin-left:-100px (replace 100 with however many pixels wide your image is). That should do the trick...
[J]onaDon't give width to any of the divs. That will make the divs take the width required to "shrink-wrap" the text if the window size is small.
width: 100% will make the width of the div equal to that of the parent; in your case the screen width.Originally posted by nkaisare
width: 100% will make the width of the div equal to that of the parent; in your case the screen width.
When I nested the div's like in my first post wouldn't the parent be the first div?
<div>
<div style="width:100%;border:3px solid #CC0000">
asldifualvnavaksejhraoivnaoise
clvkjaso0djfoansvcxijzoserijzo
nvzosiejfzpszpcvjzkisdjnvozsd
ovvzjsdofijzodivawoeirfosdfoiS
EorijSDOfjefndfoisdfo
</div>
<div style="width:100%;text-align:right;border:3px solid #0000CC">test</div>
</div>
If you make your browser width smaller you'll see that the top div can't wrap so it stays the same width. But, the bottom one keeps shrinking. I nested the div thinking width would be 100% of the parent div's width. But to no avail, it still shrunk. I want the second div to be the same as the first and/or vise versa. (Without setting a absolute width.) Any help would be great! Thanks.It works in Mozilla FireBird (<!-- m --><a class="postlink" href="http://mozilla.org/products/firebird/">http://mozilla.org/products/firebird/</a><!-- m -->). Maybe it's an IE-quirk...
[J]onaHumm..., on my Firebird .7, it's even worse. In IE the second box just keeps shrinking but in Firbird the text doesn't wrap but both borders keep shrinking. So when you scroll over the text in the first div is outside the border. I think it may be a Firebird but there. I'm using both IE 6 and Firebird .7 on WinXP.Wait... if you're saying you want it to remain the same size and not shrink when the window is resized, you'll have to use pixel widths. Percentages are based in the width of the window, not the width of the screen.
[J]onaLet me try again:
I'm trying to make it so two div's will resize with the page. But when one of them hit's a spot where it can't wrap anymore it will get pushed off the screen to the right. I want the other div to stay at that width also instead of shrinking because it can wrap more yet. This works with tables because the two td's will always be the same width because they are connected via the table width. Ex, I'm trying to get div's to do the same thing as:
<table>
<tr><td>lksdjflsdkflsdkjflskdasdjfoivcoiajoaireovds</td></tr>
<tr><td align="right">test</td></tr>
</table>
Note that I'm aligning the second one right so you can see it resize.
The problem is that the above div example still resizes itself based on the windows size and not the block element size it's in (the parent div). Hope this clears it up, if not let me know and I'll try again.
Thanks for your help!This?<div style="width:100%;">
<div style="width:100%;">
<div>lksdjflsdkflsdkjflskdasdjfoivcoiajoaireovds</div>
</div>
<div style="width:100%;">
<div style="text-align:right;">test</div>
</div>
</div>
[J]onaNot quite, your code does the same thing. I've got snapshots...
As you notice everything looks good before the first div can't wrap anything. Both borders are aligned with each other.
Image links no longer active.
But now when I resize the browser window smaller than what the div can wrap I get different results with each browser.
IE will properly stop the first div from resizeing but the second one will still get smaller.
Image links no longer active.
Firebird does something different. It will continue to "shrink" the borders of each div but the text won't wrap. So the text is pushed outside the border (notice the d at the end in this image).
Image links no longer active.
What I want it to do is stop like IE when it can't wrap and also have the second div stay at the same width as the first. Like a table does. Notice how when I resized the window smaller than what could wrap, and I scroll over, both td's widths stayed the same.
Image links no longer active.
The reson I'm trying to get this to work is because I'm converting my design from tables to divs and what not. ThanksThat's because no space exists, and Mozilla is actually doing it the right way. It exceeds the size of its containment block, and when that happens, it stretches outside of it. If you have a space in your text, it will work fine. If you're trying it for an image, use margin-left:-100px (replace 100 with however many pixels wide your image is). That should do the trick...
[J]onaDon't give width to any of the divs. That will make the divs take the width required to "shrink-wrap" the text if the window size is small.
width: 100% will make the width of the div equal to that of the parent; in your case the screen width.Originally posted by nkaisare
width: 100% will make the width of the div equal to that of the parent; in your case the screen width.
When I nested the div's like in my first post wouldn't the parent be the first div?