Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

CSS formatting question.

  • 24-06-2008 7:46pm
    #1
    Registered Users, Registered Users 2 Posts: 32


    Hello all,

    I'm trying to sort out a website for a friend and I'm having trouble getting the div's to line up properly on the screen.

    Basically, I'd like to keep everything 800px (this is the ideal width or is it slightly larger?) wide and centered on the screen, so it appears more or less the same on visitor's browsers.

    At the moment the site is dependent on screen resolution so things aren't lining up unless viewed with the designer's (i.e. my own) resolution.

    Any clues? Thanks in advance.


Comments

  • Closed Accounts Posts: 3,762 ✭✭✭turgon


    I dont think I understand. You could use

    width: 800px;


  • Registered Users, Registered Users 2 Posts: 8,488 ✭✭✭Goodshape


    <div id="pageWrap">
    YOUR STUFF GOES HERE
    </div>


    #pageWrap {
    width : 800px;
    margin : auto;
    }



    you mean that?


  • Registered Users, Registered Users 2 Posts: 32 cinneide


    for some reason, when I start specifying widths like that, all my sidebar get completely rearranged.

    the site is a basic blog setup. I've attached a jpeg of how the div's should be ideally laid out. Each box represents a different div. The red box around the four central divs represent an encapsulating, content div... I hope it makes my query clearer.


  • Registered Users, Registered Users 2 Posts: 8,488 ✭✭✭Goodshape


    Rearranged how?

    If you're surrounding block is set to 800px, just make sure that your sum of the four blocks inside + margin + padding does not exceed 800px.

    The four inner blocks really shouldn't have any margin or padding at all as this leads to cross-browser issues. Put the required margin and padding on the elements inside them instead.


  • Registered Users, Registered Users 2 Posts: 28 conordarcy


    Something like this?

    CSS:
    #wrapper{
    width:800px;
    margin:0 auto;
    }

    #header{
    width:800px;
    }

    .panel{
    width:200px;
    float:left;
    }

    #footer{
    width:800px;
    }

    HTML:
    <html>
    <body>
    <div id="wrapper">
    <div id="header"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div id="footer"></div>
    </div>
    </body>
    </html>

    innovativeoptions.ie


  • Advertisement
  • Registered Users, Registered Users 2 Posts: 32 cinneide


    My margin and padding values needed to be adjusted to ensure that they added up to the entire width. Site looks A1 now...


  • Closed Accounts Posts: 1,879 ✭✭✭heggie


    i think 940/960 is a more appropriate width nowadays.


  • Registered Users, Registered Users 2 Posts: 35,524 ✭✭✭✭Gordon


    heggie wrote: »
    i think 940/960 is a more appropriate width nowadays.
    I wonder when this post will be dredged up in the future and someone will laugh at the oldness of technology and tiny screens back in 2008 :)


  • Registered Users, Registered Users 2 Posts: 6,571 ✭✭✭daymobrew


    heggie wrote: »
    i think 940/960 is a more appropriate width nowadays.
    Yahoo UI libraries use 950px and 974px for 1024x768 screens.


  • Closed Accounts Posts: 18,163 ✭✭✭✭Liam Byrne


    cinneide wrote: »
    My margin and padding values needed to be adjusted to ensure that they added up to the entire width. Site looks A1 now...

    Two points:

    1) Watch the box model in the different browsers; in some, a width of 100 and a padding of 10 gives a total width of 100 with content width of 80, while in others the total width becomes 120

    In case that doesn't explain things properly, think of it this way. If you asked a carpenter to make you a shelving unit that was 3ft wide, using 2-inch wood for the two sides, should a 3ft fishtank fit "in" there (between the sides - total width of shelving 3ft, 4 inches) or should the whole bookcase fit in a 3ft alcove in your room ?

    The different browsers are like 2 different carpenters who interpret it different ways, with the obvious different results if you don't specify it exactly right in a way they understand.

    2) If you're floating a div and have a margin on it, there's a bug in IE6 that will double the margin; to prevent this, use "display:inline"

    Liam


  • Advertisement
Advertisement