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                                              lit5

lit3                                              lit6

 here is what I have now

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div style="float:left">
    <div style="height: 100px; width: 100px">
        <asp:Literal ID="lit1" runat="server"></asp:Literal>
    </div>
    <div style="height: 100px; width: 100px">
        <asp:Literal ID="lit2" runat="server"></asp:Literal>
    </div>
    <div style="height: 100px; width: 100px">
        <asp:Literal ID="lit3" runat="server"></asp:Literal>
    </div>
</div>
<div style=" vertical-align:text-top">
    <div>
        <img src="Image/happy.gif" alt="Be Happy" />
    </div>   
</div>   
<div style=" float:right">      
    <div style="height: 100px; width: 100px">
        <asp:Literal ID="lit4" runat="server"></asp:Literal>
    </div>
    <div style="height: 100px; width: 100px">
        <asp:Literal ID="lit5" runat="server"></asp:Literal>
    </div>
    <div style="height: 100px; width: 100px">
        <asp:Literal ID="lit6" runat="server"></asp:Literal>
    </div>
</div>   
</asp:Content>


Thank you

Jackxxx
0
Jackxxx
4/13/2009 3:37:39 PM
asp.net.web-forms 93655 articles. 6 followers. Follow

2 Replies
2159 Views

Similar Articles

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

you have to make these small changes..

<div style="height: 300px;">
<div style="float:left">
    <div style="height: 100px; border:1px solid; width: 100px">
        <asp:Literal ID="lit1" runat="server"></asp:Literal>
    </div>
    <div style="height: 100px; border:1px solid; width: 100px">
        <asp:Literal ID="lit2" runat="server"></asp:Literal>
    </div>
    <div style="height: 100px; border:1px solid; width: 100px">
        <asp:Literal ID="lit3" runat="server"></asp:Literal>
    </div>
</div>
<div style=" vertical-align:text-top; float:left; height:100%;">
    <div>
        <img src="Image/happy.gif" mce_src="Image/happy.gif" alt="Be Happy" />
    </div>   
</div>   
<div>      
    <div style="height: 100px; border:1px solid; width: 100px">
        <asp:Literal ID="lit4" runat="server"></asp:Literal>
    </div>
    <div style="height: 100px; border:1px solid; width: 100px">
        <asp:Literal ID="lit5" runat="server"></asp:Literal>
    </div>
    <div style="height: 100px; border:1px solid; width: 100px">
        <asp:Literal ID="lit6" runat="server"></asp:Literal>
    </div>
</div>
</div>

 I hope this will help you..


Rushik
(please mark as an answer, if this helps you.)
0
rushik
4/13/2009 3:57:56 PM

Hi,

try this:

    <div style="float: left; width: 33%">
        <div style="height: 100px; width: 100px">
            <asp:Literal ID="lit1" runat="server" Text="xxx"></asp:Literal>
        </div>
        <div style="height: 100px; width: 100px">
            <asp:Literal ID="lit2" runat="server" Text="xxx"></asp:Literal>
        </div>
        <div style="height: 100px; width: 100px">
            <asp:Literal ID="lit3" runat="server" Text="xxx"></asp:Literal>
        </div>
    </div>
    <div style="float: left; width: 33%; text-align: center">
        <div>
            <img src="Image/happy.gif" alt="Be Happy" />
        </div>
    </div>
    <div style="width: 33%; text-align: right;float:right;">
        <div style="height: 100px; width: 100px;text-align:right">
            <asp:Literal ID="lit4" runat="server" Text="xxx"></asp:Literal>
        </div>
        <div style="height: 100px; width: 100px">
            <asp:Literal ID="lit5" runat="server" Text="xxx"></asp:Literal>
        </div>
        <div style="height: 100px; width: 100px">
            <asp:Literal ID="lit6" runat="server" Text="xxx"></asp:Literal>
        </div>
    </div>
 Any doubt, post your comment.
Segundo Serrano P.
Ing. Sistemas
http://www.4workgroup.com/
Blog: http://dotnet-peru.blogspot.com
0
Segundo
4/13/2009 4:00:23 PM
Reply:

Similar Artilces:

working on a web form how to have two datagrid side by side
curretly started to work with the web developer express, in the form when I am trying to design a form and trying to have two data controls side by side, the later one move under the first one. But what I am trying to accomplish is that I want both of them side by side  for example  "a|a"   here "a" is next to "a" not underneath.  sure there must be lot of help. : )  always learning little things to be big If I understood what you need the solution is simple HTML: <table>       <TR>      &n...

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...

divs not appearing side by side
 Hi All,I have two divs, both have css float left. but they are not appearing side by side in firefox, in ie it's fine. the first div is larger than the second. but there is no size set on either. Any ideas? Hi aspd, My suggestion would be to stay away from floats due to how the render cross browser. if you use the css display attribute you can handle the same thing like so:  1 #leftDiv 2 { 3 display: -moz-inline-block; 4 display: inline-block; 5 } 6 *:first-child + html #leftDiv 7 { 8 display: inline; 9 } 10 11 #rig...

For interrupting.web form Resized by position of the div : if div can't dispaly all (such as only top part , then web form heithten the heght),resize the web form
Web Form Resized by position of the div : if div can't dispaly all (such as only top part , then web form heithten the heght),resize the web form ! Because of my pool English, if you can't see , I will explain more ! ThanksGambler is the real life I guess you mean when form grows it also grow parent div element. This is normal. If you want div to stay fixed size and rather clip the form and maybe show a scrollbar, look at overflow property in CSS.Thanks------------------------------------------------------------This posting is provided "AS IS" with no warranties, and confers no ...

How to Access/Pass Server Side Array Variable at Another Web Form's Client Side
Hi All,I struck up with some intrested senario at my application development...hope some body will guide me or sends me some code snippets....Thanks in advance.Senario is like this.....in A.aspx (using C# .net 2.0 as code behind) I am going to have a array variable basically it is an TWO Dimensional array after populating the values in array I need to redirect/ reload another web form B.aspx, here i need to access the array in B.aspx client side JavaScript.How can I do this...Thanks AgainRaju Dont do a redirect but use server.transfer. That way the previous page will still hold its value, ...

Side by Side Execution of .net v1.1 and .net v2.0
Hi i am new bie to asp.net 2.0.Till date i have been developing projects using VS.Net 1.1 and now i hv decided to upgrade to new version 2.0.Now i want to run and develop my projects using any of the versions as desired.My question is that can i install vs 2.0 without updating the previous version and will i be able to develop and run my applications in any of the versions as desired.i have been known that we can run these versions side by side(i.e. one application can use 1.1 and other 2.0),but can we do side by side development as well(i.e. one application can use 1.1...

DIV side by side with different height !
Hi, My form layout has 4 DIV One on top full width, one on bottom full width. And in the middle I have 2 side by side. How can I make both DIV be the same height?    Their height is dynamic.  Sometimes the left part will be longer or vice-versa. Thank you for helping.    this link will give you several techniques for achieving fluid column height.------------------------------------------------Jeff Turner (simpleModus)Don't forget to mark the correct answer for yourquestion to help out future visitors! Thank you. That website was very useful for s...

Side by Side Execution of .net v1.1 and .net v2.0 (continued)
Hi, Dave wrote a previous post that said: "If you are referring to web applications - each Virtual server must specify the framework to run under.  Both can run side-by-side.. but not under the same virtual server (application pool)" That looks fine, but I wonder: Is it just as easy as going to Administrative Tools --> IIS --> Select the virtual directory --> go to the property's ASP.NET tab and then selecting the ASP.NET version? Is there some important information that I need to know before going into this? Are there going to be ANY issues I should be aware of? T...

Add side by side controls in div
Hi can some body suggest me how to add server side controls to dive side by side? I'm trying to add control to div dynamically but those are added one by one in a new row. But I want to add those control side by side. Is there any way to do this?   Thanks in advance Nagu try this <div runat=server>    <div style="float:left"> my control1 <div>    <div style="float:left"> my control1 <div> <div>  Raghu(MCSD.NET, MCAD.NET, MCDBA)[Don't forget to click on Mark as answer on the p...

running .net framework side by side
Does anyone know how to run the .net framework side by side on the same box? Didn't you already post this?Have you installed both?  That's really about all it takes.  You have to select the version for the app using the ASP.NET tab, and 1,1 apps don't run in 2.0 and vice versa, but it's not really rocket science.  Where are you having problems?JeffPlease: Don't forget to click "Mark as Answer" on the post that helped you. That way future readers will know which post solved your issue....

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">...

differences between server side asynchronous Web methods and client side asynchronous Web methods
Hi,   can anyone expalin what are the differences between server side asynchronous Web methods  and client side asynchronous Web methods in ASP.Net 2.0 ?   any best articles on serverside asynchronous Web methods  ?   Thanks,  hi, check this url, Server-Side Asynchronous Methods for ASP.NET, http://www.codeproject.com/KB/cpp/asyncws.aspx   Calling the Server-Side method asynchronously from Client Script, http://www.c-sharpcorner.com/UploadFile/dipenlama22/Callbacks07182006093320AM/Callbacks.aspx...

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 ...

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...

Web resources about - Side-by-Side Divs - asp.net.web-forms

Side-by-side assembly - Wikipedia, the free encyclopedia
Side-by-side technology is a standard for executable files in Windows 98 Second Edition , Windows 2000 , and later versions of Windows that attempts ...

Side by Side (with Dropbox support) on the App Store on iTunes
Get Side by Side (with Dropbox support) on the App Store. See screenshots and ratings, and read customer reviews.

Avatar and Pocahontas Side-by-Side - YouTube
This is a side-by-side comparison of Avatar with clips from Disney's Pocahontas. It helps illustrate that Avatar is really just: "Pocahontas ...

In Uganda's Nakivale camp, killers and survivors live side by side
In the heart of central Africa, conflict has become a way of life but counselling for trauma is still in its infancy.

Side by Side of the Simon & Simon intro and parody - YouTube
Since I didn't see this anywhere else I thought I'd upload it, here's the side-by-side of the original Simon & Simon intro and the one done by ...

'Wish I had side-by-side televisions': How to take in debate night
As the first leaders' debate gets underway in Toronto Thursday evening, Canada's political powerhouses face some sure-to-be-good-TV competition ...

Winnipeg man given $113.10 fine for walking with friends side by side - CTV News
A Winnipeg man has been fined $113.10 for walking side-by-side with his friends, because the group was walking “more than two abreast.”

Side by side, fight against terrorism
Side by side, fight against terrorism People's Daily Online Mardan, one of the co-authors of the joint letter told People's Daily on May 2 ...

Side-by-side: How Apple’s new Transit directions compare to those in Google Maps
Yesterday, at WWDC 2015, Apple introduced transit directions to its native Maps application for the first time. It's a feature that has long ...

Side by side images show iPhone’s iterative camera improvement over the years
Camera+’s founder Lisa Bettany has posted (via Gizmodo) photos showing the huge improvement the iPhone’s camera has seen over the years. While ...

Resources last updated: 1/15/2016 5:46:11 AM