Showing posts with label ltdiv. Show all posts
Showing posts with label ltdiv. Show all posts

Monday, March 26, 2012

set div width to remaining width of the browser

using float: left and float: right to build a two column page
layout.
<div style="float:left">column 1</div>
<div style="float:right">column 2</div>
then I set the width of the first column to a fixed size:
<div style="float:left; width:10em;>column 1</div>
how can I set the width of the 2nd column, the float:right div, to
fill the remaining space of its container?
I know I can use percentages, but I want the left column to always be
the same fixed length.
Is this a case where <table> is the obvious solution?
thanks,
-SteveDo you need this?
<div style="float:left; width: 10em; border: solid 1px red">
ZZZZZ
</div>
<div style="margin-left: 10em; border: solid 1px green">
www
<div>

> using float: left and float: right to build a two column page
> layout.
> <div style="float:left">column 1</div>
> <div style="float:right">column 2</div>
> then I set the width of the first column to a fixed size: <div
> style="float:left; width:10em;>column 1</div>
> how can I set the width of the 2nd column, the float:right div, to
> fill the remaining space of its container?
> I know I can use percentages, but I want the left column to always be
> the same fixed length.
> Is this a case where <table> is the obvious solution?
> thanks,
> -Steve
>
On Jun 15, 2:00 pm, Yuriy Solodkyy <y.dot.solod...@.gmail.com> wrote:
> Do you need this?
> <div style="float:left; width: 10em; border: solid 1px red">
> ZZZZZ
> </div>
> <div style="margin-left: 10em; border: solid 1px green">
> www
> <div>
>
thank you. I just read of the margin technique in a very good book I
have:
http://www.amazon.com/CSS-Anthology...81932373&sr=8-1
a lot of CSS positioning seems to be a hack. esp if you dont want to
use javascript out of concern of complicating things even further.
I assume CSS does not allow one div to reference another for is
position and size? That would seem to be ideal for page layouts.
( where the height of div a is always the height of div b, div c
always has the same absolute X position of div d, ... )
thanks,
-Steve

set div width to remaining width of the browser

using float: left and float: right to build a two column page
layout.
<div style="float:left">column 1</div>
<div style="float:right">column 2</div>

then I set the width of the first column to a fixed size:
<div style="float:left; width:10em;>column 1</div>

how can I set the width of the 2nd column, the float:right div, to
fill the remaining space of its container?

I know I can use percentages, but I want the left column to always be
the same fixed length.

Is this a case where <tableis the obvious solution?

thanks,

-SteveDo you need this?

<div style="float:left; width: 10em; border: solid 1px red">
ZZZZZ
</div>
<div style="margin-left: 10em; border: solid 1px green">
www
<div>

Quote:

Originally Posted by

using float: left and float: right to build a two column page
layout.
<div style="float:left">column 1</div>
<div style="float:right">column 2</div>
then I set the width of the first column to a fixed size: <div
style="float:left; width:10em;>column 1</div>
>
how can I set the width of the 2nd column, the float:right div, to
fill the remaining space of its container?
>
I know I can use percentages, but I want the left column to always be
the same fixed length.
>
Is this a case where <tableis the obvious solution?
>
thanks,
>
-Steve
>


On Jun 15, 2:00 pm, Yuriy Solodkyy <y.dot.solod...@.gmail.comwrote:

Quote:

Originally Posted by

Do you need this?
>
<div style="float:left; width: 10em; border: solid 1px red">
ZZZZZ
</div>
<div style="margin-left: 10em; border: solid 1px green">
www
<div>
>


thank you. I just read of the margin technique in a very good book I
have:
http://www.amazon.com/CSS-Anthology...81932373&sr=8-1
a lot of CSS positioning seems to be a hack. esp if you dont want to
use javascript out of concern of complicating things even further.

I assume CSS does not allow one div to reference another for is
position and size? That would seem to be ideal for page layouts.
( where the height of div a is always the height of div b, div c
always has the same absolute X position of div d, ... )

thanks,

-Steve