SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS div alignment in same line

    Hello,

    I have a problem with my css:
    Code:
    .buy{
    
            position: relative;
    
            display: inline-block;
    
            text-align:center;
    
    	border : 2px solid #c3d0e1;
    
    	margin : 10px 5px 10px 5px;
    
    	padding : 30px 15px 30px;
    
    	width : 100px;
    
    	height : 80px;
    
    }
    And html:
    Code:
    <div class='buy'>
    		<h3>$title</h3>
    		<b>$price</b><br>
    			<a href='#'>
     			   <button type='submit' class='blue'><span>$button</span></button>
    		   </a>
    	</div>"
    The problem is, if number of lines within box don't match, alignment is broken. See here 2 samples:
    http://shrani.si/f/35/7v/2T6bYDIT/sc...m-2012-11-.png
    http://shrani.si/f/2v/hE/1yAERWYj/sc...m-2012-11-.png

    Please advise,

    Thanks

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    How do you want things to align? Would you be content if the subscribe button were a little higher due to fewer lines above? If so, you could try display: table-cell instead, or just try adding vertical-align: top;

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want things to align like this.
    http://shrani.si/f/35/7v/2T6bYDIT/sc...m-2012-11-.png

    Solution 1: vertical-align: top;
    This makes buy button be higher, and it doesn't look nice where as other buttons are aligned.

    Solution 2: table-cell display
    That is everything I don't want this thing to be. Plus button still unaligned.

    I am trying to do something without proper knowledge or understanding of css so please bear with me.

    EDIT: I think adding a <br> to compensate for missing line is not going to work, since same browser in windows or linux/mac show same text in different amount of lines.

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there any way to separate button from text and have good alignments than?

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,583
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Try this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?923837-CSS-div-alignment-in-same-line&p=5245610
    Thread: CSS div alignment in same line
    2012.11.22 20:27
    jan1024188
    -->
    <head>
        <title>template</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    body {
        text-align:center;
    }
    
    .buybox {
        border:2px solid #c3d0e1;
        display:inline-block;
        width:130px;
        height:130px;
        position:relative;
        text-align:center;
        vertical-align:middle;
        padding:20px 0px 0px;
        margin:20px 8px 0px;
    }
    h3,h4 {
        font-size:1em;
        margin:0px;
    }
    h4 {
        background-color:#fcc;
        width:120px;
        text-align:center;
        position:absolute;
        bottom:50px;
        left:0;
        right:0;
        margin:auto;
    }
    button {
        width:80px;
        position:absolute;
        bottom:10px;
        left:0;
        right:0;
        margin:auto;
    }
    
        </style>
    </head>
    <body>
    <div>
        <div class='buybox'>
            <h3>$title line</h3>
            <h4>$price</h4>
            <button type='submit' class='blue'><span>$button</span></button>
        </div>
        <div class='buybox'>
            <h3>$title line<br>or two</h3>
            <h4>$price</h4>
            <button type='submit' class='blue'><span>$button</span></button>
        </div>
        <div class='buybox'>
            <h3>$title line<br>or two<br>or three</h3>
            <h4>$price</h4>
            <button type='submit' class='blue'><span>$button</span></button>
        </div>
    </div>
    <div>
        <div class='buybox'>
            <h3>$title line<br>or two</h3>
            <h4>$price</h4>
            <button type='submit' class='blue'><span>$button</span></button>
        </div>
        <div class='buybox'>
            <h3>$title line<br>or two<br>or three</h3>
            <h4>$price</h4>
            <button type='submit' class='blue'><span>$button</span></button>
        </div>
    </div>
    
    </body>
    </html>


Bookmarks

Posting Permissions

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