DIV wrapping problem

M

Matt White

I have a container DIV (div1) that contains 2 DIVs (div2 and div3).
div1 is the width of the screen and div2 is a fixed width. How do I
get div3 to dynamically expand to fill the space to the right of div2?
Right now I can only seem to get div3 to float up against div2, but I
don't know how to make it as wide as the remaining space next to div2.
I want the result I've so artistically illustrated in diagram 1 but I
can only seem to get diagram 2.

_______________________ screen width
______________________
| | |
| | | diagram 1
|_____|________________|

_____________
| | |
| | | diagram 2
|_____|_______|

The simple code I'm using is at: http://pastie.org/407824. Any help
would be appreciated! Thanks!
 
C

Chris F.A. Johnson

I have a container DIV (div1) that contains 2 DIVs (div2 and div3).
div1 is the width of the screen and div2 is a fixed width. How do I
get div3 to dynamically expand to fill the space to the right of div2?
Click to expand...

By not giving it a width.
Right now I can only seem to get div3 to float up against div2, but I
don't know how to make it as wide as the remaining space next to div2.
I want the result I've so artistically illustrated in diagram 1 but I
can only seem to get diagram 2.

_______________________ screen width
______________________
| | |
| | | diagram 1
|_____|________________|

_____________
| | |
| | | diagram 2
|_____|_______|
Click to expand...

When drawing ASCII art, please use a fixed-wdith font.
The simple code I'm using is at: http://pastie.org/407824. Any help
would be appreciated! Thanks!
Click to expand...

A URL to the real page would be more helpful.

Make sure that it validates (at <http://validator.w3.org>) before
posting it. (The code you referred to lacks a Doctype.)
 
R

rf

Matt said:
I have a container DIV (div1) that contains 2 DIVs (div2 and div3).
div1 is the width of the screen and div2 is a fixed width. How do I
get div3 to dynamically expand to fill the space to the right of div2?
Right now I can only seem to get div3 to float up against div2, but I
don't know how to make it as wide as the remaining space next to div2.
I want the result I've so artistically illustrated in diagram 1 but I
can only seem to get diagram 2.

_______________________ screen width
______________________

The simple code I'm using is at: http://pastie.org/407824. Any help
would be appreciated! Thanks!
Click to expand...

Post a URL to the page, not a picture of the code.


Don't float div3. Give it a left margin of 150px;
 
A

asdf

rf said:
Post a URL to the page, not a picture of the code.


Don't float div3. Give it a left margin of 150px;
Click to expand...

Matt,

Try this... it ain't perfect, it ain't purdy, it's kinda minimalist, but it
should give you a good starting point.

Pay particular attention to the 'width' of the left column, and the
'margin-left' of the right column.

Copy the following into a new html doc and start playing! Hope it helps.

[start markup]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DIV Test</title>
<style type="text/css">
<!--
..leftcolumn {
float: left;
width: 12em;
}
..rightcolumn {
margin-left: 12em;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div class="leftcolumn">left column contents left column contents left
column contents left column contents left column contents left column
contents</div>
<div class="rightcolumn">right column contents right column contents right
column contents right column contents right column contents right column
contents right column contents right column contents right column contents
right column contents right column contents right column contents right
column contents right column contents right column contents</div>
</div>
</body>
</html>

[end markup]
 
M

Matt White

Post a URL to the page, not a picture of the code.
Click to expand...
Don't float div3. Give it a left margin of 150px;
Click to expand...

Matt,

Try this... it ain't perfect, it ain't purdy, it's kinda minimalist, but it
should give you a good starting point.

Pay particular attention to the 'width' of the left column, and the
'margin-left' of the right column.

Copy the following into a new html doc and start playing! Hope it helps.

[start markup]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DIV Test</title>
<style type="text/css">
<!--
.leftcolumn {
 float: left;
 width: 12em;}

.rightcolumn {
 margin-left: 12em;}

-->
</style>
</head>
<body>
<div id="wrapper">
  <div class="leftcolumn">left column contents left column contents left
column contents left column contents left column contents left column
contents</div>
  <div class="rightcolumn">right column contents right column contents right
column contents right column contents right column contents right column
contents right column contents right column contents right column contents
right column contents right column contents right column contents right
column contents right column contents right column contents</div>
</div>
</body>
</html>

[end markup]
Click to expand...

Brilliant. Works beautifully! Thanks!
 
D

dorayme

"rf said:
Yes :)
Click to expand...

You sure you are not forgetting the shrink-to-fit behaviour of floats?

In

<div style="overflow: hidden; border: 1px solid;">
<div style="float: left; background: yellow;">Not very wide content</div>
</div>

the yellow extends only to cover the text.
 
R

rf

dorayme said:
You sure you are not forgetting the shrink-to-fit behaviour of floats?
Click to expand...

Er, by yes I mean that: yes, I had forgotton that this thread was about
floated divs and yes floating a div *will* affect it's width, specifically
shrink to fit. So "otherwise specified" indirectly includes floating.

IOW you caught me out :)
 
A

asdf

Post a URL to the page, not a picture of the code.
Click to expand...
Don't float div3. Give it a left margin of 150px;
Click to expand...

Matt,

Try this... it ain't perfect, it ain't purdy, it's kinda minimalist, but
it
should give you a good starting point.

Pay particular attention to the 'width' of the left column, and the
'margin-left' of the right column.

Copy the following into a new html doc and start playing! Hope it helps.

[start markup]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DIV Test</title>
<style type="text/css">
<!--
.leftcolumn {
float: left;
width: 12em;}

.rightcolumn {
margin-left: 12em;}

-->
</style>
</head>
<body>
<div id="wrapper">
<div class="leftcolumn">left column contents left column contents left
column contents left column contents left column contents left column
contents</div>
<div class="rightcolumn">right column contents right column contents right
column contents right column contents right column contents right column
contents right column contents right column contents right column contents
right column contents right column contents right column contents right
column contents right column contents right column contents</div>
</div>
</body>
</html>

[end markup]
Click to expand...
Brilliant. Works beautifully! Thanks!
Click to expand...

You are more than welcome, my friend!
 
D

dorayme

"asdf said:
Jim Moe said:
[huge unnecessary quote with added complete version of King James
version of Bible]

You are more than welcome, my friend!

http://www.netmeister.org/news/learn2quote.html
Click to expand...
Pot. Kettle. Black.
Click to expand...

Haha... you got in first ;)
Click to expand...

Hey asdf, if I have made a mistake in this, I appoint you Chief Pointer,
and will pay a small bonus for each example so I can improve in this
regard. When you point out an example, point it without bothering to
quote the whole thing. Quoting is an art and not a science and we all
make a few mistakes. Sometimes we too much, sometimes we too little. But
there is a difference between this and not even bothering to try or
being totally oblivious of JK's excellent insistence on such things for
the good order and management of Usenet.

O no! You two guys are not meaning to express exasperation with...
with.... with... me on the crime of *babbling*, the other JK regular
point of admonishment?

That's not fair for either of two reasons:

(1) My alleged babbling is a healthy loquacity.

(2) It is a different crime to "clueless full-quoting" and so the
pot/kettle remark is off the mark.

<g>
 
A

asdf

dorayme said:
asdf said:
Jim Moe said:
On 03/05/09 07:52 pm, dorayme wrote:

[huge unnecessary quote with added complete version of King James
version of Bible]

You are more than welcome, my friend!

http://www.netmeister.org/news/learn2quote.html

Pot. Kettle. Black.
Click to expand...

Haha... you got in first ;)
Click to expand...

Hey asdf, if I have made a mistake in this, I appoint you Chief Pointer,
and will pay a small bonus for each example so I can improve in this
regard. When you point out an example, point it without bothering to
quote the whole thing. Quoting is an art and not a science and we all
make a few mistakes. Sometimes we too much, sometimes we too little. But
there is a difference between this and not even bothering to try or
being totally oblivious of JK's excellent insistence on such things for
the good order and management of Usenet.

O no! You two guys are not meaning to express exasperation with...
with.... with... me on the crime of *babbling*, the other JK regular
point of admonishment?

That's not fair for either of two reasons:

(1) My alleged babbling is a healthy loquacity.

(2) It is a different crime to "clueless full-quoting" and so the
pot/kettle remark is off the mark.

<g>
Click to expand...

Yawn.
 
D

dorayme

Jim Moe said:
I rest my case.
Click to expand...

Pity it is not clear what your case is or rather what it *was* when you
responded with the 'pot kettle' remark (which I was not offended by,
just curious as to quite what my crime was, a quoting crime or a
babbling crime. These are quite distinct criminal offences Jim and when
I am stopped for arrest - as I am regularly - I am mildly curious of the
actual charge.

....
I have no opinion about loquacious rambling.
Click to expand...

Your expression suggest you do. I understand. I have a lot of evidence
that I am not usually any sensible person's cup of tea.
I have come to ignore posters who cause me to scroll through all that
*UNNECESSARY* quoted text (see above) to get to a (usually succinct) response.
Click to expand...

Now I am even more confused. You pot-kettled me. Now you seem to be
saying something about poor asdf (I say "poor" because he is very very
tired, he was yawning in his last reply to me. <g>)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Javascript not hiding nested elements simultaneously 2
Incrementing getelementbyid 1
Need help , Having problem with Drag n Drop... 1
Clickable Div Block 1
Need help , Having problem with Drag n Drop ? 9
div problem 6
floating divs width unknown width 18
Example of DIV wrapping problem 5

Members online

No members online now.
Total: 24 (members: 0, guests: 24)
Robots: 648

Forum statistics

Threads
473,769
Messages
2,569,581
Members
45,056
Latest member
GlycogenSupporthealth

Latest Threads

Top