I can just think solving this with absolute positioning (or javascript
last resource):
<style type="text/css">
* {margin: 0; padding: 0;}
#divContainer{
position: relative;
width:100%;
}
#divOpenContainer{
position: absolute;
top: 0;
left: 0;
width: 50px;
background-color:green;
text-align:right;
}
#divCloseContainer{
position: absolute;
top: 0;
right:0;
width: 50px;
background-color:green;
text-align: left;
}
#divMiddleContainer{
background-color:red;
text-align:center;
margin-left: 50px;
margin-right: 50px;
}
</style>
On May 21, 8:21 am, Mark Smith <[email protected]>
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.
>
> <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>
>
> --
> --
> You received this because you are subscribed to the "Design the Web with CSS"
> at Google groups.
> To post: [email protected]
> To unsubscribe: [email protected]
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
