ASP.NET Discussion Boards

View All Threads

First Prev Next

Dynamic width DIV next to a static width DIV

jojoba20116-Feb-13 0:31

jojoba2011

6-Feb-13 0:31

Hi
I am trying to create a column that will always have remaining width. However I want it consist of 3 divs as the middle div will always fill the width available where as the left and right divs will be a fixed width. The problem I have is that the middle div which has remaining width knocks the other divs onto a new line. How can I prevent this?

Appear on Left, this would be fixed width

Always be remainging width

Appear Right, this would be fixed width

note :
something the left div will have no controls in it.
many thanks in adavance

Re: Dynamic width DIV next to a static width DIV

Keith Barrow6-Feb-13 12:54

Keith Barrow

6-Feb-13 12:54

I'm working on my mobile, so apologies in advance for the lack of formatting / example code.
In principle it's pretty simple, once you know how:
1. Create a div as a container.
2. Into the above place three divs left,right and middle in that order
3. Using CSS float the left div left and the right div. ALSO set the widths
4. Using CSS set the left margin and right margin of the middle div so
it doesn't run round the divs on the edge.

You might also need to Google cleafix if you want to support other browsers.

A round up of the above can be seen here:
http://css.maxdesign.com.au/floatutorial/tutorial0915.htm

Sort of a cross between Lawrence of Arabia and Dilbert.[^]
-Or-
A Dead ringer for Kate Winslett[^]

Re: Dynamic width DIV next to a static width DIV

jojoba20116-Feb-13 18:05

jojoba2011

6-Feb-13 18:05

Thanks for solution.
But no use.
Cause when i dont have anything in left div the content div's width should increase ( i mean it should take the left div with too).

Please Help !

Re: Dynamic width DIV next to a static width DIV

Richard Deeming7-Feb-13 1:51

Richard Deeming

7-Feb-13 1:51

CSS sibling selectors will help. You might even be able to use the general sibling combinator[^]:

HTML

<div class="wrapper">
   <div class="left-column">
      Left column content.
   </div>
   <div class="right-column">
      Right column content.
   </div>
   <div class="main-column">
      Main column content.
   </div>
</div>

CSS

.left-column
{
   float: left;
   width: 120px;
}
/* If the main column is preceded by a left column, add a left margin: */
.left-column ~ .main-column
{
   margin-left: 120px;
}

.right-column
{
   float: right;
   width: 120px;
}
/* If the main column is preceded by a right column, add a right margin: */
.right-column ~ .main-column
{
   margin-right: 120px;
}

/* Clear the column floats: */
.wrapper:after
{
   content: "";
   display: table;
   clear: both;
}

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: Dynamic width DIV next to a static width DIV

jojoba201113-Feb-13 22:29

jojoba2011

13-Feb-13 22:29

Thanks All!

But i wanna somthing like this :

ASP.NET

<div style="width: 100%;">
     <div style="width:15%;float:right"><asp:TextBox runat="server" Width="120px"></asp:TextBox></div>
    <div style="float:right;width:100%"><asp:TextBox ID="TextBox2" runat="server" Width="100%"></asp:TextBox></div>
    <div style="width:15%;float:left"><asp:TextBox ID="TextBox1" runat="server" Width="117px"></asp:TextBox></div>
</div>

and user can remove center texbox in settings and it will be like this :

ASP.NET

<div style="width: 100%;">
     <div style="width:15%;float:left"><asp:TextBox runat="server" Width="120px"></asp:TextBox></div>
    <div style="float:left;"><asp:TextBox ID="TextBox2" runat="server" Width="100%"></asp:TextBox></div>
    <div style="width:15%;float:left"></div>
</div>

Now Center div should take the left div width too.

Example 2 :

first i have :

ASP.NET

<div class="wrapper">
        <div class="left-column">
             <asp:TextBox ID="TextBox1" runat="server" Width="100%">Left</asp:TextBox>
        </div>
        <div class="right-column">
            <asp:TextBox ID="TextBox2" runat="server" Width="100%">Rigth</asp:TextBox>
        </div>
        <div class="main-column">
           <asp:TextBox ID="TextBox3" runat="server"  >content</asp:TextBox>
        </div>
    </div>

and the user can change remove the left textbox in left div :

ASP.NET

<div class="wrapper">
        <div class="left-column">
             
        </div>
        <div class="right-column">
            <asp:TextBox ID="TextBox2" runat="server" Width="100%">Rigth</asp:TextBox>
        </div>
        <div class="main-column">
           <asp:TextBox ID="TextBox3" runat="server"  >content</asp:TextBox>
        </div>
    </div>

Now the center div should "Stretch".

Last Visit: 31-Dec-99 18:00 Last Update: 25-Apr-24 19:49

Refresh

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.