Fronm left align to Centered

HTML & CSS
1

Hi all:
I have a current website which is used alot by the skating members and I would like to slightly change the layout from its current ‘Left align’ to a site that would be centered … possibly with the center column being flexible?

I tried by my own but failed miserably. Keep in mind that I’m not a site designer and that I do this as a volunteer so please be gentle. Next phase will be to redo the whole thing and make it mobile friendly. But, in the meantime, this small tweak will make it a little fresher.

Here is the site http://www.patinageartistiquebourassa.com/
Here is the css http://www.patinageartistiquebourassa.com/stylepatin.css

Thank you!

2

Hi Sindhi,

You could pretty much get what you want by removing the styles in red and adding those in blue. But it might be better just to wait until the site is redesigned. Anyhow, if you try the changes below, keep a copy of the original CSS in case there are problems. :slight_smile:


#outer {
position: relative;
min-height: 100%;
[COLOR="#FF0000"]margin-top: -55px;
margin-left: 210px;[/COLOR]
[COLOR="#0000CD"]width: 900px;	
margin: 0 auto;[/COLOR]
border-left: 1px solid rgb(204, 204, 204);
z-index: 1;
}


#header {
border-top: 55px solid white;
[COLOR="#FF0000"]margin-left: -211px;	[/COLOR]
position: relative;
min-height: 0;
z-index: 999;
padding: 5px 0 0;
background: white;
color: rgb(51, 102, 153);
}

#sidebar {
float: left;
width: 200px;
position: relative;
[COLOR="#FF0000"]margin-left: -199px;	[/COLOR]
left: -11px;
}


#content {
[COLOR="#FF0000"]float: right;
width: 100%;[/COLOR]
margin: 0 0 0 -1px;
position: relative;
z-index: 1;
padding-top: 20px;
}
3

This is NOT what i would do, but since this is a “patch” design anyway. This would be a simple to understand fix, in case what Ralph suggested doesn’t take.

  1. BACK UP THE SITE ( is always a good idea)
  2. add .center{width: (the width of your site)px; margin:0 auto; position:relative;}
    The footer area already seems to be centered, so we wont worry about it.
  3. Wrap the H1 and P tag in a div with class=‘center’, give the UL inside <div id=“top-nav”> class=“center”, and wrap everything from <div id='sidebar> to <!-- InstanceEndEditable –>
    <div class=“clearer”></div> in a div with class=‘center’

my review of you site was quite cursory, but that should do it that should do it. Hope it helps.

4

This example is centered and has a flexible width center column. Change the widths of the left and right sidebars to whatever you like to fit within the wrapper and the width of the center column automatically adjusts to fill the gap between the left and right sidebars.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css">
            #wrapper {
                width: 900px;
                margin: 20px auto 20px auto;
                border: 1px solid red;
            }
            #sidebarLeft {
                width: 40%;
                float: left;
            }
            #sidebarRight {
                width: 20%;
                float: right;
            }
            #centerColumn {
                overflow: hidden;
                padding: 10px 10px 10px 10px;
                border: 1px solid blue;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="sidebarLeft">
                <h1>This is the left sidebar</h1>
            </div>
            <div id="sidebarRight">
                <h1>This is the right sidebar</h1>
            </div>
            <div id="centerColumn">
                Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel. 
                Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce 
                pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut, 
                ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id, 
                aliquam non, taciti donec ut. Risus integer hymenaeos velit, nisl suspendisse sollicitudin ut, sed tempor sagittis curae dolor, 
                volutpat massa ut sagittis. Voluptatem a enim, lobortis lectus volutpat, vitae vero diam purus morbi class, tristique donec 
                ante sed, ac turpis dis dui vestibulum aut.
            </div>
        </div>
    </body>
</html>
5

Hi,
Create main whole stucture parent div
#main-parent-wrapper{
width:980px;
height:auto;
margin:0px auto;
}

Thanks