asked on

CSS help, <div>

The following code generates wrong layout as shown on the attached image.

Question: How can I modify it to show what I need (also shown on the attached image)?

Thank you.

   
.controls {
	width:1026px;
	min-height: 20px;
	background-color:green;
	float:left;
     text-align: left;
    }

.
.

<div class="controls">
        &nbsp&nbsp&nbsp&nbsp<asp:Label 
            ID="Label4" runat="server" Text="Region:" 
            style="font-family: Arial; font-size: small" Height="22px"></asp:Label>
        <asp:DropDownList ID="cboRegion" runat="server" Width="83">

        </asp:DropDownList>&nbsp&nbsp&nbsp&nbsp
        <asp:Label ID="Label5" runat="server" Text="Data Year:" 
            style="font-size: small; font-family: Arial" Height="22px"></asp:Label>
        <asp:DropDownList ID="cboYear" runat="server"  Width="83">

        </asp:DropDownList>&nbsp&nbsp&nbsp&nbsp
              <asp:Label ID="Label6" runat="server" Text="Rollup:" 
            style="font-size: small; font-family: Arial" Height="22px"></asp:Label>
        <asp:Panel ID="optRollup" runat="server" Width="135" BorderColor="white">
            <asp:RadioButton ID="RadioButton1" Text="Monthly" runat="server" 
                style="font-family: Arial; font-size: small" />&nbsp&nbsp
            <asp:RadioButton ID="RadioButton2"  Text="YTD" runat="server" 
                style="font-family: Arial; font-size: small" />
        </asp:Panel>&nbsp&nbsp&nbsp&nbsp

                    <asp:Label ID="Label7" runat="server" Text="Location:" 
            style="font-size: small; font-family: Arial" Height="22px"></asp:Label>
        <asp:Panel ID="Panel3" runat="server" Width="400" BorderColor="white">
            <asp:RadioButton ID="RadioButton3" Text="Location A" runat="server" 
                style="font-family: Arial; font-size: small" />&nbsp&nbsp
            <asp:RadioButton ID="RadioButton4"  Text="Location B" runat="server" 
                style="font-family: Arial; font-size: small" />&nbsp&nbsp
            <asp:RadioButton ID="RadioButton5" Text="Location C" runat="server" 
                style="font-family: Arial; font-size: small" />&nbsp&nbsp
            <asp:RadioButton ID="RadioButton6"  Text="Location D" runat="server" 
                style="font-family: Arial; font-size: small" />
        </asp:Panel>
    </div>
    <br />
	<div class="leftButton left">
                    <asp:Panel ID="Panel1" runat="server">
                     <asp:Button ID="Button1" Name="opt" runat="server" Text="1" Height="30px" 
                            Width="103px" TabIndex="1" />
                     <asp:Button ID="Button2" Name="opt" runat="server" Text="3" Height="30px" 
                            Width="103px" TabIndex="3" />
                     <asp:Button ID="Button3" Name="opt" runat="server" Text="5" Height="30px" 
                            Width="103px" TabIndex="5" /><br />
                     <asp:Button ID="Button4" Name="opt" runat="server" Text="2" Height="30px" 
                            Width="103px" TabIndex="2" />
                     <asp:Button ID="Button5" Name="opt" runat="server" Text="4" Height="30px" 
                            Width="103px" TabIndex="4" />
                     <asp:Button ID="Button6" Name="opt" runat="server" Text="6" Height="30px" 
                            Width="103px" TabIndex="6" />
                 </asp:Panel>
    </div>
	<div class="middleButton right">
         <img src="images/Button.png" width="200px" height="60px" />
    </div>
 	<div class="rightButton right">
                <asp:Panel ID="Panel2" runat="server">
                     <asp:Button ID="Button7" runat="server" Text="7" Height="30px" 
                         Width="103px" TabIndex="7" />
                     <asp:Button ID="Button8" runat="server" Text="9" Height="30px" 
                         Width="103px" TabIndex="9" />
                     <asp:Button ID="Button9" runat="server" Text="11" Height="30px" 
                         Width="103px" TabIndex="11" /><br />
                     <asp:Button ID="Button10" runat="server" Text="8" Height="30px" 
                         Width="103px" TabIndex="8" />
                     <asp:Button ID="Button11" runat="server" Text="10" Height="30px" 
                         Width="103px" TabIndex="10" />
                     <asp:Button ID="Button12" runat="server" Text="12" Height="30px" 
                         Width="103px" TabIndex="12" />
                 </asp:Panel>   
    </div>

Open in new window

CCS-Help.png

Gary

To your two panels with id Panel3 and optRollup add a class attribute with the respective same names
And then add to your css

.Panel3,.optRollup {
display:inline-block
}

Open in new window

Mike Eghtebas

ASKER

brb

one pannel is working...

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Mike Eghtebas

ASKER

I removed my last post because I noticed my mistake. Now I am trying to handle the second panel correctly. I will post a response shortly.

Thanks,

Mike

Mike Eghtebas

ASKER

The panels are working great. Thanks to your code. But, I have managed to mess it up elsewhere.

I have posted a new question for continuation. I appreciate any new comments you may have on the new question at:

https://www.experts-exchange.com/questions/28478553/CSS-tune-up.html

Thank you,

Mike

CSS help, &lt;div&gt;

CSS help, <div>