Skip navigation
alexisonsmith3
alexisonsmith3
Currently Being Moderated

Unable to center my right hand side boxes

Jun 22, 2012 12:52 PM

Tags: #error #adobe #cs5.5 #dreamweaver

Hi I am unable to centre my blog boxes in the middle of the right hand side column on my website, Can anyone help me with this ,

 

Thanks

 

Alex

 

www.newcityexplorer.com

682 Views   7 Replies   Latest reply: alexisonsmith3, Jun 24, 2012 4:39 AM
 
Replies
  • Ben Pleysier
    Currently Being Moderated
    1. Ben Pleysier,
    Jun 23, 2012 4:56 AM   in reply to alexisonsmith3
    Report

    Please explain, do you want a fluid layout or a fixed layout. The reason I ask is that you are using a mixture of techniques at the moment.

     

    The main object is to get a proper construction for your document as per

     

    The total width of the above can be automatic, depending on the witdh of the viewing window (this is harder to achieve) or a fixed width which is usually set at 980px or thereabouts.

     

    The way we achieve an overall wdith is to place the above elements (DIV's) within a wrapper. I use the body element as the wrapper, but you have got a DIV called wrapper as your wrapper which is OK. At the moment, your sidebar is not within the wrapper element. Also, you must adjust the widths of the article and sidebar so that they and any margins do fit within the width of the overall wrapper.

     

    Gramps

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    2. Ben Pleysier,
    Jun 23, 2012 7:00 AM   in reply to Ben Pleysier
    Report

    To give you an idea of a layout, copy and paste the following into a new document and view in your favourite browser.

     

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
    padding: 0;
    margin: 0;
}
html {
    background: rgb(173,217,228); /* Old browsers */
}
body {
    width: 980px;
    margin: auto;
}
h1 {
    font-size: 2.3em;
    text-align: center;
    margin: 0.5em;
}
.header {
    background: url(http://www.newcityexplorer.com/Pictures/Logo_2.png) no-repeat 20px 10px;
    height: 100px;
}
.nav {
    border-radius:12px;
    border: solid 1px silver;
    height: 35px;
    background: #696;
}
.aside {
    border-radius:12px;
    border: solid 1px silver;
    height: 200px;
    width: 32%;
    float: right;
    background: #CCC;
}
.article {
    border-radius:12px;
    border: solid 1px silver;
    height: 200px;
    width: 65%;
    float: left;
    background: #FFF;
}
.footer {
    border-radius:12px;
    border: solid 1px silver;
    height: 50px;
    margin-top: 200px;
    background: #696;
}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
</style>
</head>

<body>
<div class="header"></div>
<div class="nav"></div>
<h1>Where will you fly next?</h1>
<div class="aside"></div>
<div class="article"></div>
<br class="clearfix">
<div class="footer"></div>
</body>
</html>

     

    Gramps

     
    |
    Mark as:
  • alexisonsmith3
    Currently Being Moderated
    3. alexisonsmith3,
    Jun 23, 2012 10:15 AM   in reply to Ben Pleysier
    Report

    ok so do I have to include two different wrappers? I would like a fixed layout so similar to what you show above however I would like the right hand column to stretch the full length of the page

     

    Regards,

     

    Alex

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    4. Nancy O.,
    Jun 23, 2012 11:17 AM   in reply to alexisonsmith3
    Report

    See Equal Height CSS Columns ~

    http://alt-web.com/Articles/Equal-Height-CSS-Columns.shtml

     

     

    Nancy O.

     
    |
    Mark as:
  • alexisonsmith3
    Currently Being Moderated
    5. alexisonsmith3,
    Jun 23, 2012 2:39 PM   in reply to Nancy O.
    Report

    ok I have made some changes but it seems like I am still having issues with the width of one of the boxes laying over the exterior of the container

     

    Alex

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    6. Ben Pleysier,
    Jun 23, 2012 7:17 PM   in reply to alexisonsmith3
    Report

    Have a look here http://pleysier.com.au/alex/

     

    Gramps

     
    |
    Mark as:
  • alexisonsmith3
    Currently Being Moderated
    7. alexisonsmith3,
    Jun 24, 2012 4:39 AM   in reply to Ben Pleysier
    Report

    Thank you so much for that. I will go through everything which you have done now to try and understand the layout. The only question I have is that the boxes do not seem to have a solid line around and they seem to cut on the right hand side. Is there a reason for that?

     

    Thanks again

     

    Alex

     
    |
    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