Two Divs Side by Side problem

Hello,  Below is a section of my form that I am having a problem with.  There are two divs that I am trying to align next to each other. The first Div is centered on the page and the second Div, (which contains a Calendar Control),I would like to have sitting to the right of the first Div (with the Calendar control residing at the bottom of it's own div).  Currently the first Div is centered (good), but the second Div I can not get aligned to the right. Can you help?  Thanks 

<form id="form1" runat="server">
       <div id="mainDiv" align=center style="margin-left:auto; margin-right:Auto; width:1000px; height: 568px;">
        <div align=center style="margin-left:auto; margin-right:Auto; width:580px;">
        <br />
        <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Size="XX-Large" ForeColor="Blue"
            Style="top: 40px" Text="Problem Management"
            Width="504px"></asp:Label> <br />  
            <br />
            <br />
               <asp:Label ID="Label4" runat="server" Font-Bold="True" Text="Problem Number:" Width="128px"></asp:Label>
         <asp:TextBox ID="txtProbNumber" runat="server" Width="136px"></asp:TextBox>
             <br /> 
            <br />
            <br />
            <br /> <br />
              <br /> 
         <asp:Label ID="Label10" runat="server" Font-Bold="True" Text="From Date" Width="96px"></asp:Label> 
               <asp:TextBox ID="txtFrmDt" runat="server" Width="80px"></asp:TextBox> 

        <asp:Label ID="Label11" runat="server" Font-Bold="True" Text="To Date" Width="80px"></asp:Label>
         <asp:TextBox ID="txtToDt" runat="server"  Width="80px"></asp:TextBox>    
             <br />
        <br />
        <asp:Button ID="cmdClear" runat="server"  Text="Clear " Width="144px" Font-Bold="True" />
             <br /> <br />
        </div>
       <div Id="CalDiv" align=center style="Float:right; clear:left; width:200px; height: 275px;">
            <asp:Calendar ID="Calendar1" runat="server" Visible="False">
        </asp:Calendar>
             </div>
        </div>
    </form>
 
Thanks
0
StrangerMike
12/18/2007 4:37:13 PM
asp.net.visual-studio-2005 7760 articles. 0 followers. Follow

15 Replies
1229 Views

Similar Articles

[PageSpeed] 7
Get it on Google Play
Get it on Apple App Store

Is your second div always falling down to the next line?  You will either have to position them absolutely or place them in a table like this:

<table>
<tr>
<td><div ID=div1>left stuff here</div><td>
<td><div ID=div2>right stuff here</div><td>
</tr>
</table>

 

0
d2eason
12/18/2007 4:54:46 PM

Try adding 'float: left' to the first of the inner divs.


Paul Weston
0
bpw
12/18/2007 7:19:47 PM

Yes it is on the next line.  The problem I had with the table (unless I did it wrong) was that I need Div One to always be centered in the web page.  Div Two contains a calendar control that is only visible when an image button in Div One is pressed. So I am trying to avoid Left and Right setup, because it does not look right. 

Thanks 


Thanks
0
StrangerMike
12/18/2007 7:20:43 PM

it still rendered Div two under Div one.


Thanks
0
StrangerMike
12/18/2007 7:23:44 PM

Your first div might not align centrally this way; you’ll have to set the left-margin manually and remove the ‘margin-right:Auto;’. Alternatively, position the second of the inner divs ‘absolute’.


Paul Weston
0
bpw
12/18/2007 7:26:31 PM

What you’re trying to do isn’t possible using auto-margins. If you float a div on the right it will take up space and push your other div to the left.

As you’ve fixed the width of all divs, set the left margin of the first inner div to a fixed value to 'center' it and add float: left;.


Paul Weston
0
bpw
12/18/2007 7:37:39 PM

Thanks,  Should I remove the main Div encompassing the other two?   Here is what I have now, and I don't even see the calendar on the page? 

<form id="form1" runat="server">
       <div id="mainDiv" align=center style="margin-left:auto; margin-right:Auto; width:1048px; height: 344px; z-index: 100; left: 0px; position: absolute; top: 0px;">
        <div align=center style=" margin-left:300px; float:left; width:580px;">
        <br />
        <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Size="XX-Large" ForeColor="Blue"
            Style="top: 40px" Text="Problem Management"
            Width="504px"></asp:Label> <br />  
            <br />
            <br />
               <asp:Label ID="Label4" runat="server" Font-Bold="True" Text="Problem Number:" Width="128px"></asp:Label>
         <asp:TextBox ID="txtProbNumber" runat="server" Width="136px"></asp:TextBox>
             <br /> 
            <br />
            <br />
            <br /> <br />
              <br /> 
         <asp:Label ID="Label10" runat="server" Font-Bold="True" Text="From Date" Width="96px"></asp:Label> 
               <asp:TextBox ID="txtFrmDt" runat="server" Width="80px"></asp:TextBox> 

        <asp:Label ID="Label11" runat="server" Font-Bold="True" Text="To Date" Width="80px"></asp:Label>
         <asp:TextBox ID="txtToDt" runat="server"  Width="80px"></asp:TextBox>    
             <br />
        <br />
        <asp:Button ID="cmdClear" runat="server"  Text="Clear " Width="144px" Font-Bold="True" />
             <br /> <br />
        </div> 
              <div Id="CalDiv"  style=" position:absolute; width:216px; height: 275px;">
            <asp:Calendar ID="Calendar1" runat="server">
        </asp:Calendar>
             </div>
        </div>
    </form>
 
Thanks
0
StrangerMike
12/18/2007 8:35:24 PM

You've pushed it off the page I think. Start with a left margin of 100px.


Paul Weston
0
bpw
12/18/2007 9:08:19 PM

If you're going to use absolute positioning, you can set the margins with auto. Try this:

 

<div id="mainDiv" style="position:relative;margin-left:auto;margin-right:Auto;width:1048px;height:344px;z-index:100;border:solid 1px;">
  <div style="margin-left:auto;margin-right:auto;width:580px;border:solid 1px;">
  </div> 
  <div Id="CalDiv" style="position:absolute;top:0px;right:0px;width:216px;height:275px;">
      <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
  </div>
</div>
  

 


Paul Weston
0
bpw
12/18/2007 9:17:03 PM

I’ve removed the ‘align=center’ attributes, as this is deprecated. Use ‘text-align: center;’ or auto-margins in your style declaration.

You should also ideally use an external stylesheet. It makes things easier to maintain and speeds up development. You’ll notice that every time you make a change to the page, VS takes a while to restart?


Paul Weston
0
bpw
12/18/2007 9:21:40 PM

Thanks, using your table suggestion I was able to get something useable. It does not look exactly like I wanted it to look, but it is functional.


Thanks
0
StrangerMike
12/18/2007 9:50:44 PM

Paul,  Thanks for your input. I got something going with Tables. But I'm going to create another test page, so I can try your suggestion.

What are external stylesheets?


Thanks
0
StrangerMike
12/18/2007 9:53:05 PM

Yes, I tried this. I through some other controls into the first division.  It is definitely a step in the right direction, for the calendar control div is now on the right.

And I was able to set the Align to center in Div 1 so it appears to be centered. I'll test on various display settings.  Thanks for your time. 

You both answed the question, who gets the star?


Thanks
0
StrangerMike
12/18/2007 10:00:53 PM

Create a .css file and put it somewhere accessible. In this example I’ve put it in the ‘css’ folder in the root directory and called it ‘MyStylesheet.css’.

Put this link in your head-section:

<link href="css/MyStylesheet.css" rel="stylesheet" type="text/css" />

Remove all the style attributes from your markup:

<div id="mainDiv">
  <div id="content">
  </div> 
  <div id="CalDiv">
      <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
  </div>
</div>

Put the following styles (or whatever you’ve decided on) into MyStylesheet.css:

#mainDiv
{
  position:relative;
  margin-left:auto;
  margin-right:auto;
  width:1048px;
  height:344px;
  z-index:100;
  border:solid 1px;  
}
#content
{
  margin-left:auto;
  margin-right:auto;
  width:580px;
  border:solid 1px;  
}
#CalDiv
{
  position:absolute;
  top:0px;
  right:0px;
  width:216px;
  height:275px;
}
You might want to get a book on CSS!
By the way, I think you can mark more than one post as a useful answer if you want?

Paul Weston
0
bpw
12/18/2007 11:38:46 PM

Thanks for the information.


Thanks
0
StrangerMike
12/20/2007 8:37:42 PM
Reply:

Similar Artilces:

Framework 3.0 and Visual Studio 2005 + side note question on Visual Studio 2008
HelloI just have these two quick questions.Thanks.1) Can you code in Visual Studio 2005 using Framework 3.0 instead of 2.0?2) Is the Visual Studio 2008 the final, final release available to download on the MSDN site? The reason I'm asking is that I don't want to be put into a position when it hits the DVDs in Feb. 2008 and have to uninstall. The horror stories of the past BETA uninstalls got me all scared:(  1.  yes, download the tools for VS2005 2.  I believe so, however its up to MS to make that descion!David Kiffhttp://DavidKiff.co.uk-- "Mark As Answer"...

Visual Studio 2005 Edition Released! Is it the same as Visual Studio.Net 2005 ?
Edited by XIIIVisual Studio 2005 Edition Released! Is it the same as Visual Studio.Net 2005 ? Yes. ".NET" part is not actually/officially part of the Visual Studio 2005 name.-- Mike PopeASP.NET User EducationThis posting is provided "AS IS" with no warranties, and confers no rights. Is it Visual Studio .NET 2003 update version? Does Microsoft change its name? I'm not sure I understand your question exactly -- I'm a little thrown by the word "update." Visual Studio 2005 is the new/current version, released on Monday. This product never officially had the word ".NET" in its nam...

Click Event Mapping to Server side code : InitializeComponent() in Visual Studio 2005 (.NET 2.0)
Hi, In Visual Studion 2003 when we create a web page we can map the click events of a asp control to server side code in the InitializeComponent() like this  this.btnAcceptNow.Click += new System.EventHandler(this.btnAcceptNow_Click); InitializeComponent() gets created automatically in VS2003  How do we achieve the same in VS2005 (2.0)? Thanks, Siddharth. If you double-click on the button in design view, it will generate the click event.  or you can select the button, and then use the lightning bolt icon in the properties window to specify event handlers.C# <--->...

can we migrate visual studio .net 2003 project to visual studio.net 2005
Hai friends, I am doing project in ASP.NET(vb language)  I have visual studio .net 2003 installed in my pc and i am doing my project in it , because i need to use additional functionality like "AJAX" , i want to use visual studio .net 2005 or visual studio .net 2008 my project folder name is "sqls" can i install visual studio .net 2005 or visual studio .net 2008 and migrate this project folder to work in visual studio .net 2005 or visual studio .net 2008 i have uninstall visual studio .net 2003 and install visual studio .net 2005 or visual ...

Loading Visual Studio.net 2003 on a pc with Visual Studio.net 2005 installed
I have recently installed Visual Studio.net 2005 on a pc and have been using it to create a .net 2.0 application. I also have pc running Visual Studio 2003 that I use to support a .net 1.1 application. This pc has broke. Would I be ok loading Visual Studio 2003 on the machine I have running Visual Studio 2005 so I can manage both the .net 1.1 and the .net 2.0 applications?               Thanks Danny Hmmm. Not sure if it works in that direction, but I installed VS2005 on a machine that has VS2003 already installed and they se...

Orcas and VS.net 2005 side by side
I haven't installed the latest just yet - - I have questions  With the current framework (3.0), and with the upcoming 3.5 that will be available with future betas of Orcas (I assume), is it possible to have VS.net 2005, (and the latest version of Orcas and the underlying additions to the framework), side by side on the same machine, so I can continue developing my current workload, while at the same time, check out the new stuff? Yes, you can have both running side-by-side. There were some minor problems in this configuration with Beta 1, but Beta 2 will be out in a few weeks, an...

how can i place two div side by side ?
Hi guys , i want following:First DIV : this is at the center of page...it describes what my web site is all aboutSecond DIV : to the right side of first DIV .. I want to place my 2 textboxes for login here.. But i am not able to place them side by side.. since each DIV occupy entire horizontal width of the page..is there any way to limit how much space DIV should occupy??  Please Mark the post as "ANSWER" if it helps you <div style="float:left;width:100px">div1</div><div style="float:left;width:100px">div2</div> you ...

side-by-side problems
I installed .NET 3.5/VS.NET 2008 beta2 side by side with a working VS.NET 2005. In my web applications, I am now getting an error of "ScriptMnager" is not a known element when I open my web applications in VS.NET. I fixed that by adding the following line into my web.config: assembly="System.Web.Extensions" /> Now my web application is generating an error of "'Sys' is undefined" when I bring it up. Anybody got any suggestions for that. WallyMy life with Visual Studio 2008 That is one of the common error message you would get while ...

Side-by-Side Divs
Can anyone help me with how to get this setup? I'm trying to have my lit1-3 on the left, the Img in the center, and Lit 4-6 on the right. So it might look like: lit1                   image                   lit4 lit2                                &nb...

from Visual Studio .NET to Visual studio 2005 (VB)
Good evening, i hame one quistion about diffrenece Visual studio 2005 and older version.In Visual studio .NET to work with table from data base i do next steps:1. Create new connection to data base in data explorer2. Push my table from data explorer to my form, and master automatically create two components (SqlConnection and SqlDataAdapter)3. Add to from new object - Dataset for transering data to client application (i amke a web service) and execute command from menu Data | Generate DataSet, then in Dialog box i Add this dataset to the designerThat's itThe quistion is how to do this st...

Side By Side
Can the mail view be set up side by side instead of over(Subject ...) / under (message)? On 11/13/13 3:44 PM, OldGuy wrote: > Can the mail view be set up side by side instead of over(Subject ...) / > under (message)? Try View > Layout > Vertical View Is that what you want? -- Ken Mac OS X 10.8.5 Firefox 24.0 Thunderbird 17.0.8 LibreOffice 4.1.2.3 OldGuy wrote: > Can the mail view be set up side by side instead of over(Subject ...) / > under (message)? These are the names of the panes in a layout http://kb.mozillazine.org/Window_layout_-_Thunder...

Visual Studio 2005 and Visual Source Safe 2005 Problem
Hello all,I`m stuck with a problem with my Visual Studio 2005 (VS2005) and Visual Source Safe 2005 (VSS2005).Last time I installed my Operational System, I installed both VS2005 and VSS2005. So, i created my project in VSS2005 and when I hit the Open Web Site link in VS 2005, it would show File System, Local IIS, FTP Site, Remote Site and VSS Project. So, I would click in VSS Project and I would be able to open my VSS Project nicely.The problem is that my Windows XP got an error that made me reinstall it. As i had a backup of the project, i reinstalled it without much problem. So, i installe...

Can I have VS.NET 2003 and 2005 side by side on my computer?
Hi,I still have to write some ASP.NET 1.1 code as well as ASP.NET 2.0 code. Can I install VS.NET 2003 on my computer and still keep VS.NET 2005?Thanks,Sam Yes, both can be installed side-by-side. I have both installed side-by-side and have not experienced any issues.Ryan OlshanASPInsider | Microsoft MVP, ASP.NEThttp://ryanolshan.comHow to ask a question...

Can I Have Visual Studio.NET and Visual Studio 2005 together?
Hi everyone. Can I have Visual Studio.NET and Visual Studio 2005 installed in the same machine? I want to install Studio 2005 but I do not want to uninstall Studio.NET yet. Thanks!C# I am running VS 2003 and VS 2005 together with no problems.Martin Lawrence, MCSE, CNE, A+ Recut Technologies Ltd. http://www.recut.com Yes, they can be installed side-by-side. I have it installed side-by-side on my computer and it works perfectly without any conflicts. I even think there is a Version Selector (not something you have to install as it is installed by default) which will make sure your pro...

Web resources about - Two Divs Side by Side problem - asp.net.visual-studio-2005

Problem novel - Wikipedia, the free encyclopedia
Working class, or proletarian novels are often also social problem novels . This was in many ways a reaction to rapid industrialization , and ...

The problem with the RBA's terms-of-trade forecasts
Most commodity markets have proved too reactionary to offer much insight into future price developments.

6 problems with the Moto X Play and how to fix them
... every other smartphone and tablet out there, the Moto X Play is not without its issues. Which is why, we've rounded up some of the common problems ...

Apple is working on an iOS app for troubleshooting device problems
... with knowledge of goings-on at Apple’s Infinite Loop HQ,” the in-development application asks customers “basic questions to boil down the problem” ...

Sleeping in on weekends linked to health problems
... morning snoozes (however glorious they may be). Sleeping late on days-off—and other sleep-time adjustments—are linked to metabolic problems ...

Report claims Samsung Galaxy S7 will fix the biggest problem with the Galaxy S6
... Samsung ditched microSD support on the Galaxy S6. Well according to a new report on Monday, Samsung will fix the bigger of those two problems ...

DeAndre Hopkins Having No Problem with Darrelle Revis, Burns Him for 61-Yard TD - Bleacher Report
Many believed Houston Texans wide receiver DeAndre Hopkins would be stranded on Revis Island this Sunday. He hasn’t been—at all...

This is not just some oddity from Ottawa: Yoga really is a cultural appropriation problem.
Here 's a story from Canada. At the University of Ottawa, the Centre for Students with Disabilities has decided to end its program of free yoga ...

Oil Patch Problems: Rigs Down 60%, Production Down 3%, $40-$50 Price Doesn't Work
... has not hand a monthly close below $40 since mid-2004. And $40 to $50 is not even profitable, putting producers into a bind. Oil Patch Problems ...

E. Coli Isn't Chipotle's Only Problem
Brand perception was way down even before the latest outbreak.

Resources last updated: 11/24/2015 2:19:38 AM