Body content layout issues

Question

Elehas 0 Newbie Poster

14 Years Ago

Hey,

I'm having some huge issues with the layout of my main body area. The attachment shows how it's suppose to look.

I've recently switched from table-based layouts to css positioning and this is why i'm struggling. I need help with the floats and clears lol.

this is my css for the elements. #content is the container.

#content {
  position: absolute;
  top: 223px;
  left: 214px;
  width: 541px;
  height: 524px;
}

/* Main Body Content */

.content-article {
  color: #4d4d4d;
  font-size: 10pt;
  width: 348px;
  max-height: 210px;
  /*overflow: hidden;*/
  padding-left: 17px;
  padding-bottom: 10px; 
}

.content-info-container {
  background-color: #fde3c0;
  width: 190px;
  height: 280px;
  padding: 10px;
}

.content-info {
  display: block;
  background-color: #faac55;
  color: #ffffff;
  font-size: 14pt;
  width: 170px;
  height: 70px;
}

.featured-home-container {
  width: 348px;
  height: 314px;
  background-color: #cccccc;
}

.featured-home-img {
  background-color: #999999;
  position: absolute;
  top: 215px;
  left: 17px;
  width: 314px;
  height: 180px;
  /*background-image: url(); */
}

.featured-description {
  font-size: 10pt;
  color: #4d4d4d;
}

web-design

This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with pdf files.

gordons_website.pdf (935.39 KB)

2 Contributors
1 Reply
126 Views
7 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by ablitz

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ablitz -5 Light Poster · Answer 1 · 2010-01-19T21:45:40+00:00

Hey,

I'm having some huge issues with the layout of my main body area. The attachment shows how it's suppose to look.

I've recently switched from table-based layouts to css positioning and this is why i'm struggling. I need help with the floats and clears lol.

this is my css for the elements. #content is the container.

#content {
  position: absolute;
  top: 223px;
  left: 214px;
  width: 541px;
  height: 524px;
}

/* Main Body Content */

.content-article {
  color: #4d4d4d;
  font-size: 10pt;
  width: 348px;
  max-height: 210px;
  /*overflow: hidden;*/
  padding-left: 17px;
  padding-bottom: 10px; 
}

.content-info-container {
  background-color: #fde3c0;
  width: 190px;
  height: 280px;
  padding: 10px;
}

.content-info {
  display: block;
  background-color: #faac55;
  color: #ffffff;
  font-size: 14pt;
  width: 170px;
  height: 70px;
}

.featured-home-container {
  width: 348px;
  height: 314px;
  background-color: #cccccc;
}

.featured-home-img {
  background-color: #999999;
  position: absolute;
  top: 215px;
  left: 17px;
  width: 314px;
  height: 180px;
  /*background-image: url(); */
}

.featured-description {
  font-size: 10pt;
  color: #4d4d4d;
}

Hey i can do it for you for a $50;)