Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

One inline Div shifted lower than rest

Tags:

html

css

One Div lower than others

<div class='noshop-products-div'><div class='noshop-products' align='center'> 

<!-- -------------------- NoShop Item: The Dream Giver Library / The Dream Giver -------------------- --> 
<div class='noshop-product '> 
    <div class=noshop-product-imagebox  width=83 style="width:83px;" > 
        <a href="http://jesper.angelo.net/wordpress/noshop/" /><img class=noshop-product-image  width=83 style="width:83px;"  src="./wp-content/themes/mingle-theme/parallelus-mingle/assets/images/skins/skin-7/bw/products/dreamgiver/dreamgiver.png" /></a> 
    </div> 
    <div class=noshop-product-textbox> 
        <a href="http://jesper.angelo.net/wordpress/noshop/" /><div class=noshop-product-title>The Dream Giver</div></a> 
        <div class=noshop-product-desc> 
            &nbsp;
        </div> 
        <div class=noshop-product-subtable> 
            &nbsp;
        </div> 
    </div> 
</div> 


<!-- -------------------- NoShop Item: The Dream Giver Library / The Dream Giver DVD -------------------- --> 
<div class='noshop-product '> 
    <div class=noshop-product-imagebox  width=83 style="width:83px;" > 
        <a href="http://jesper.angelo.net/wordpress/noshop/" /><img class=noshop-product-image  width=83 style="width:83px;"  src="./wp-content/themes/mingle-theme/parallelus-mingle/assets/images/skins/skin-7/bw/products/dreamgiver/dreamgiverdvd.png" /></a> 
    </div> 
    <div class=noshop-product-textbox> 
        <a href="http://jesper.angelo.net/wordpress/noshop/" /><div class=noshop-product-title>The Dream Giver DVD</div></a> 
        <div class=noshop-product-desc> 
            &nbsp;
        </div> 
        <div class=noshop-product-subtable> 
            &nbsp;
        </div> 
    </div> 
</div> 


<!-- -------------------- NoShop Item: The Dream Giver Library / The Dream Giver CD -------------------- --> 
<div class='noshop-product '> 
    <div class=noshop-product-imagebox  width=83 style="width:83px;" > 
        <a href="http://jesper.angelo.net/wordpress/noshop/" /><img class=noshop-product-image  width=83 style="width:83px;"  src="./wp-content/themes/mingle-theme/parallelus-mingle/assets/images/skins/skin-7/bw/products/dreamgiver/dreamgivercd.png" /></a> 
    </div> 
    <div class=noshop-product-textbox> 
        <a href="http://jesper.angelo.net/wordpress/noshop/" /><div class=noshop-product-title>The Dream Giver CD</div></a> 
        <div class=noshop-product-desc> 
            &nbsp;
        </div> 
        <div class=noshop-product-subtable> 
            &nbsp;
        </div> 
    </div> 
</div> 


<!-- -------------------- NoShop Item: The Dream Giver Library / The Dream Giver Workbook -------------------- --> 
<div class='noshop-product '> 
    <div class=noshop-product-imagebox  width=83 style="width:83px;" > 
        <a href="http://jesper.angelo.net/wordpress/noshop/" /><img class=noshop-product-image  width=83 style="width:83px;"  src="./wp-content/themes/mingle-theme/parallelus-mingle/assets/images/skins/skin-7/bw/products/dreamgiver/dreamgiverworkbook.png" /></a> 
    </div> 
    <div class=noshop-product-textbox> 
        <a href="http://jesper.angelo.net/wordpress/noshop/" /><div class=noshop-product-title>The Dream Giver Workbook</div></a> 
        <div class=noshop-product-desc> 
            &nbsp;
        </div> 
        <div class=noshop-product-subtable> 
            &nbsp;
        </div> 
    </div> 
</div> 


<!-- -------------------- NoShop Item: The Dream Giver Library / The Dream Giver for Teens -------------------- --> 
<div class='noshop-product '> 
    <div class=noshop-product-imagebox  width=83 style="width:83px;" > 
        <a href="http://jesper.angelo.net/wordpress/noshop/" /><img class=noshop-product-image  width=83 style="width:83px;"  src="./wp-content/themes/mingle-theme/parallelus-mingle/assets/images/skins/skin-7/bw/products/dreamgiver/dreamgiverteens.png" /></a> 
    </div> 
    <div class=noshop-product-textbox> 
        <a href="http://jesper.angelo.net/wordpress/noshop/" /><div class=noshop-product-title>The Dream Giver for Teens</div></a> 
        <div class=noshop-product-desc> 
            &nbsp;
        </div> 
        <div class=noshop-product-subtable> 
            &nbsp;
        </div> 
    </div> 
</div> 


<!-- -------------------- NoShop Item: The Dream Giver Library / The Dream Giver for Parents -------------------- --> 
<div class='noshop-product last-product'> 
    <div class=noshop-product-imagebox  width=83 style="width:83px;" > 
        <a href="http://jesper.angelo.net/wordpress/noshop/" /><img class=noshop-product-image  width=83 style="width:83px;"  src="./wp-content/themes/mingle-theme/parallelus-mingle/assets/images/skins/skin-7/bw/products/dreamgiver/dreamgiverparents.png" /></a> 
    </div> 
    <div class=noshop-product-textbox> 
        <a href="http://jesper.angelo.net/wordpress/noshop/" /><div class=noshop-product-title>The Dream Giver for Parents</div></a> 
        <div class=noshop-product-desc> 
            &nbsp;
        </div> 
        <div class=noshop-product-subtable> 
            &nbsp;
        </div> 
    </div> 
</div> 
</div><!--End Products DIV -->

/* No Shop Categories */ 
.The_Dream_Giver_Library {
    background: #cf2426;
    background: -moz-linear-gradient(top, #cf2426 0%, #ac1e1f 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cf2426), color-stop(100%,#ac1e1f));
    background: -webkit-linear-gradient(top, #cf2426 0%,#ac1e1f 100%);
    background: -o-linear-gradient(top, #cf2426 0%,#ac1e1f 100%);
    background: -ms-linear-gradient(top, #cf2426 0%,#ac1e1f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cf2426', endColorstr='#ac1e1f',GradientType=0 );
    background: linear-gradient(top, #cf2426 0%,#ac1e1f 100%);
}

/* No Shop Products */
.noshop-category {
    color: #fff;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 5px;
    text-align: center;
    padding-top: 3px;
    font-weight: bold;
    font-size: 18px;
    height: 30px;
    -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .3);
    -moz-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .3);
    box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .3);
    border: 1px solid rgba(0,0,0,0.4);
}
.noshop-products-div {
    margin: 0 auto;
    text-align: center;
}
.noshop-products {
    margin: 0 auto;
    height: 190px;
    background: #fefefe;
    background: -moz-linear-gradient(top, #fefefe 0%, #d3d3d3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#d3d3d3));
    background: -webkit-linear-gradient(top, #fefefe 0%,#d3d3d3 100%);
    background: -o-linear-gradient(top, #fefefe 0%,#d3d3d3 100%);
    background: -ms-linear-gradient(top, #fefefe 0%,#d3d3d3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#d3d3d3',GradientType=0 );
    background: linear-gradient(top, #fefefe 0%,#d3d3d3 100%);
    -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .3);
    -moz-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .3);
    box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .3);
    border: 1px solid rgba(0,0,0,0.4);
    margin-top: 10px;
    display:-moz-inline-stack;
    display:inline-block;
    text-align: cente;
}
.noshop-product {
    display:-moz-inline-stack;
    display:inline-block;
    width: 115px;
    height: 170px;
    margin: 10px 0px;
    border-right: 1px solid #939598;
}
.last-product {
    border-right: none;
}
.noshop-product-imagebox {
    margin: 0 auto;
    width: 83px;
}
.noshop-product-imagebox img {
    height: 115px;
}
.noshop-product-textbox {
    text-align: center;
    padding: 0px 15px;
}
.noshop-product-textbox a, .noshop-product-textbox a:visited, .noshop-product-textbox a:link {
    color: #000;
    font-size: 10px;
    font-weight: bold;
}
like image 701
swg1cor14 Avatar asked Sep 08 '11 19:09

swg1cor14

People also ask

How do I force a div to stay on the same line?

You can force the content of the HTML <div> element stay on the same line by using a little CSS. Use the overflow property, as well as the white-space property set to “nowrap”. In the next example, we use three elements (<div>, <ul>, and <li>) that are floated and have a fixed width.

How to keep the content of the <div> element on the same line?

You can force the content of the HTML <div> element stay on the same line by using a little CSS. Use the overflow property, as well as the white-space property set to “nowrap”. Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass) Example of forcing the content of the <div> element to stay on the same line: ¶

How to prevent a Div from breaking to the next line?

An HTML <div> (division) is a block-level elementdesigned to not display any HTML elements next to it unless its default behavior is changed. Below are all the different methods of preventing a div from breaking to the next line. Tip Depending on why you want to break a div, also consider a <span> tag.

How to align divs side by side using CSS?

CSS allows aligning divs side by side in many ways. We’ll discuss some ways that are widely used. The <div>tag is used to define parts of a page or a document. It is used for grouping large sections of HTML elements and styling them with CSS. Three or more different divs can be put side-by-side using CSS.

1 Answers

You simply need this:

.noshop-product {
    vertical-align: top
}

There are two reasons for your problem: the default vertical-align is baseline, and the text inside the other .noshop-products all have two lines of text.

like image 101
thirtydot Avatar answered Oct 31 '22 14:10

thirtydot
Sign in to Comment

Related questions

Is YUI grids.css really that flexible?
How do I Position an Element within Heading (H1, H2, etc) tags?
Make text input fields and their labels line up correctly
Padding around <a> tags not working in Internet Explorer
float: right doesn't work
how to call browser based css?
How to use Firebug to easily find which css file defines a particular style
Using jQuery to add class to first TD on each table row
div issue : height not extending with contents
CSS table, table-cell height issue in Firefox
Fixed position CSS for a button to provide website feedback
Various possible uses of the "content: " property in css2/css3
Adding a absolutely-positioned DIV to the bottom of an OpenLayers Map?
CSS: absolute positioning in different browsers
Correct syntax for include css file?
rgba not working in IE9
How to center align <li> items when it goes to 2nd line?
A Script to Eliminate Vendor Prefixes in CSS [closed]
Changes in CSS files are not reflected after deployment
Set background image for font color?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!