The title and screenshot should just about explain it all. I'm trying to get the bottom group of 'Latest' boxes to align properly (as I have in my rough layout here), but for some reason it's all screwed up. I DID have it looking okay before I added the bold header text, so it looks like the text itself may be the culprit.

HTML:

<!doctype html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>
    <div id="header">
    </div>

    <div id="wrapper">
        <div id="main">
            <div id="ad">
            </div>

            <div id="latest">
            </div>

            <div id="other">
                <div id="reviews">
                    <div class="other-title">
                        Latest Reviews
                    </div>
                    <div class="other-body">
                    </div>
                </div>

                <div id="articles">
                    <div class="other-title">
                        Latest Articles
                    </div>
                    <div class="other-body">
                    </div>
                </div>

                <div id="news">
                    <div class="other-title">
                        Latest News
                    </div>
                    <div class="other-body">
                    </div>
                </div>
            </div>
        </div>

        <div id="footer">
        </div>
    </div>
</body>

CSS:

 body { background-color: #29b950; padding: 0; margin: 0; font-family: verdana, arial, helvetica, sans-serif; }
#header { height: 9.875em; background: url('handiheaderrepeat.gif') repeat-x; }
#wrapper { width: 60em; margin: 0 auto; background-color: #fff; }
#main { width: 52.5em; margin: 0 auto; }
#ad { height: 4.063em; margin-bottom: 0.938em; }
#latest { height: 18.438em; margin-bottom: 1.25em; }
#other { height: 20.313em; margin-bottom: 0.625em; }
#other div { width: 17.5em; height: 20.313em; float: left; background-color: #e2e1e1; position: relative; }
.other-body { height: 17.813em; background-color: #fff; top: 1.5em; }
.other-title { text-align: center; font-weight: bold; color: #255683; }
#footer { height: 8.438em; background-color: #255683; }

I'm not sure if I need to play with .other-body's margin, or some text settings. Or even if I have to clear the footer. Any help would be greatly appreciated.

Thanks.

1 answer

1
point
This was chosen as the best answer

Interesting issue. It is strange how it worked out, but I think I got to the bottom of the problem. When you put the "#other div" style, it affects not just the #review, #articles, and #news divs, it also affects the .other-title and .other-body div elements as well. So, to fix it, try changing the following two styles:

Change the height of the #other div style:

#other div {
  height: 17.313em;
}

And add a height attribute to the .other-title style:

.other-title {
  height: auto !important;
}

You need the !important because it is a class style and would otherwise be superseded by the id style "#other div."

Answered almost 6 years ago by Abinadi Ayerdis
  • I'd avoid the use of !important in this scenario and use #other .other-title danwellman almost 6 years ago
  • That did the trick. Thanks! KevinM1 almost 6 years ago