Prev: Why can't I get space?
Next: Using styles to create frames?
From: Mark Smith on 21 May 2010 11:20
Hello,

I was wondering in the following example, is it possible to make
divMiddleContainer dynamically expand to fill all available horizontal
space without pushing divOpenContainer and and divCloseContainer onto
another line?

divOpenContainer and divCloseContainer need fixed widths because they
will contain images.

Thanks for any suggestions.

<style>
#divOpenContainer{
width:50px;
background-color:green;
float:left;
text-align:right;
}
#divCloseContainer{
width:50px;
background-color:green;
float:left;
}
#divMiddleContainer{
float:left;
background-color:red;
text-align:center;
}
#divContainer{
width:100%;
}
</style>

<div id="divContainer">
<div id="divOpenContainer">(</div>
<div id="divMiddleContainer">my content goes here</div>
<div id="divCloseContainer">)</div>
</div>
From: Gus Richter on 21 May 2010 12:52
On 5/21/2010 11:20 AM, Mark Smith wrote:
> Hello,
>
> I was wondering in the following example, is it possible to make
> divMiddleContainer dynamically expand to fill all available horizontal
> space without pushing divOpenContainer and and divCloseContainer onto
> another line?
>
> divOpenContainer and divCloseContainer need fixed widths because they
> will contain images.
>
> Thanks for any suggestions.

Run this modified version:

<style>
#divOpenContainer{
width:50px;
background-color:green;
float:left;
text-align:right;
}
#divCloseContainer{
width:50px;
background-color:green;
float:right;
}
#divMiddleContainer{
/*float:left; not necessary for this demo*/
background-color:red;
text-align:center;
}
#divContainer{
/*width:100%; not necessary for this demo*/
}
</style>

<div id="divContainer">
<div id="divOpenContainer">(</div>
<div id="divCloseContainer">)</div>
<div id="divMiddleContainer">my content goes here</div>
The idea here is to float the left div left, the right div right and to
allow the middle one to "flow" between the two.
</div>

From: Thomas 'PointedEars' Lahn on 21 May 2010 14:25
Gus Richter wrote:

> <style>

<style type="text/css">

> #divOpenContainer{
> width:50px;
> background-color:green;

Don't forget to define the foreground/text color, though.

<http://www.w3.org/QA/Tips/color>


PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8300dec7(a)news.demon.co.uk>
From: dorayme on 21 May 2010 19:57
In article <ht6doq$5dl$1(a)news.eternal-september.org>,
Gus Richter <gusrichter(a)netscape.net> wrote:

> On 5/21/2010 11:20 AM, Mark Smith wrote:
> > Hello,
> >
> > I was wondering in the following example, is it possible to make
> > divMiddleContainer dynamically expand to fill all available horizontal
> > space without pushing divOpenContainer and and divCloseContainer onto
> > another line?
> >
> > divOpenContainer and divCloseContainer need fixed widths because they
> > will contain images.
> >
> > Thanks for any suggestions.
>
> Run this modified version:
>
....
> #divMiddleContainer{
....
> background-color:red;
> text-align:center;
> }
....
>
> <div id="divContainer">
> <div id="divOpenContainer">(</div>
> <div id="divCloseContainer">)</div>
> <div id="divMiddleContainer">my content goes here</div>
> The idea here is to float the left div left, the right div right and to
> allow the middle one to "flow" between the two.
> </div>

Give MiddleContainer a left and right margin of 50px if you don't
want content spilling underneath the left and right areas.

--
dorayme
From: Gus Richter on 21 May 2010 21:04
On 5/21/2010 2:25 PM, Thomas 'PointedEars' Lahn wrote:
> Gus Richter wrote:
>
>> <style>
>
> <style type="text/css">
>
>> #divOpenContainer{
>> width:50px;
>> background-color:green;
>
> Don't forget to define the foreground/text color, though.
>
> <http://www.w3.org/QA/Tips/color>
>
>
> PointedEars

I'm not surprised at your comments.

--
Gus

 |  Next  |  Last
Pages: 1 2
Prev: Why can't I get space?
Next: Using styles to create frames?