Jump to content

» «

HTML/CSS problem

3 replies to this topic
  • Petarkco


  • Members
  • Joined: 22 Jan 2009


Posted 09 September 2013 - 10:22 AM Edited by MLVD, 09 September 2013 - 10:22 AM.

I'm doing a course at the moment which requires me to make a website as part of the HTML/CSS section.

The website specifications asks for a right sidebar.

I've googled how to do it and found this site.

I've typed in the CSS and HTML (excluding the parts that would have made a left sidebar which isn't necessary).


The problem I have is that the main content starts from the middle of the page instead of the left.


This is how it is in CSS:

#container {
width: 960px; margin: 0 auto;
backrgound: #fff;
#header {
height: 170px;
background: REPLACEME.jpg;
#header h1 { text-indent: 0px; }

#content {
overflow: auto;
#content .sidebar {
width: 180px; float: left;
background: #dadada;
#content .sidebar.primary { padding: 0 20px 20px 30px; }
#content .sidebar.primary li {
list-style: none;
font-size: 16px; color: #666; line-height: 24px;

#content #main {
width: 600px; float: left; padding: 0;

#footer {
height: 84px;
background: REPLACEME.JPG;

 Is there anything I've done wrong here?


Let me know if you need more.



  • Barguast

    Thy next foe is...

  • Andolini Mafia Family
  • Joined: 27 Jul 2002


Posted 09 September 2013 - 01:54 PM

Try saving your HTML and CSS on a site like JSFiddle and posting the link here - it'll be much easier for others to see what is the matter and to post a fix that way.

  • Forty

    he shouts stroke darker the strings

  • The Precinct
  • Joined: 01 Sep 2002
  • None


Posted 09 September 2013 - 07:59 PM

Which element is the one aligning in the middle? It's possible that the #content element is floating next to the #container element, since that property will try to lay things aside each other if there's room.


    Mark Chump

  • Members
  • Joined: 17 Aug 2008


Posted 13 September 2013 - 07:47 AM

One thing I noticed is that you have told your CSS file to send the .sidebar class to the left, but you said it should go right. Perhaps, because the #main class is farther down the code, the main body is getting pushed to the second-most position to the left.

1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users