Columns don't match?

HTML & CSS
1

I am having problems trying to get column 2 to match the size of column 1. Here is the link to the page that I am having problems with: http://healingcamilleblog.com/test-run/. The columns that I am talking about are the part at the bottom that is in green.

2

Your layout has some serious problems that would be better addressed first, before worrying about a detail like that. What’s the actual layout you are shooting for? The page is badly broken on my laptop in Chrome. (The whole layout is way off to the right.)

1 Like
3

Here is an image of the way the coming soon page should be: http://www.healingcamilleblog.com/test-run/my-blog-layout.jpg.

4

Hi,

You have your wrapper at 35% width but your content at a fixed width of 800px so that is never going to work. You need to set the wrapper to 800px also and not 35%. (These days you should really be making fluid/responsive sites anyway and not fixed width.)

The green columns can be fixed by simply adding the background to the parent of the columns and not each column.

e.g.

#wrapper{
width:800px;
margin:40px auto;
padding:20px;
background:#fff;
}

#subscribeWrapper{
background: #a0d568;
}
2 Likes
5

Thank you everyone for your help. Could anyone please tell me if there is anything else wrong with my code?

6

Run the page through the HTML validator, which will show you the answer to that.

Most of the errors seem to be caused by using an HTML4 Strict doctype mixed with HTML5 and XHTML style tags. If you need help with fixing any of them, just ask.

1 Like
7

Thank you for the tip. I have run my page through the HTML validator and have corrected some of the many errors. I am having problems understanding how to correct the 5 that are left. Could you please tell me how I can correct remaining ones?

8

The first two are one.

The example reason and fix seem worth a try.

using XHTML-style self-closing tags (such as <meta … />) in HTML 4.01 or earlier. To fix, remove the extra slash (‘/’) character.

9

After you fix the error Mittenague pointed out above then the remaining error for html4 strict is that inputs cannot be direct descendants of a form element.

You either need to wrap all the inputs within a div:

<form action="subscribe.php">
          <div>
            <input name="email" type="text" id="emailtxt" value="Please enter your email address">
            <input type="submit" value="Sign Up" id="submitbtn">
          </div>
        </form>

Or perhaps more semantically use a fieldset and legend:

  <form action="subscribe.php">
          <fieldset>
          <legend>Subscribe</legend>
            <input name="email" type="text" id="emailtxt" value="Please enter your email address">
            <input type="submit" value="Sign Up" id="submitbtn">
          </fieldset>
        </form>

You can then hide the legend text offscreen with css and remove the borders from the fieldset.

10

Thank you everyone for your help. I have corrected all the errors and now it says that my page is successfully checked as HTML 4.01 Strict.

1 Like
11

The link to your stylesheet should usually be the last one in the lineup so you can override anything above it, if necessary.

Although there are no errors on the page, there are 4 warnings that would be easy to fix.

As @PaulOB mentioned, nowadays the emphasis is on responsive web design so you can include everyone from mobile users to desktop users on your site. Your intro page could serve as a training ground for some RWD practice :slight_smile:

12

Thanks for your input.

As the errors have been fixed, I can’t seem to see the 4 warnings that you mentioned in your reply. Could you please tell me about them or how I can fix them?

13

I have removed subscribe form, as I have decided that I didn’t want to deal with the spam that could come through it.

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.