Help me with CSS codes! :(

[melvintwj]

Hey there, I up editing a set of CSS code for my blog. Everything went well except for a little hiccup with my side bar. So what I want to achieve is to move the side bar to the complete left of the page so I can make more space for my content, but right now it floats to the left though with some extra space remaining to the left.

/* BASIC LAYOUT */
#contain, #footer-container {
margin: 0 auto;
width: 55em;
}


/* SIDEBAR */
#sidebar {
float: left;
margin: 0em;
width: 16em;
}

#sidebar p {
font-size: .9em;
}

#sidebar h1 {
font-weight: normal;
font-size: 2em;
line-height: 1.5em;
margin: 0;
padding: 0;
}

#sidebar h1 a, #sidebar h1 a:visited, #sidebar h1 a:active {
color: {color:Links};
font-weight: normal;
text-decoration: none;
}

#sidebar h1 a:hover {
color: {color:Link Hover};
}

#sidebar h1 a {
display: block;
}

#sidebar h4 {
font-size: 1em;
font-weight: bold;
margin: 0 0 .25em;
padding: 0;
text-transform: uppercase;
}

#sidebar #about {
margin: 0 0 3em;
}

#sidebar #twitter_div ul,
#sidebar #other ul {
list-style: none;
margin: 0 0 3em;
padding: 0;
}

#sidebar #twitter_update_list a {
display: block;
}

#sidebar #other a, #sidebar #other a:visited, #sidebar #other a:active {
font-size: .9em;
line-height: 2em;
padding-left: 0.75em;
}

Those are the codes for my side bar. Anything wrong with them? Or does the issue lie somewhere else completely? Please help me if you could!

 

[davidktw]

Hey there, I up editing a set of CSS code for my blog. Everything went well except for a little hiccup with my side bar. So what I want to achieve is to move the side bar to the complete left of the page so I can make more space for my content, but right now it floats to the left though with some extra space remaining to the left.



Those are the codes for my side bar. Anything wrong with them? Or does the issue lie somewhere else completely? Please help me if you could!

Show the URL of your blog to better understand your layout issue

 

[melvintwj]

Show the URL of your blog to better understand your layout issue

Thanks for the reply. I have a blog running to test my codes. Testing. Hope you could take a look

If you go to the page, you can see a lot of space on the left, I want to shift the sidebar more to the left to balance it out. I have no idea how to approach it though..

 

[davidktw]

Thanks for the reply. I have a blog running to test my codes. Testing. Hope you could take a look

If you go to the page, you can see a lot of space on the left, I want to shift the sidebar more to the left to balance it out. I have no idea how to approach it though..

Remove "margin: 0 auto" under the css section for
#contain, #footer-container, or you can change it to "margin: 0 5%"

Learn how to use developer tools found in webkit browsers like Safari and Google Chrome, Firefox and also firebug to help identify css issues quickly and easily.

Below is a screenshot in Safari on how I easily identify which css govern which portion of your web elements and how to test out immediately.

 

[melvintwj]

Remove "margin: 0 auto" under the css section for
#contain, #footer-container, or you can change it to "margin: 0 5%"

Learn how to use developer tools found in webkit browsers like Safari and Google Chrome, Firefox and also firebug to help identify css issues quickly and easily.

Below is a screenshot in Safari on how I easily identify which css govern which portion of your web elements and how to test out immediately.

Ahhh.. Very nice! Thanks for your help and advice

 

[melvintwj]

Remove "margin: 0 auto" under the css section for
#contain, #footer-container, or you can change it to "margin: 0 5%"

Learn how to use developer tools found in webkit browsers like Safari and Google Chrome, Firefox and also firebug to help identify css issues quickly and easily.

Below is a screenshot in Safari on how I easily identify which css govern which portion of your web elements and how to test out immediately.

May I know what is this kit that you're using on Safari?

 

[davidktw]

May I know what is this kit that you're using on Safari?

It's not any special kit, it's the Developer Tool inside Safari for Mac. Go to Preferences, under Advanced tab, check the "Show Develop menu in menu bar" box. Then you will find a "Show Web Inspector" item under the Develop menu at the top.

You will find both Google Chrome and Firefox also have their own developer tools

In fact under Firefox, you can add the Firebug extension which gives a slightly different set of functionality from Firefox own breed of developer tools.

All these tools are great help to perform realtime debugging, and proof of concept, layout and functional break down of web sites and more. Be proficient in them is necessity to be good in web development.