Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Vertical autoalignment of divs

    Hi guys,
    I'm almost embarrassed to ask this but I did forget over the years how to deal my current problem.
    It's quite simple. I have a Wordpress page using my custom theme which basically puts the posts with thumbnails on the front page. These posts consist of a picture with a title underneath it. If the title is only one line long, it's all cool and they all line up properly, three in each row. But if the title is two lines long, that one div with the thumbnail & long title becomes too tall and pushes out the div below it (see attachment). As it is set now, the divs are all lined up to the left using the float:left css attribute. My desire is to make sure that the taller div doesn't push the one below it away, as seen in the second attached picture.

    Is there any way to do this?

    Vertical autoalignment of divs-state01.jpgVertical autoalignment of divs-state02.jpg

  • #2
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    To give a better idea, here's the link to my site: Eastwood Carshow | Auta auta a zase auta

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,721
    Thanks
    0
    Thanked 240 Times in 235 Posts
    Hi there SangHee,

    here is a basic example for you to play with...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>little boxes all in a row</title>
    
    <style>
    body {
        background-color:#e3e3e3;
        font-family:arial,helvetica,sans-serif;
        font-size:100%;
     }
    #container {
        width:90%;
        padding:10px 0;
        margin:auto;
        border-radius:10px;
        background-color:#fff;
        box-shadow:inset 0 0 1px #000,8px 8px 8px #999;
     }
    .box {
        float:left;
        width:31%;
        padding:1px 0.5%;
        margin:0 1%;
        border-radius:10px;
        background-color:#fee;
        box-shadow:inset 0 0 1px #000;
        font-size:80%;
        color:#666;
     }
    .margin {
        margin:0;
     }
    .clear {
        clear:left;
        overflow:hidden;
        padding-top:10px;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div class="box">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet.
    </p><p>
    Phasellus porta, dui a elementum egestas, odio sapien rhoncus 
    lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus 
    ac quam pellentesque lacinia quis sit amet augue. Fusce eu 
    euismod urna.
    </p>
    </div>
    
    <div class="box margin">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet.
    </p>
    </div>
    
    <div class="box">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. 
    </p>
    </div>
    
    <div class="clear">
    <div class="box">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet.
    </p>
    </div>
    
    <div class="box margin">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet.
    </p><p>
    Phasellus porta, dui a elementum egestas, odio sapien rhoncus 
    lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus 
    ac quam pellentesque lacinia quis sit amet augue. Fusce eu 
    euismod urna.
    </p>
    </div>
    
    <div class="box">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet.
    </p>
    </div>
    </div><!-- end .clear -->
    
    <div class="clear">
    <div class="box">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet.
    </p>
    </div>
    
    <div class="box margin">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet.
    </p>
    </div>
    
    <div class="box">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet.
    </p>
    </div>
    </div><!-- end .clear -->
    
    </div><!-- end #container -->
    
    </body>
    </html>

    coothead
    Last edited by coothead; 06-15-2014 at 09:41 PM. Reason: tpynig eorrr

  • #4
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey coothead,
    thanks for the example. I can see that in the example the code works because it wraps each row of divs in another (clear) div that gives that row a definite bottom. However, in Wordpress, which uses php, the divs are generated by a php while command, which means it will just spit out 12 divs in a row without me having any control over each row, it just lines the divs up inside the container div and there they are.
    I solved the problem by setting a fixed height for the divs that hold the individual containers, which made them all of the same height and allowed them to line up again. I means that the single line posts are a bit spacious at the bottom but this was the only solution I was able to come up with.

    Cheers


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •