Skip navigation
Marzoog
Marzoog
Currently Being Moderated

How could I align all divs at once in dreamweaver?

Mar 15, 2013 4:18 PM

Tags: #design #div #dreamweaver #layout #cs6 #grid #fluid #responsive

Hi,

 

How could I align all divs at once in dreamweaver? I have more than 50 divs, and I want to change the alignments for them all at once, let we say "center" how could I do that especially I'm using the fluid grids layout.

 

Thanks.

828 Views   12 Replies   Latest reply: RoseCityMktg, Apr 3, 2013 10:00 AM
 
Replies
  • TimSPQR
    Currently Being Moderated
    1. TimSPQR,
    Mar 15, 2013 8:08 PM   in reply to Marzoog
    Report

    Well, I'm doing something like this now, so I'll take a shot at it, and then we can wait for expert comments.

     

    <head>

    <style>

     

    .manydivs {

        background-color:black;

        margin-top:10px;

        margin-left:auto;

        margin-right:auto;

        margin-bottom:10px;

        border:1px solid black;}

     

    </style>

    </head>

     

    <body>

    <div class="manydivs">Yoyoyo</div>

    <div class="manydivs">Yoyoyo</div>

    <div class="manydivs">Yoyoyo</div>

    <div class="manydivs">Yoyoyo</div>

    <div class="manydivs">Yoyoyo</div>

    </body>

     

    Just by changing the style section, all of them will change.

    You can assign other sub-behaviors with other methods.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    3,729 posts
    Oct 15, 2010
    Currently Being Moderated
    2. Sudarshan Thiagarajan,
    Mar 15, 2013 9:30 PM   in reply to Marzoog
    Report

    Do you have a class assigned to these 50 divs at the moment? If you do, you can add a selector to align all these individually. If they're independent of each other, you could put them within a container and propagate to all child divs using pseudo-classes in CSS.

     

    We'd be able to advice better if we're able to see your page. Can you share the URL with us?

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    3. Nancy O.,
    Mar 16, 2013 12:19 PM   in reply to Marzoog
    Report

    /**applied to all divs inside .gridContainer**/

    .gridContainer >div { /**your style rules go here**/ }

     

    By default, the .gridContainer is centered in FluidGrid Layouts.  If it's not, you did something to  break it.  For better answers, we would need to see a link to your page.

     

     

    Nancy O.

     
    |
    Mark as:
  • RoseCityMktg
    Currently Being Moderated
    4. RoseCityMktg,
    Mar 28, 2013 2:57 PM   in reply to Nancy O.
    Report

    If we broke something in our fluidgrid layout how do we fix it so that the gridcontainer is centered on the screen.  I have a 27" monitor and everything is left justified.  I just want to center the container not the divs in the container.

     

    Thanks in advance for your help.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    5. Nancy O.,
    Mar 28, 2013 3:05 PM   in reply to RoseCityMktg
    Report

    For better answers, we need a URL to your test page.  Please upload everything to a TEST folder on your remote server or some other public web space you control.

     

    Nancy O.

     
    |
    Mark as:
  • RoseCityMktg
    Currently Being Moderated
    6. RoseCityMktg,
    Mar 28, 2013 3:16 PM   in reply to Nancy O.
    Report

    I am building a template for the rest of the site and it is not too far along so please dont judge quality yet.

     

    http://classiclooksskincare.com/working_page.html

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    7. Nancy O.,
    Mar 28, 2013 3:28 PM   in reply to RoseCityMktg
    Report

    Add these styles shown in green to your basic.css file and you'll see that your page is, in fact centered.

     

    body {background: maroon}

     

    .gridContainer {

      background: white;

        margin-left: auto;

        margin-right: auto;

        width: 87.9666%;

        padding-left: 1.5166%;

        padding-right: 1.5166%;

    }

     

    I think the problem is that you don't have enough floated divisions to fill-up your desktop display.

     

     

    Nancy O.

     
    |
    Mark as:
  • RoseCityMktg
    Currently Being Moderated
    8. RoseCityMktg,
    Mar 28, 2013 3:59 PM   in reply to Nancy O.
    Report

    Wow!  You are right.  I am seeing a problem with rendering in Safari, it renders correctly in firefox but not safari.  In Safari the right side of the "white background" goes out MUCH farther than firefox.

     

    Any thoughts on how to fix this?

     

    Thank you so much for your help you are awesome!

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    9. Nancy O.,
    Mar 28, 2013 4:03 PM   in reply to Nancy O.
    Report

    One more thing to add to your Basic.css.  This will put a dotted border around every div inside your .gridContainer so you can see what's happening with your layout.

     

    .gridContainer >div {

    border:1px dotted green;

    box-sizing: border-box;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    }

     

    I often develop my pages with borders until I'm ready to publish the site.

     

    Hope this helps you, too.

     

    Nancy O.

     
    |
    Mark as:
  • Marzoog
    Currently Being Moderated
    10. Marzoog,
    Apr 3, 2013 12:35 AM   in reply to Marzoog
    Report

    Actullly I did it manually <div align="center"> for each div..!

    You may check my work at ebbda.com

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    3,729 posts
    Oct 15, 2010
    Currently Being Moderated
    11. Sudarshan Thiagarajan,
    Apr 3, 2013 1:41 AM   in reply to Marzoog
    Report

    align tag in DIV is a deprecated tag. I'd strongly recommend against using that.

     

    You could use a container to put all your other DIV tags within it. Style that container DIV to whatever you want so any other div that resides within container will adapt automatically.

     
    |
    Mark as:
  • RoseCityMktg
    Currently Being Moderated
    12. RoseCityMktg,
    Apr 3, 2013 10:00 AM   in reply to Sudarshan Thiagarajan
    Report

    @ Marzoog I tried that previously but it did not work.

     

    @Sudarshan I am using fluid grid layouts which do not allow for nested divs so that does not work for me.

     

    I had to define a maximum width and that solved my issue. 

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points