?
Solved

CSS help, <div>

Posted on 2014-07-17
5
Medium Priority
?
252 Views
Last Modified: 2014-07-17
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
0
Comment
Question by:Mike Eghtebas
  • 3
  • 2
5 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40203112
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

0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40203160
brb

one pannel is working...
0
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 40203192
You haven't added the class names to the two panels.
0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40203228
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
0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40203319
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:

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28478553.html

Thank you,

Mike
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question