One text block bigger than the other

HTML & CSS
1

Hi thanks for viewing,

I have two headers, both have same class and are h2. “<h2 class=“blog-header”> Events </h2>”

they are in different columns and have set margin and padding on these columns to 0. one header is droppng down further than the other because the text is creating a bigger block than the other. I can see in Firebug that the margins and padding are equal and that the blue box (for content area) is 28px on one and 19 on the other.

Same font, same class… why would one text block be bigger than the other?

Any suggestion gratefully received.

Frank

2

Hi frankeane, welcome to SitePoint!

Without seeing your html and css, we can really only guess at the exact cause. If you post a link or some code we’ll see what ti is in a jiff. :slight_smile:

3

It depends what other styles are cascading through into each side. If everything was the same then there should be no difference.

You may have set line-heights differently for the columns content, or font-sizes in ems will be taking their size from their new parents etc. It could be collapsing margins from elements underneath causing more margin on the one above.

It could be a number of things but we’d need to see the whole structure to guess.:slight_smile:

Do you have a link or a test case we can view?

4

Hi, thanks for reply, hope not too much code for you!


@charset "UTF-8";
/* CSS Document */
<style type="text/css">

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100&#37;;
    vertical-align: baseline;
    background: transparent;
    text-shadow:0 1px 0 rgba(255, 255, 255, 0.6);
}

:focus {
    outline: 0;
}

ol, ul {
    list-style: none;
}

#header{

}
body{
    background-color: #bbbfc2;
    
}

/* ---------- Headers Tags --------*/


h1, h2, h3 a{
    font-family: Georgia, Baskerville, "Palatino Linotype", Times, Times New Roman, Serif;    
    font-weight: 400;
    
}

h1{
    font-size: 1.5em;
    font-style: normal;
}

h2 a{
    line-height: 1em;
    font-style: normal;
    font-weight: normal;
    font-size: 1.5em;    
    text-decoration: none;
    color: #730c02;
}

h3 a{

    font: italic 1.5em #730c02;
}

h2 a:hover{
    color:#206c78;
}

h3 a:hover{
    color:#843503;
}


/* //////////End of Headers Tags///////////////*/

#wrapper{    
    font-family: verdana, arial, sans-serif;
    font-size: 12px;
    background-image:url("images/logo.png");
    background-repeat: no-repeat;
    max-width:100em;
    margin: 0 auto;    
    position: relative;
    overflow: hidden;
    padding-left: 99px;
    background-color: #ffffff;
    
}

#container{
    width: 73em;
    margin: 0 auto;
    background-image:url("images/michaelryan.png");
    background-repeat: no-repeat;
    color: #777777;
    
}
/*-----Header----------*/

#header{
    background-image:url("images/arm-stretch.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    width: 73em;
    height: 43em;
}

#header-text{
    width: 28em;
    margin-top: 150px;
    float: left;
    padding:0 1em 1em 0;
}

#header-text img{
    float: left;
    margin: 0 1em 1em 0;
    border: 1px solid #bbbfc2;
}

/*-----Navigation------*/
#nav-container{
    text-align: right;
}

#navlist
{
padding: 0 1px 1px;
margin:0;
color: #bbbfc2;
font-size: 1.3em;
font-family:  "Trebuchet MS" sans-serif;
}

#navlist li
{
list-style: none;
margin-left: 1.5em;
display: inline;
}

#navlist li a
{
color:#bbbfc2;
text-decoration:none;
}

#navlist li a:link { color: #bbbfc2; }


#navlist li a:hover
{
color: #777777;

}


/* ////////// End of Navigation //////////////*/


/* ---------- content ------------------*/

#content{
    text-align: left;
    color: #777777;
    width: 40em;
    margin: 0 1em 1em 0;
    line-height: 1.5em;
    float: left;
    margin-bottom: 2em;
}

#content a{
    color: #730c02;
}

.blog-header{
    font-family: Baskerville, "Palatino Linotype", Times, Times New Roman, Serif;
    font-style: italic;
    font-weight: 100;
    font-size: 2em;
    color: #bbbfc2;
    padding-bottom: .5em;
    border-bottom: 1px solid #f37405;
    margin: 1em 0;
}
#content h1{
    color: #730c02;
}

.postmetadata{
    border-bottom: 1px dotted #2d2d29;
    padding-bottom: 1.5em;
}


.comments{
 margin-top: 0;
 margin-bottom: 5px;
 padding-left: 10px;
 padding-right: 10px;
 height: 46px;
 line-height: 350%;
 font-size: 98%;
 font-weight: normal;
 color: #333;
 border: 1px solid #C5BBA0;
}


/*--------------end of content --------------*/


/*--------------sidebar----------------------*/

#sidebar{
    float: right;
    color: #777777;
    margin-left: -43.25em;
    width: 23em;
    margin: 0;
    padding: 0;
}

#sidebar h3{
    font-style: italic;
    font: italic 1.5em #730c02;
}



/*--------------end of sidebar---------------*/






#footer{
    clear: both;
}

element{
}

</style>


    <div id="sidebar">
            <h2 class="blog-header">Events</h2>
            <ul>
                <li><h3><a href="#"> Weekend Breaks<span>&raquo</span></a></h3><p>
                    Need a break? Me Too! Check out our up-coming yoga breaks.
                </p></li>
                    
                <li><h3><a href="#"> Workshops <span>&raquo</span></a></h3><p>
                    Take a day to immerse yourself in your practice.
                </p></li>
                
                
                <li><h3><a href="#"> Classes<span>&raquo</span></a></h3><p>
                    Regular, on-going classes in Dublin and Wicklow. Find the right one for you.
                </p></li>
            </ul>            

        
        <div class="blog-header"><!-testimonials->
            Testimonials
        </div>
        
        <div class="blog-panel"><!-testimonials>


            <?php sfstst_onerandom(); ?>
        
                </div><! content-panel for second sidebar>
        
        
        <div class="blog-headers">
            Blog Stuff
        </div>
        
        <div class="content-panel">
        <div class="buffer">
                        
        <ul role="navigation">

            <li><h2>Recent Posts & Comments</h2>
                <ul>
                <?php wp_get_archives('type=monthly'); ?>
                </ul>
            </li>

            <?php wp_list_categories('show_count=1&title_li=<h2>Posts on Previous Events</h2>'); ?>
        </ul>
            
        
        </div><!buffer for third sidebar>
        </div><! content-panel for third sidebar>
    </div><!sidebar-container>





<?php get_header(); ?>


<!************************content>    

<div id="content">
    <h2 class="blog-header">News &amp; Views</h2>
        
            <?php if (have_posts()) : ?>

        <?php while (have_posts()) : the_post(); ?>

            <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
                <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php                     the_title(); ?></a></h2>
                
                <div class="entry">
                    <?php the_content('Read the rest...'); ?>
                </div>
            <div id="pagecomments">
                <?php comments_template(); ?>
            </div>


                <p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php 
            edit_post_link('Edit', '', ' | '); ?><?php comments_popup_link('0 Comments', '1 Comment &#187;', '% Comments &#187;');?></p>
            </div>
            
        

        <?php endwhile; ?>

        <div class="navigation">
            <div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
            <div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
        </div>
    <?php endif; ?>                
    </div> <!--content-->    

    
<!**************************sidebar>



    <?php get_sidebar(); ?>







<div id="footer">


</div><!footer>

</div><!container>
</div><!wrapper>
</body>
</html>
5

Thanks a mil! Yep line height is set on content div. haven’t corrected yet but imagine thats it. missed that! thank you both for your replies.

6

Yes that looks the likely culprit. :slight_smile:


#content {
    text-align: left;
    color: #777777;
    width: 40em;
[B]    line-height: 1.5em;[/B]
    float: left;
    margin-bottom: 2em;
}
7

Yep! Well spotted, thank you Paul.

bit of a code newbie, how does the code look to you? is it bloated, could be more streamline…?

many thanks

8

I did notice some strange formatting but wondered if that was just your copy and pasting in here.

e.g. you seem to have comments marked up incorrectly.


<!container>

Should be:


<!-- container -->

I also wondered about this:


#sidebar {
    float: right;
    color: #777777;
    [B]margin-left: -43.25em;[/B]
    width: 23em;
    margin: 0;
    padding: 0;
}

Why are you dragging that leftwards instead of just floating it left. At small screens sizes everything slides off to the left and can’t be reached. Of course I’m only seeing a snapshot so there may be more going on that I can see.

I’m not sure if applying text shadow to everything is a good idea either :slight_smile:

You also have the @charset just outside of the style element but I guess that was a copy and paste error from the external stylesheet where it belongs anyway as it shouldn’t be in an embedded stylesheet :slight_smile:

9

Thanks Paul. yeah I think the -43em was to make sidebar rise to same level as main col. matching the width of the main col. I will try it with float left see what happens, thanks. Wasn’t even aware i had the charset in the style cheers!

have a good weekend.

Frank