How to keep text within size of section

HTML & CSS
1

so this is what i have :worried:

Screen Shot 2015-03-04 at 10.53.48.png339×640 81.1 KB

Everything looks perfect up until the third post. Extra padding is added. How do i prevent this. it seems if a heading is more than a certain length than it add extra padding . How do i prevent that

Here is my css relevant to that section of the code:

section{
        padding: 0.3em 0.3em 3.7em 0.3em;
        border: 1px solid lightGray;

    }
    section ul{
        list-style-type: none;
    }
section li a{
        text-decoration: none;
        color: black;     
    }
    section figure{
        /*border: 1px solid red;*/
        float: left;
        padding-right: 0.3em;
    }

My HTML:

<div class="clear"></div>
<?php foreach ($posts as $post): ?>
    <section>
        <ul>
            <li>
                <figure>
                    <img src="<?=URL?>img/demo-image.png" height="100" width="100" alt="">
                </figure>
                <a href="<?php if (isset($post->id)) echo htmlspecialchars($post->id, ENT_QUOTES, 'UTF-8'); ?>">
                    <h3><?php if (isset($post->title)) echo htmlspecialchars($post->title, ENT_QUOTES, 'UTF-8'); ?></h3>
                </a>
                <small>
                    posted: <?php if (isset($post->_date)) echo htmlspecialchars($post->_date, ENT_QUOTES, 'UTF-8'); ?>
                </small>
            </li>
        </ul>
    </section>
<?php endforeach ?>
2

Hi wayne. The code you posted doesn’t really demonstrate the issue, so preferably post a link to a working demo (even if it’s on CodePen or similar). :slight_smile:

3

Can somebody recommend a good tutorial that might explain how to keep a div/section size fixed as to not allow any new padding?

4

I don’t htink it’s extra padding - the 3rd title header wraps to two lines and increases the height.

As Ralph said, it’d help us out if you give us a codepen or website.

5

That’s simple:

.section ul li { height: 100px; overflow:hidden; }

And also, i don’t understand why do you create new <ul> in the loop for each post
You can just create <li>'s in that loop:

<section>
    <ul>
        <?php foreach ($posts as $post): ?>
            <li>
                <!-- post content -->
            </li>
        <?php endforeach ?>
    </ul>
</section>
6

[quote=“megazoid, post:5, topic:114467”]
That’s simple:

.section ul li { height: 100px; overflow:hidden; }
[/quote]I assume megazoid knows this but just for the OP, you never want fixed heights on any of your content section. It’s just asking for trouble.

7

Thanks man

your solution worked perfect :stuck_out_tongue:

8

I wouldn’t recommend sticking with that CSS solution he gave. If you give us a codepen or website where this is at, we can give you a better solution.

9

Thanks for the input Ryan

The basic concept megaziod showed worked for me, although i immediately made the height fluid

10

If you are fine with the bandaid fix, then by all means keep it :blush: .

11

Yup so the floats weren’t c ontained.

http://codepen.io/ryanreese09/pen/zxLRzR

Adding in the clearfix to the section tag will fix the issue - although then you have a big space under all the section tags…which I then fixed by removing your 3.4(think that was the number)em bottom padding on the section{} element.

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.