Frustrated with Dreamweaver CSS Designer...

Hmmm so one big difference I've seen between the about-us and product pages: Your right side bar on the product page is currently nested inside the 'a' tag of the final product in your list. For whatever reason, there's also a redundant closing div tag.

I think you'll find more success by debugging your html before focussing on your css :-)

I think Dreamweaver should show lines with errors on in red - but only in the current file. If you're using includes, you have to go over with a fine-tooth comb to make sure you haven't left any divs open between the files. For example, if you open a div in the header and forget to close it in the footer, this error won't show in Dreamweaver but it's likely to upset your css ;)

Tom

Looks much closer to how you want it!

I realize it's annoying me mentioning this again because it's not a fix to your solution (rather a totally different option!), but using simple percentage widths will sort your problem - plus you can insert any content you want without having to worry about sentence length. I should probably mention that I don't like floats because I never get them right :p

It it was me, I would do a very simple:

.main,
.rightsidebar {
  box-sizing: border-box;
  moz-box-siding: border-box;
  //maybe set an option min-height also
}

.main {
  width: 80%;
}
.rightsidebar {
  width: 20%;
}

Here is the treehouse badge which best describes what I'm trying to suggest http://teamtreehouse.com/library/css-layout-techniques/grid-layout/understanding-grids

And if you haven't checked them out already, here are the videos for floats and layout techniques http://teamtreehouse.com/library/css-foundations/the-box-model/floats-2 http://teamtreehouse.com/library/css-layout-techniques

I'm all out of ideas but best of luck! I hope you find a fix :-)

Hi Donna,

Remember that you only have a 100% max width across the page. 80% + 20% = 100% Great! But you also have some pixel margin applied to the content and rightside divs which is taking your overall width above 100%. I removed the margin by playing in the console (right click > inspect element) and the page layout displayed correctly.

The first two badges in this course

http://teamtreehouse.com/library/build-a-responsive-website

will help you out loads with this one!

I'm looking at your about-us page right now -

There's some pixel margin being applied to the .main class on line 61 in syles-main.css.

When I remove that margin, the rightsidebar moves up :-)

Hmm, so there's always going to be differences between browsers (bluurgghhh!), which is one of the arts to dealing with css. Percentage widths on there own are universal across all browsers so it sounds like there's something else causing the issue.

If you're on chrome, I would suggest using the developer tools to find out what's going wrong. You can edit your css live (although it won't be saved so you have to remember what you've done!). You can also view the box model on a particular container to see if there's anything wrong with it.

You should be able to get to the developer tools by right clicking on the page and going to something like 'inspect element' or 'console'.

I think this might help you out: http://teamtreehouse.com/library/website-optimization

specifically this video: http://teamtreehouse.com/library/technology-foundations/chrome-devtools-basics/the-elements-panel

It speeds up debugging loads!

Watch out on your 'products' page - This a tag:

<a href="drapery.php"><br><br><br><img src="products/product-drapery.jpg" alt=""/>

doesn't have a closing...

</a>

...tag ;)

No worries, just keep playing with the percentages and see how it goes :-) The css deepdive is pretty extensive and can take quite a while to go through but it's totally worth it!

Also, I think you mentioned that you were working on swapping out your table based design for a more up to date method - Using the grid layout with div containers acting as rows and columns is totally scalable - You can translate your tables in your footer and sidebar into this layout style.

There are a number of ready made grid systems in existence, Bootstrap being amongst the most popular. You can see the grid system they operate here: http://getbootstrap.com/css/#grid. It's always good to work this stuff out without using a ready-made answer because you gain so much more understanding. In the future though - if it's already created, you might as well use it :-)

Yeah sure! I was just giving you some examples of grid systems 'in the wild'.

Be aware of any automated features Dreamweaver has to offer.. to the point where you're probably better off avoiding them altogether! If you want great code, hands on is the best way.

If you were to start a site using something like bootstrap, it's very quick and easy, but you might want to be a little more confident with your css and html before dipping you toe in.

If you are interested in converting, it's super simple. The basic premise: Download the css files, include them in your php header, then add the necessary classes to your html tags. Job done!

There are lots of frameworks - here is one just for grid systems. I just googled "basic css grid framework" and this came top, I'm sure there's many more!

http://thisisdallas.github.io/Simple-Grid/

If you are working with a framework, make sure it's one of the first css files you include.

Not trying to overload but it will give you ideas/speed in creating your project!