• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 225
  • Last Modified:

problem with CSS

Hello guys,

I am not a web developer and trying to do something fancy with my web form design. I am trying to place two if the divs side by side and I am not able to. Can anybody pls tell me what I am a doing wrong?

This is small pice of my small code:

<form id="form1" runat="server">
    <div>
    <div id = "Switch" style= "background-color:blue; height:300px; left:0px; top:0px; width:20px"></div>
    <div id = "chart" style = "background-color:Olive;left:0px; top: 0px;height:300px"></div>
    </div>
    <br  />
    <div id = "container" style = " position:relative; left:100px; top:0px;" >         
    <asp:GridView ID="GvRegistration" runat="server" AutoGenerateColumns="False"
            BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px"
            CellPadding="4" ForeColor="Black" GridLines="Horizontal" Height="454px"
            Width="406px" AllowPaging="True" AllowSorting="True"    
        onsorting="GvRegistration_Sorting">
        <FooterStyle BackColor="#CCCC99" ForeColor="Black" />
        <HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Right" />
        <SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />
        <SortedAscendingCellStyle BackColor="#F7F7F7" />
        <SortedAscendingHeaderStyle BackColor="#4B4B4B" />
        <SortedDescendingCellStyle BackColor="#E5E5E5" />
        <SortedDescendingHeaderStyle BackColor="#242121" />
    </asp:GridView>
    </div>
   
Positioning-issue.png
0
TheCommunicator
Asked:
TheCommunicator
4 Solutions
 
xav056Commented:
float your divs as below
  <div>
    <div id = "Switch" style= "background-color:blue; height:300px; left:0px; top:0px;

width:20px; float:left;"></div>
    <div id = "chart" style = "background-color:Olive; top:

0px;height:300px;float:left;width:300px;"></div>
    </div>
0
 
gamarrojgqCommented:
Hi,

There are a couple of ways to solved, but an easy one is use a table

    <table>
        <tr>
            <td>
                <div id = "Switch" style= "background-color:blue; height:300px; left:0px; top:0px; width:20px"></div>
            </td>
            <td>
                <div id = "chart" style = "background-color:Olive;left:0px; top: 0px;height:300px"></div>                              
            </td>
        </tr>
    </table>  

Hope that helps
0
 
10023Web site maintenance and designCommented:
<HTML>
<HEAD>

<TITLE></TITLE>


<STYLE TYPE="text/css">
#container {
}
#switch {
      float: left;
      width: 700px;
height:100px;
      margin: 0;
      padding: 0;
}

#chart {
      float: left;
      width: 700px;
      height:100px;
      margin: 0;
      padding: 0;
}

</STYLE>
</HEAD>

<BODY >

<form id="form1" runat="server">
    <div id= "container">
    <div id = "Switch" style= "background-color:blue;"></div>
    <div id = "chart" style = "background-color:Olive;"></div>
   
 
    <div id = "bottom" style = "background-color:black;  float: left; top: 210px; left: 0px; width: 700px; height: 100px;" >         
   
</div>
    </div>
</BODY>
</HTML>
0
 
TheCommunicatorAuthor Commented:
Hi guys,

I converted it into float: left and it seesm to work fine. Thank you.

Then it made me curious and I though to try the tables and then it did nto produce good results. My code is as following:

<table style= "background-color:Gray;">
    <tr>
    <td id = "Switch" style= "background-color:blue; height:100px; top:0px; width:10%;"></td>
    <td id = "chart" style = "background-color:Olive; top:0px; height:100px; width:90%;"></td>
    </tr>
   
    <tr id = "container" style = " position:relative; left:100px; top:0px;">              
    <asp:GridView ID="GvRegistration" runat="server" AutoGenerateColumns="False"
            BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px"
            CellPadding="4" ForeColor="Black" GridLines="Horizontal" Height="454px"
            Width="406px" AllowPaging="True" AllowSorting="True"    
        onsorting="GvRegistration_Sorting">
        <FooterStyle BackColor="#CCCC99" ForeColor="Black" />
        <HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Right" />
        <SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />
        <SortedAscendingCellStyle BackColor="#F7F7F7" />
        <SortedAscendingHeaderStyle BackColor="#4B4B4B" />
        <SortedDescendingCellStyle BackColor="#E5E5E5" />
        <SortedDescendingHeaderStyle BackColor="#242121" />
    </asp:GridView>
    </tr>
    </table>

and I am attaching the screenshot of the results. i am not sure what exactly is worng.
Bad-CSS.png
0
 
10023Web site maintenance and designCommented:
I noticed you left your table data <td> container</td> out in your last <tr> table row</tr>
I don't have your ASP form so i filled
I think most designers accept divs as a solution over tables...google tables versus divs

<HTML>
<HEAD>

<TITLE></TITLE>


<STYLE TYPE="text/css">
<!--
... Type style here!
-->
</STYLE>
</HEAD>

<BODY>

<table style= "background-color:Gray;">
    <tr>
    <td id = "Switch" style= "background-color:blue; height:100px; top:0px; width:10%;"><p> This is the first cell</p></td>
    <td id = "chart" style = "background-color:Olive; top:0px; height:100px; width:90%;"><p> This is the second cell</p></td>
    </tr>
   
    <tr id = "container" style = " position:relative; left:100px; top:0px; width: 100%">
<td> <p>And Now we have the lonely bottom data cell,And Now we have the lonely bottom data cell,And Now we have the lonely bottom data cell,And Now we have the lonely bottom data cell,And Now we have the lonely bottom data cell,And Now we have the lonely bottom data cell,And Now we have the lonely bottom data cell,And Now we have the lonely bottom data cell,And Now we have the lonely bottom data cell,And Now we have the lonely bottom data cell,And Now we have the lonely bottom data cell,And Now we have the lonely bottom data cell,And Now we have the lonely bottom data cell,And Now we have the lonely bottom data cell,And Now we have the lonely bottom data cell, cell            
    <asp:GridView ID="GvRegistration" runat="server" AutoGenerateColumns="False"
            BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px"
            CellPadding="4" ForeColor="Black" GridLines="Horizontal" Height="454px"
            Width="406px" AllowPaging="True" AllowSorting="True"    
        onsorting="GvRegistration_Sorting">
        <FooterStyle BackColor="#CCCC99" ForeColor="Black" />
        <HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Right" />
        <SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />
        <SortedAscendingCellStyle BackColor="#F7F7F7" />
        <SortedAscendingHeaderStyle BackColor="#4B4B4B" />
        <SortedDescendingCellStyle BackColor="#E5E5E5" />
        <SortedDescendingHeaderStyle BackColor="#242121" />
    </asp:GridView>
</td>
    </tr>
    </table>
</BODY>
</HTML>
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now