[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

div all in upper left corner

Posted on 2011-10-19
9
Medium Priority
?
394 Views
Last Modified: 2012-05-12
How do I get my divs to align next to each other insted of all bunching up in the corner?

See diagram.


 div
0
Comment
Question by:Tom Knowlton
9 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 36995676
Can you post your code or a live URL?
Generally you would just use float:left on each of those divs and give the parent(containing) div a width.
0
 
LVL 9

Expert Comment

by:TonyReba
ID: 36995829
Use a main div and place the rest of the divs inside of it
<div id="main">

   <div id="subdiv1"/>
    <div id="subdiv2"/>
   <div id="subdiv3"/>
   
</div>


0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 36995837
Try:

http://test.huskyshoponline.com/WebFormJQuery.aspx

Pick something from the drop down list (like "a" or "b" )

The "wait animation" should play with a spinning arrow thing and text.

The arrow is on top of the text.  I want it to be over to the left.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 30

Expert Comment

by:LZ1
ID: 36995882
And you want it on the same line as the text? Add     float: left;   width: 32px; to your <embed> tag.
<object width="32" align="middle" height="32" id="flashthrobber" codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
                    <param value="sameDomain" name="allowScriptAccess">
                    <param value="false" name="allowFullScreen">
                    <param value="flashthrobber.swf" name="movie">
                    <param value="high" name="quality">
                    <param value="#ffffff" name="bgcolor">
                    <param value="transparent" name="wmode">
                    <embed width="32" align="left" height="32" pluginspage="https://www.adobe.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" allowfullscreen="false" allowscriptaccess="sameDomain" name="flashthrobber" bgcolor="#ffffff" quality="high" src="flashthrobber.swf" style="width:32px;float:left">
                </object>

Open in new window

0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 36995968
(to stop the animation, just reload the page)

I am using jQuery to show / hide the wait message:

$(document).ready(function ()
{
    $('#waitwrap').removeClass().addClass("waitwrapperhide");
    $('#waitanimation').removeClass().addClass("waitanimhide");

    $('option').click(function ()
    {
        $('#waitanimationtext').text("Changing Password - Please wait...");
        $('#waitwrap').removeClass().addClass("waitwrappershow");
        $('#waitanimation').removeClass().addClass("waitanimshow");
    });
});

Open in new window




The "wait animation" is an html control that looks like this:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WaitMessage.ascx.cs" Inherits="Campus_Webstore.WaitMessage" %>
<div id="waitwrap" class="waitwrapper" runat="server">
    <div id="waitanimation" class="waitanim">
     <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0"
                    width="32" height="32" id="flashthrobber" align="middle">
                    <param name="allowScriptAccess" value="sameDomain" />
                    <param name="allowFullScreen" value="false" />
                    <param name="movie" value="flashthrobber.swf" />
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#ffffff" />
                    <param name="wmode" value="transparent" />
                    <embed src="flashthrobber.swf" quality="high" bgcolor="#ffffff"
                        width="32" height="32" name="flashthrobber" align="left" allowscriptaccess="sameDomain"
                        allowfullscreen="false" wmode="transparent" type="application/x-shockwave-flash" pluginspage="https://www.adobe.com/go/getflashplayer" />
                </object>
    </div>
    <div id="waitanimationtext" class="waitanimtext">A
    </div>
</div>

Open in new window

0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 36995987
The <object></object> portion is INSIDE of a div with id="waitanimation" with class="waitanim".

According to my CSS....it should be floating left:

.waitwrapperhide
{
    position:relative;
    float:left;
    width: 500px;     
    display:none;  
    clear:both;
}


.waitwrappershow
{
    position:relative;
    float:left;
    width: 500px; 
    display:block;  
}




.waitanimhide
{
    position:relative;
    float:left;
    width: 32px; 
    display:none;
}

.waitanimshow
{
    position:relative;
    float:left;
    width: 32px; 
    display:block;
}





.waitanimtext
{
    position:relative;
    float:left;   
    width: 200px;  
}






.searchboxareastyle
{
    position:relative;
    float:left;    
}

.sboxstyle
{
    position:relative;
    float:left;
}


.wmdivstyle
{
    position:relative;
    float:left;
    margin-left:100px;
}

Open in new window

0
 
LVL 4

Expert Comment

by:wilson1000
ID: 36998293
Can you post your CSS pls?

The only time these elements will sit on top of eachother is when they have been removed from the document workflow.

For instance; using the property 'position' with the value 'absolute' or 'fixed' on an element (div etc.) will remove that element from the document workflow and align to the top left of page. This allows them to appear 'on top' of other elements in the page.

Thank you
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 36999682
UconnColors.css (line 2451)

* {
    height: 29px;
    margin: 0;
    padding: 0;
    width: 251px;
}

the width is set for ALL elements. It seems to over-ride any local width styles I've tried to set on the animation div or object. Weird. But if you take it out of the style sheet, everything lines up as required. Of course you'll have to set other widths for other elements individually.
0
 
LVL 5

Author Closing Comment

by:Tom Knowlton
ID: 37008048
thx
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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
Course of the Month18 days, 9 hours left to enroll

825 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