0

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;
}
2
Contributors
1
Reply
2
Views
7 Years
Discussion Span
Last Post by ablitz
-1

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;)

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.