CSS div alignment in same line

HTML & CSS
1

Hello,

I have a problem with my css:


.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:

<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/screenshot-from-2012-11-.png
http://shrani.si/f/2v/hE/1yAERWYj/screenshot-from-2012-11-.png

Please advise,

Thanks

2

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

I want things to align like this.
http://shrani.si/f/35/7v/2T6bYDIT/screenshot-from-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

Is there any way to separate button from text and have good alignments than?

5

Try this:


<!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>