Skip navigation
RathiusBGWS
RathiusBGWS Calculating status...
Currently Being Moderated

How to center wireframe layout in browser window

Aug 29, 2012 3:50 AM

Tags: #web #layout #center #proto

HELP!!

 

I've created a set of wireframes for a website in Proto but when I bring them up in a browser window the layout is always left aligned and I cannot figure out how to get the layout to center in the browser window.

 

I've used margin: 0 auto; on the container div but it does no good, the layout stays left aligned. I'm about to pull my hair out on this one.

 

The URL is http://www.bluegrasswebservices.com/kpp/index.html

 

Thanks for your help

 

Gary

2709 Views   8 Replies   Latest reply: RathiusBGWS, Sep 18, 2012 7:27 AM
 
Replies
  • Takashi Morifusa
    87 posts
    Nov 12, 2008
    Currently Being Moderated
    1. Takashi Morifusa,
    Aug 29, 2012 10:07 AM   in reply to RathiusBGWS
    Report

    Can you update Proto v1.5 and try it again?

     
    |
    Mark as:
  • RathiusBGWS
    Currently Being Moderated
    2. RathiusBGWS,
    Aug 29, 2012 3:09 PM   in reply to Takashi Morifusa
    Report

    I have version 1.5. That's what I used to create the wireframes.

     

    Gary L. Glasscock,

    President,

    Bluegrass Web Services, LLC

    www.BluegrassWebServices.com

     

    Sent from my iPad

     
    |
    Mark as:
  • rymill2
    Currently Being Moderated
    3. rymill2,
    Aug 30, 2012 8:19 AM   in reply to RathiusBGWS
    Report

    I had the same issue and decided to make the change myself. All you have to do is add a wrapper div, match it to the width of your file and center it via CSS. It would def be much more convenient to have this as an option, but alas your solution is below....

     

     

    HTML

     

    <div id="wrapper">

     

    Your page content

     

    </div>

     

     

    CSS

     

    #wrapper{

        width: (width of your content);

        position: relative;

        margin: 0 auto;

    }

     
    |
    Mark as:
  • RathiusBGWS
    Currently Being Moderated
    4. RathiusBGWS,
    Aug 30, 2012 9:50 AM   in reply to rymill2
    Report

    Thanks! I'll give this a shot.

     

    One other thing. What about all the other HTML elements that use position:absolute;, do I need to change all of those to position:relative; as well?

     

    Gary L. Glasscock,

    President,

    Bluegrass Web Services, LLC

    www.BluegrassWebServices.com

     

    Sent from my iPad

     
    |
    Mark as:
  • rymill2
    Currently Being Moderated
    5. rymill2,
    Aug 30, 2012 12:11 PM   in reply to RathiusBGWS
    Report

    You won't have to as long as you place all of your content within the wrapper div. Just be sure to exclude the body tags and any head elements and you should be fine.

     
    |
    Mark as:
  • RathiusBGWS
    Currently Being Moderated
    6. RathiusBGWS,
    Aug 31, 2012 4:11 AM   in reply to rymill2
    Report

    Yep, that took care of it. Thanks rymill2, and I agree, it would be nice if there was an option in Proto to take care of this before-hand.

     

    Thanks again!

     
    |
    Mark as:
  • mattpearce_design
    Currently Being Moderated
    7. mattpearce_design,
    Sep 18, 2012 7:11 AM   in reply to RathiusBGWS
    Report

    Totally agree with RathiusBGWS...adding the wrapper in Proto up front would be nice, apart from that this app is awesome ticks all the boxes as far as i'm concerned when it comes to rapid prototyping.

     

    Would also be nice to be able to customize the width of your prototype larger than 960px.

     

    thanks

     
    |
    Mark as:
  • RathiusBGWS
    Currently Being Moderated
    8. RathiusBGWS,
    Sep 18, 2012 7:27 AM   in reply to mattpearce_design
    Report

    Yes, adjusting the width beyond 960px would be nice, as well as custom naming of the div ids.

     

    Gary L. Glasscock,

    President,

    Bluegrass Web Services, LLC

    www.BluegrassWebServices.com

    +1 (270) 469-1445

    info@bluegrasswebservices.com

     
    |
    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