A simple problem to solve - div height!

richard · Nov 29, 2009

First of all, there will be no URL posting for this. Period.

I just want to know how I can cause the left column height to match the
right column in case of word wrapping? Remove the <br> and you'll see what
I mean.

<body>

<div style="border:solid 2px #00f; width:30em; height:auto;">

<div style="height:auto;">

<div style="width:2em; height:100%; background:#eee; float:left;">
x
</div>


<div style=" background:#ffff7a; height:100%;">
What is the question of the day <br> you ask?
</div>
</div>

</div>

</body>

I feel if you're to lazy to copy and paste the code into an editor, you
should just keep quiet.

rf · Nov 29, 2009

richard said:
First of all, there will be no URL posting for this. Period.

Yes sir. Right sir. Would you like fries with that sir?

I just want to know how I can cause the left column height to match the
right column in case of word wrapping? Remove the <br> and you'll see what
I mean.

Why would you want to?

<body>

<div style="border:solid 2px #00f; width:30em; height:auto;">

<div style="height:auto;">

Why sepecify height: auto:. It's the default.

<div style="width:2em; height:100%; background:#eee; float:left;">

100% of what? The element is floated, what is it's containing element that
it will be 100% the height of? Any guess will do.

x
</div>


<div style=" background:#ffff7a; height:100%;">

Once again 100% of what? Do you really know?

What is the question of the day <br> you ask?
</div>
</div>

</div>

</body>

I feel if you're to lazy to copy and paste the code into an editor, you
should just keep quiet.

And if you feel that you are too lazy to provide us with a URL so we don't,
and each and every one of us, have to go to all the trouble to copy/paste
this elementry code into an editor and then find somewhere to save it, and
so clutter even more our local storage, so a browser can then look at it
then *you* are just too much trouble and don't even deserve an answer.

BTW the answer you request has been provided here and elsewhere hundreds of
times. I can think of at least five ways of doing it without even thinking
hard. Much less harder than all that copy/paste/save stuff would cause me to
think.

STFW.

And if you don't understand what that means then STFW.

Travis Newbury · Nov 29, 2009

First of all, there will be no URL posting for this. Period.

Man, you sure do know how to get us to just jump through hoops for
you...

I feel if you're to lazy to copy and paste the code into an editor, you
should just keep quiet.

Mum's the word here...

Roy A. · Nov 29, 2009

First of all, there will be no URL posting for this. Period.

I just want to know how I can cause the left column height to match the
right column in case of word wrapping? Remove the <br> and you'll see what
I mean.

<body>

<div style="border:solid 2px #00f; width:30em; height:auto;">

<div style="height:auto;">

<div style="width:2em; height:100%; background:#eee; float:left;">

Travis Newbury · Nov 29, 2009

STFW.
And if you don't understand what that means then STFW.

I like that a lot.

rf · Nov 29, 2009

STFW.
And if you don't understand what that means then STFW.

I like that a lot.

<grin/>

How was the left-over turkey? Turkey and cranberry sauce sandwiches, with a
sheat of iceberg lettuce, go down a treat.

Beauregard T. Shagnasty · Nov 29, 2009

richard said:
First of all, there will be no URL posting for this. Period.

RtS: lazy bastahd.

I just want to know how I can cause the left column height to match
the right column in case of word wrapping? Remove the <br> and you'll
see what I mean.

<snip fragment - too much is missing>

I feel if you're to [sic] lazy to copy and paste the code into an
editor, you should just keep quiet.

Yeah, that's the attitude that will get you help. It's you that is lazy.

richard · Nov 29, 2009

<div style="width:2em; height:100%; background:#eee; display: table-
cell">

Thanks. Played around with some variations and it still would not show
properly. The only way I could find to cure it was float both div's.

Jonathan N. Little · Nov 29, 2009

richard said:
First of all, there will be no URL posting for this. Period.

I just want to know how I can cause the left column height to match the
right column in case of word wrapping? Remove the<br> and you'll see what
I mean.

<SNIP CODE>

Use a table.

BTW this question as been asked in one form or another countless times
in this NG, e.g., "how to make my columns the same height"

dorayme · Nov 29, 2009

richard said:
First of all, there will be no URL posting for this. Period.

Yes, fair enough, bad time of the month for you eh...

I just want to know how I can cause the left column height to match the
right column in case of word wrapping?

One way to do this is to float something left and either give it a width
or simply note its natural width if it has one (a picture, for example).
Next, give the element destined for the right (if it is not to be
floated) a left margin equal to or perhaps a wee bit more (for grace) to
the width of the float.

Try that and come back to say if this is enough to get you going or if
it is not quite doing the job you want. Please, under no circumstances,
post a URL. If you feel any sudden urge, that's OK. But don't act on it.

Let this thread be a special url-free zone. Let it be like a fire in
which we forge our plain text skills. And let us emerge ready to
conquer.

Clickable Div Block	1	Oct 13, 2023
Setup a portion of html page as scrollable?	25	Jan 7, 2025
Need help , Having problem with Drag n Drop ?	9	Dec 21, 2022
Need help , Having problem with Drag n Drop...	1	Dec 21, 2022
Aligned to the left	3	Apr 19, 2023
Help with Visual Lightbox: Scripts	2	May 3, 2023
Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is	0	Mar 13, 2025
I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023

A simple problem to solve - div height!

richard

rf

Travis Newbury

Roy A.

Travis Newbury

rf

Beauregard T. Shagnasty

richard

Jonathan N. Little

dorayme

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads