My HTML is as follows:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <style type="text/css">
        * { margins: 0; padding: 0; }
        #content { display: table; }
        #mainContent { display: table-cell; border: solid 1px; }
        #sidebar { display: table-cell; border: solid 1px; }
        #intro h1 { font-size: 3em; }
        #sidebar h1 { font-size: 1em; }
    </style>
</head>
<body>
    <div id="content">
        <div id="mainContent">
            <div id="intro">
                <h1>Welcome</h1>
            </div><!-- end intro -->
            <div class="post">
                <div class="header">
                    <h1>Title</h1>
                    <p>by me</p>
                </div><!-- end header -->
                <p>Text of post</p>
            </div><!-- end post -->
        </div><!-- end mainContent -->
        <div id="sidebar">
            <h1>Links</h1>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
            </ul>
        </div><!-- end sidebar -->
    </div><!-- end content -->
</body>

The issue is that when "Welcome" and "Links" are styled to different font sizes, the smaller of the two is moved down in it's div so that they have a common baseline, giving the impression of extra top padding. I don't understand why this would happen, seeing as the elements are somewhat removed from one another. How can I get them to render independently (i.e. "Links" is at the top of its div)?

I'm working in CSSEdit / Safari 4 if it makes a difference.

Image and video hosting by TinyPic

  • Are you able to post a screenshot? Which doctype declaration are you using? o.k.w over 7 years ago
  • Question updated with more complete code and a screenshot. Hope this helps! Luke Steensen over 7 years ago

2 answers

0
points
This was chosen as the best answer

After browsing the CSS documentation like I should have done in the first place, I found what I needed here (specifically the first illustration under "Table height algorithms").

"Links" aligns as expected with the following edit:

#sidebar {
    display: table-cell;
    vertical-align: top;
}

Hopefully this helps anyone else with a similar issue.

Answered over 7 years ago by Luke Steensen
o.k.w 2355
0
points

I did a test on my Safari (Windows) with these codes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css" >
* { margins: 0; padding: 0; }
#content { display: table; }
#mainContent { display: table-cell; }
#sidebar { display: table-cell}
</style>
</head>
<body>
<div id="content">
    <div id="mainContent">
        <div id="intro">
            <h1>Welcome</h1>
            intro text
        </div>
        <div class="post">
            post
        </div>
    </div>
    <div id="sidebar">
        <h1>Links</h1>
        <ul>
            link items
        </ul>
    </div>
</div>
</body>
</html>

Welcome and Links look the same:

Safari on Windows
If you can't see the image, click here

I suspect you might have parent containers or other CSS definitions that might have caused the problem that you face. Can't offer a definite answer here, just to show that your codes should be fine based on what you have posted. Good Luck!

Answered over 7 years ago by o.k.w
  • I'm sorry I wasn't very clear in my original question. The issue occurs when the two are set to different font sizes. I'll update my question and code to show this better. Luke Steensen over 7 years ago