Can you share your code, and what you'd like to see happen?
My guess is you're using floats in the standard box model and have padding and/or borders on your floated elements.
When you use floats in the standard box model, you need to make room for padding and border, those are added to the width setting. So if your widths were 50%, they'd actually be 50% + padding + border, so when added together, they're over 100% and will drop below each other.
I searched the code and did not find floats, padding or borders added to the divs I created. I placed 3 divs inside an article div: (1) a left aside column, (2) a content column, and (3) a right aside. It all looks fine on 1694 x 998 screen but when I slid to the next smaller screen size to where only the left aside and the middle content divs no longer appear side by side by side. At that point, the middle column (content) drops to a new level. When I try to create a media query with reduced the widths to 16 and 80 percent respectively, they stay right where they are, i.e., on two separate levels.
Guess I need to find a good book, tutorial, or document to teach me how to to handle media queries.
There are many reasons to see what you're seeing, but without seeing the code you're using, all we can do is guess.
Could you post a link to your page in progress?
Happy to have you look at the code but there's lots of it. I am not sure which you need - the html for the left aside and content, and also the css? The website is not online.
The absolute best way to find out where your code has gone off from where you expected it to be, would be to see it in its entirety, in our browsers.
Any chance you could upload to a test folder on your server and supply a link?
Once the problem is found, you just delete the test folder and all of its contents.
Just saw your reply. Thanks Jon. I will try to get it set up tomorrow and get back when ready for you to take a look at the code.
Jon, I made some changes so that I don't have to struggle with that particular problem for the moment.
But I was finally able to load the page. You can find it at " gregpagebooks.com "
Now I am faced with a new issue. I added links to the Ezine, Facebook, LinkedIn and Twitter icons. They don't always work. And although I selected" _blank" as the target for each, when they do not open a new tab when they go to the site. I wonder if you could take a look and let me know how to get the links to work properly. Thanks for your kind attention.
The first thing you should do is run the validator under File > Validate > Validate Current Document (W3C) to clean up your html errors. Code errors are one of the biggest causes of display problems and functionality issues.
If the problem persists after cleaning up your code, post back and we can take a closer look.
Thanks. This is what came back: "108"No element in scope but a p end tag seen." Below that: "117 Bad value image/Graphic Palette Logo Small.gif for attribute src on element img : illegal character in path segment: space is not allowed. [html5]"
But these errors are not showing on the web page. Not sure what to do. Have to leave for an appointment now but will check this thread as soon as I return.
The bad value errors are because you're using spaces in your image names. Use underscores or hyphens instead (change it in your Files window within DW and the program will update the links for you). Also stay away from special characters ($%^&*) and stick with lowercase alpha-numerics. On a server, INDEX.html is a separate file from index.html. On your local OS, a link to either will go to the same file so staying with all lowercase greatly reduces the chance that you'll accidentally link to an incorrect case structure and have your user's browser throw a 404 File Not Found error.
Don't forget the semi-colon at the end of your non-breaking space codes. They should all look like (without spaces) & nbsp ;
Line 108 "No element in scope means you have a stray ending </p> that should either be deleted or have a missing opening <p> at some point before it.
Thanks again! I made the corrections you recommended but am left with a few confusing issues. Renaming the images worked fine but now when I validate, I get the message that both my "article" and "section" divs are missing a heading. It suggests identifying them using h2-h6 headings. I don't know what that means.
Second, when I try to address the "No element in scope" issue by either adding a <p> or by deleting the </p>, in either case, I create a new "red" error message in the properties panel. The messages claim I am missing a </p> to complement the <p> I just added, or that I need to remove a <p> to complement the </p> I just removed. Either I accept the validate error to eliminate the properties error, or eliminate the properties error and keep the validate error. I can't seem to get rid of the error messages. It's all a bit confusing
Any more ideas would be greatly appreciated.
In html, you have several "heading" tags you can use that impart a certain amount of importance by search engine algorithms: <h1> through <h6> with 1 being the most important (only 1 per page) and 6 being the least (while still more important than a simple <p> tag).
What that error is saying is that, under html5 best practices, there should be a heading within your <section> and <article> tags, so something like...
The new <p> error likely means you are "splitting" your paragraph tags with something that can't be placed between them, like another element's ending tag when that element's starting tag is outside the <p> set. You can't have something like this...
<p>Some info here
You have to close the <p> set before you can close its parent element...
<p>Some info here</p>
Your stray ending tag likely belongs somewhere higher up in the html, you may have to do some searching in your new code to verify everything is closed properly.
Jon, I am impressed! Your observations and comments have been a huge help. I have removed all errors except for two. Both are yellow warnings that my article and section are missing headings. My guess is that I can live without if I do not want any text to appear. I only used them for layout purposes to contain other divs.
So far, everything seems to be working the way I wanted thanks to you!