• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 219
  • Last Modified:

General CSS Question

Check out this site:
http://www3.murfreesborotn.gov/css/

I know how to correct that issue using tables, but I've been using tables far too long.  How do I achieve the same result using css?  
0
thedeal56
Asked:
thedeal56
  • 2
  • 2
1 Solution
 
jonahzonaCommented:
You need to create additional divisions and place them where you want them.

Basically, you end up using a lot of math. It is relatively simple.

First I would create a div that holds everything that is the height and width you would need it to be. This can be done through an attached CSS file, CSS in the head element or CSS inline.

For quickness I will do it in the head, though it is best practice to have an attached style sheet.

Also, you need to understand the difference between IDs and CLASSES before we move forward. An ID only appears once on a page. It is unique. A CLASS can appear multiple times and is more general.

An ID is signified with a # sign, while a class is signified with a .

So first, I would make a div that will be unique.

#holder {
  width: auto;
  height: 130px;
  float: left;
}

Open in new window


This is a div that is 142px tall, floats to the left of the containing area (which is body) and will automatically grow as content is added. You can also make this static by giving it a specific px width.

In order to get our stuff to align correctly we need to create another division inside of the #holder division to help keep the two typographic images on the same side. We will give it an ID of #left.

#left {
  width: 285px;
  height: 100%;
  float: left;
}

Open in new window

This is telling it that we want it exactly 285px wide, it can stretch as it grows, and it should be against the left side of the containing element, which is now #holder.

Then we create a class for the typographic image, we will call it .murf.
.murf {
  width: 285px;
  height: 43px;
  float: left;
  margin-top: 6px;
}

Open in new window


This class has a width of 285px, a height of 43px, is floating left and has a margin on the top of 6px. Keep in mind that MARGINS is space OUTSIDE the element. PADDING is space INSIDE the element.

Then we add one more ID for the building. This will go OUTSIDE the #left division, but inside the #holder.

#building {
  width: 142px;
  height: 130px;
  float: left;
  margin-left: 5px;
}

Open in new window

As you can see the height and width are the same as the image, it is floating left and has a margin on the left hand side to give it a little space.

Then the trick is putting all the code together in the HTML. Here is what I came up with. If you save this file in the same directory of the images you used it will work great. I added some inline styling on one of the .murf divisions to fix the margin above it.

Also, PLEASE DOWNLOAD FIREBUG for Firefox. This is a GREAT inspector tool for looking at pages HTML and CSS to learn how the elements work together.
 css.html

Let me know if you have any questions.
0
 
thedeal56Author Commented:
Wow, that's cool that you went to that much trouble to help me understand it.  I will look at this as soon as I can.  Thank you very much.
0
 
jonahzonaCommented:
My pleasure. Again, let me know if you have any other questions.
0
 
thedeal56Author Commented:
that makes total sense.  Thank you!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now