Help Aligning Different Text With CSS

I am not able to figure out how I can create a single line of text so that it looks like:

List Price: $49.99

I got the 2 different elements looking the way I need them too, but I cannot figure out/remember how to get them to align horizontally.

What I have in the way of html looks like this so far:
<div class="pricingInfo">
<div id="listPrice">
List Price:
<!-- listPrice --></div>
<div id="listPriceAmt">
$99.99
<!--listPriceAmt --></div>
<!-- pricingInfo --></div>

And my css looks like:
.pricingInfo {
float: left;
}

#listPrice {
padding-top: 1em;
font-weight: bold;
}

#listPriceAmt {
padding: 1em 0 1em 1em;
text-decoration: line-through;
}

I know that I am the problem and to fix it is something simple so I would appreciate a little advice.

Thanks . . .

 

Have you tried something as simple as

<p class="list-price"><span>List Price:</span> $49.99</p>

.list-price span {
    font-weight: bold;}

Code (markup):

You don't tell us the structure of the context. Another container element may be more appropriate, but the concept would be the same.

cheers,

gary

 

Hi Gary,

Thanks for the input, and I screwed up my original post. I forgot to add that I am having a line-through the list price. That is why in my code above it is styled one way for the 'List Price:' and another way for the $99.99 - where I am going to style it for the line-through.

That's the part I am having a problem with, I guess.

I am trying to get it to look like:




Thanks again . . .

 

that's a list...

<ul>
<li><b>List Price:</b> <del>$99.99</del></li>
<li><b>Your Price:</b> <span><b class="price">$49.99</b> with Free shipping</span></li>
  <li><b>You Save:</b> <span class="price">$50.00</span></li>
</ul>

Code (markup):

CSS:

li {
  list-style-type: none;
  max-width: 20em;
  margin-bottom: 1em;
}
li .price {
  color: #D49353;
}
li > b {
  width: 5em;
  display: inline-block;
}
li del, li span {
  text-align: left;
  display: inline-block;
  margin-left: 2em;
}

Code (markup):

JsFiddle: https://jsfiddle.net/mjfoat7t/

 

Thanks PoPSiCLe . . .

Your solution works perfectly. I can't figure out how exactly it works, but it works.

I thought originally that a list might work, but then I thought if I went that route it would be the wrong route so I didn't go that route.

Keeping in mind that I apparently know zilch about CSS (I thought I was getting a handle on it, but when I run into a problem and you guys help me out, it creates way more questions) so you are going to have to explain how this works to me - especially li > b and li del, li span - this is brand new to me.

Thanks again . . .

 

Okay.
The li > b just means that the rule only affects b which are direct descendants of li. That means that this:

<li><b>something</b></li>

Code (markup):

is affected by the rule, while this:

<li><span><b>something else</b></span></li>

Code (markup):

isn't, since there is a span between the li and the b.

As for the li del, li span rule, it just works on both of the selectors - both li del and li span. The comma just delimits different selectors with the same look.

If there is anything else you need help with, don't be afraid to ask.

(Oh, and <del> is just an element that _usually_ gets shown as line-through in visual browsers).

 

Thanks again PoPSiCLe . . .

That makes sense, I guess. I will need to experiment with it a bit to see if I understand how it works. In the mean time, I have been playing around with a page and while most of the page seems to be responsive, I can't figure out what I am doing wrong with it to get the full page responsive. I could use some help with it.

First off, I am just not understanding media query. Everything I have found about it so far is just about different devices. Anyway, my #productInfo and #purchaseInfo are not collapsing down (for lack of a better way to describe it) and I have no clue as to how to fix it.

Any suggestions?

Also, could someone direct me to a good source to learn about using media query to make pages responsive?

So my html looks like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    <meta name="description" content="A discount price for this unique 12-Pc Assorted 12-Guage ShotGun Shell Fixed Blade Knives for those who have everything.">
    <meta name="keyword" content="Bargain-Priced, bargin priced, discount, discounted, Fixed Blade Knife, Butterfly Knife, Folding Knife,
    Spring Assisted Knife, Fantasy Knife, Stun Gun, Military, Police, Tactical">
    <link rel="stylesheet" href="screen3.css" media="screen,projection,tv">
    <title>Bargain-priced 12-Pc Assorted 12-Guage ShotGun Shell Knives | SharpStuff4Guys.com</title>
    <link rel="shortcut icon" href="favicon.png">
  </head>

<html>

<body>

    <div id="contentWrapper">
        <h1>
        <a href="/index.php">
            SharpStuff4Guys
                <span><!-- image sandbag --></span>
        <small>Unique, Collectible Knives, Blades & More</small>
        </a>
    </h1>
  
    <ul id="mainMenu">
        <?php include("mainMenu.php"); ?>
    <!-- #mainMenu --></ul>

    <div id="shipping-bar">
        <?php include("ship-bar.php"); ?>
    </div>
      
        <div id="productWrapper">
            <img src="/images/shotgun_shell_knives.jpg" alt="12 Pc Assorted 12 Guage ShotGun Shell Knives" />
          
                <div id="productInfo">
                    <h3>12 Pc Assorted 12 Guage ShotGun Shell Fixed Blade Knives</h3>
                    <div id="rating">
                        Avg Rating: <img src="/images/5-diamonds.jpg" alt="5 Diamonds Rating">
                    <!-- rating --></div>                  
                        <ul>
                            <li><b>List Price:</b> <del>$39.99</del></li>
                            <li><b>Your Price:</b> <span><b class="price">$31.60</b> with Free shipping</span></li>
                             <li><b>You Save:</b> <span class="price">$8.39</span></li>
                        </ul>                  
                <!-- productInfo --></div>
              
                <div id="purchaseInfo">  
                    <div id="total">Total Price:</div><div id="totalPrice">$31.60</div>
                                      
                        <img src="/images/cart.jpg" alt="Add To Cart" /><br>
                    <ul>
                        <li><b>FREE</b> SHIPPING WORLDWIDE</li>
                        <li>100% SATISFACTION GUARANTEE</li>
                        <li>100% SECURE PAYMENTS Through PayPal</li>
                    </ul>
                <!-- productInfo --></div>
              
            <div id="bar">
                <p>Product Description</p>
            <!-- bar --></div>
              
            <div id="description">
                <p>You want to talk about unique, then you want to check out this 12 Pc Assorted 12-Guage ShotGun Shell Knives. 12 Pc Assorted.
                Folding 12 Guage ShotGun Shell Fixed Blade Knives. These knives are made out of sturdy ABS Plastic and feature a 1-3/4" stainless steel
                blade. These beauties come in four different colors: green, blue, black, and red.
                <br><br>
                If you want something that your friends will be fancinated with, be sure to order yours today and enjoy the discounted price.</p>
            <!-- description --></div>
          
            <div id="notice">
                <p><b>For Canadian Customers:</b><br>
                Your order may require additional shipping fees if the contents of your order are considered over-sized and weigh more than 7
                pounds in actual or dimensional weight. If this additional fee applies to your order, you will be asked to authorize this charge
                BEFORE your credit card is charged and debited. If you are paying via PayPal, you will be given the option to pay additional fees
                or cancel the order to receive a full refund.
                <br><br>
                Restricted items: This site contains various items such as Fire Extinguishers, Pepper Spray, Stun Guns & Rifle Scopes that cannot
                ship internationally and will be removed from your order prior to any charges.
                <br><br>
                Please note that all orders will be subject to a minimum merchandise value of $24.95. If you order's subtotal is below this value,
                you will be asked to add items to your order.</p>
            <!-- notice --></div>
      
        <!-- productWrapper"></div>      
  
    <!-- contentWrapper --></div>

<div class="clear-both"></div>
  
    <div id="footer">
        <p><span>&copy; 2016</span>SharpStuff4Guys.com</p>
    </div>

</body>

</html>

Code (markup):

and my css looks like:

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
    margin:0;
    padding:0;
}

img, fieldset {
    border:none;
}

/* fix for legacy iOS and windows Mobile devices */
@media (max-width:512px) {
    * {
        -webkit-text-size-adjust:none;
        -ms-text-size-adjust:none;
    }
}

/* fix for HDX displays like the Kindle Fire HDX */
@media
    (-webkit-min-device-pixel-ratio:2) and (min-width:1600px),
    (min-resolution:172dpi) and (min-width:1600px)
{
    html { font-size:200%; }
}

body {
    background:#BFCDE4;
}

#contentWrapper {
    max-width: 72em; /* h1 logo image width for legacy browsers */
    margin: 0 auto;
    overflow:hidden;
    -webkit-box-shadow:
        0 0 1px 1px #000,
        0 0 1.5em 0.1em #321;
    box-shadow:
        0 0 1px 1px #000,
        0 0 1.5em 0.1em #321;
    -webkit-border-radius:
        1em;
    border-radius:
        1em;
    background: #FFF;
}

* html #contentWrapper {
    width:55em; /* IE6- can't do min/max-width, OH WELL! */
}

h1 {
    padding-left: 2em;
    font-size: 100%; /* prevent FF reverse inheritance bug */
    background: #0067A9;
}

h1 a {
    position: relative; /* so we can absolute position span over this */
    display: block;
    padding: 40px 0;
    /* 40px top + 40px bottom + 64px line-height == image height */
    text-decoration: none;
    font: bold 40px/44px arial,helvetica,sans-serif;
    color: #FFF;
}

h1 span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 130px;
    background: #0067A9 url(/images/header.jpg) center left no-repeat;
}

h1 small {
    display:block;
    font:bold 35%/107% arial,helvetica,sans-serif;  
}

#mainMenu {
    list-style:none;
    text-align:center;
    position:relative;
    font:bold 16px/18px arial, helvetica, sans-serif;
    background:#DEF;
    border-bottom:2px solid #8AC;
}

#mainMenu li {
    position:relative;
    display:-moz-inline-block;
    display:-moz-inline-box;
    display:inline-block;
    display:inline !ie; /* IE7/earlier */
    zoom:1; /* zoomfix, NOT haslayout */
    vertical-align:bottom;
    padding:0 20px 0 4px;
}

#mainMenu li a {
    position:relative;
    display:-moz-inline-block;
    display:-moz-inline-box;
    display:inline-block;
    padding:4px 2px 4px 8px;
    text-align:left;
    text-decoration:none;
    color:#000;
}

#mainMenu li a span {
    position:absolute;
    top:0;
    right:-6px;
    width:8px;
    height:26px;
}

#mainMenu li:hover a,
#mainMenu a:active {
    color:#00F;
}

#mainMenu ul {
    list-style:none;
    position:absolute;
    display:inline;
    left:-999em;
    top:26px;
    width:208px;
    text-align:left;
}

#mainMenu ul li {
    display:block;
    padding:0;
}

#mainMenu ul li a {
    display:block;
    padding:4px 8px;
}

#mainMenu li:hover ul {
    display:block;
    left:4px;
}

#mainMenu li:hover a {
    background-position:0 0;
}

#mainMenu li.hasKids:hover a,
#mainMenu li.haskids a:active {
    background-position:0 -26px;
    background-color: #DEF;
}

#mainMenu li:hover a span,
#mainMenu a:active span {
    background-position:-248px 0;
}

#mainMenu li.hasKids:hover a span,
#mainMenu li.hasKids a:active span {
    background-position:-248px -26px;
}

#mainMenu li.hasKids:hover li a,
#mainMenu li.hasKids:hover li a span {
    background-position:0 -65px;
}

#mainMenu li.hasKids:hover li.first span {
    background-position:-248px -26px;
}

#mainMenu li.hasKids:hover li.last a {
    background-position:0 -78px;
}

#mainMenu li.hasKids:hover li.last span {
    background-position:-248px -78px;
}

#mainMenu li.hasKids li:hover a,
#mainMenu li.hasKids li:hover a span {
    background-position:0 -121px;
}

#mainMenu li.hasKids li.first a:hover span {
    background-position:-248px -104px;
}

#mainMenu li.hasKids li.last a:hover {
    background-position:0 -130px;
}

#mainMenu li.hasKids li.last a:hover span {
    background-position:-248px -130px;
}

#mainMenu li:hover li a {
    color:#000;
}

#mainMenu li li:hover a {
    color:#00F;
}

#shipping-bar {
    margin: 1em 0 3em 0;
    background: #FFF;
}

#shipping-bar p {
    padding: 0.4em 0 0.4em 0;
    font-family: arial,helvetica,sans-serif;
    font-weight: bold;
    text-align: center;
    font-size: 1.75em;
    text-decoration: none;
    color: #CC0000;
}

.clear-both {
   clear: both;
}

#productWrapper {
    padding: 1em;
    background: #FFF;
}

#productInfo {
    margin: -21em 0 0 23.5em;
    padding: 1em;
    width: 20em;
    height: 19em;
    font-family: arial,helvetica,sans-serif;
}

#rating {
    padding-bottom: 0.75em;
    border-bottom: 1px solid grey;
    font-family: arial,helvetica,sans-serif;
}

#productInfo li {
  list-style-type: none;
  max-width: 20em;
  margin: 2.5em 0 1em 0;
  font-size: 1em;
}

#productInfo li .price {
  color: #FF9900;
}

#productInfo li > b {
  width: 6em;
  display: inline-block;
}

#productInfo li del, li span {
  text-align: left;
  display: inline-block;
  margin-left: 2em;
}

#purchaseInfo {
    float: right;
    margin-top: -21em;
    padding: 1em;
    width: 20em;
    height: 19em;
    border: 1px solid #CCC;
}

#total {
    font-family: arial,helvetica,sans-serif;
    font-weight: bold;
    font-size: 1.25em;
    padding-right: 1em;
    display: inline;
}

#totalPrice {
    font-family: arial,helvetica,sans-serif;
    font-weight: bold;
    font-size: 2em;
    color: #FF9900;
    display: inline;
}

#purchaseInfo ul {
    list-style: none;
}

#purchaseInfo li {
    padding-bottom: 1.25em;
}

#purchaseInfo img {
    display: block;
    margin: 0 auto;
    padding: 4em 0 2em 0;
}

#bar {
    width: 100%;
    background: #D7D7D7;
    height: 2.5em;
    margin-top: 4em;
}

#bar p {
    padding: 0.5em 0 0 1em;
    font-family: arial,helvetica,sans-serif;
    font-weight: bold;
    font-size: 1.1em;
}

#description {
    width: 100%;
    padding: 1em;
}

#description p {
    padding: 2em 3em 0 2em;
    font-family: arial,helvetica,sans-serif;
}

#description ul {
    margin-bottom: 2.5em;
    padding: 0.5em;
}

#description li {
    margin-left: 3em;
    width: 100%;
    font-size: 1.15em;
}

#notice {
    margin-top: 2.5em;
    padding: 1em 3.5em 1em 3.5em;
    font-family: arial,helvetica,sans-serif;
    font-size: 0.75em;
    color: #000;
}

#footer {
    text-align:center;
    padding:1em;  
    height: 2em;
    background: #0067A9;
}

#footer p {  
    font-family: arial,helvetica,sans-serif;
    color:#FFF;
}

#footer span {
  margin-right: 40px;
}

@media (max-width:50em) {
    body {
        min-width:192px; /* CSS3 possible, so let it go narrower */
    }
    #contentWrapper {
        float:none;
        width:auto;
    }
}

@media (max-width:660px) {
    h1 {
        text-align:center;
        padding:0;
    }
    h1 a {
        padding:0.33em 0.167em;
        font:bold 275%/125% arial,helvetica,sans-serif;
    }
    h1 span {
        display:none;
    }
}
@media (max-width:340px) {
    #productInfo {
        width:auto;
        margin:0 auto;
        display: inline-block;
        -webkit-box-sizing:padding-box;
        box-sizing:padding-box;
    }
    #purchaseInfo {
        width:auto;
        margin:0 auto;
        display: inline-block;
        -webkit-box-sizing:padding-box;
        box-sizing:padding-box;
    }
}

Code (markup):

 

Well... basically, @media-queries is not for making the pages responsive, but for adjusting the flow and styling so it fits dynamically on screens with different resolutions and sizes. Might not sound like a big difference, but it might be good to have that clear.

As I haven't gotten time to look at the code right now, I won't be able to help with it right now, but I'll have a look later when I have time.

As I understand it, you want the two elements #productInfo and #purchaseInfo to be below eachother when the screen gets narrower? And they don't?

BTW - using camelCase for IDs and classes (and other elements in HTML) should be avoided. It's perfectly valid, by all means, but a good rule of thumb is either using underscore or hyphens to ease readability in HTML (a good rule is to base it on XHTML, where camelCase is not allowed at all). Using camelCase in javascript is fine, however.

 

I keep telling ya'll . . . the more I try to learn, the less I know lol and I appreciate the patience in answering all my silly questions.

Anyway, to be perfectly honest, I don't know the best way for this site to line up when the screen narrows. Any suggestions?

I was thinking, originally, that I did want the page to show the image, then the #productinfo under that, then #purchaseInfo under that, but again, I have no clue as to what the best way to present this to surfers would be.

BTW - I adopted the use of camelCase as a result of my interactions with deathshadow. He made a good point (in my opinion) for the use of it so I adopted it to my coding. Trying to learn all this stuff is very frustrating with all the different approaches and opinions on how it should be done in order to do it properly. From what I have read on the subject, the opinions seem to be 50-50. Too bad somebody can't decide on a standardized way of doing all of this and everybody do it that way or else.

But anyhow, thanks again for all of your input and opinions and I look forward to you getting some free time to school me on what I am doing wrong or not understanding about media query and making a page responsive.

 

@kk5st -- Gary, really? What makes that a grammatical paragraph? Next thing you know you'll be slapping lone image tags in <p> for no good reason.

@PoPSiCLe -- much less what makes those titles be proper names or legal entities... That's just text that's in there. Even if being presented as bold, I wouldn't be using a B tag around them. to that same end, a price isn't a proper name or legal entity (such as a corporation, defendant in a legal case, or BRIAN BLESSED -- though that last one is the only time semantically I'd use B, STRONG, and BIG together at once), though if that's the FEATURED price, wouldn't one want to, oh I dunno... give it something like say... MORE EMPHASIS? Aka <strong>.

Though I agree, this feels like a list of information, so a UL is a good choice. Likewise that DEL is exactly right... and I'd probably emphasize the savings.

I'd also have a class on the UL since it's unlikely you'd want to target every joe blasted UL and LI on the page with this.

<ul class="prices">
	<li><span>List Price:</span> <del>$99.99</del></li>
	<li><span>Your Price:</span> <strong>$49.99</strong> with FREE shipping</li>
	<li><span>You Save:</span> <em>$50.00</em></li>
</ul>

Code (markup):

NOT happy about the span, but that fixed width for right alignment :/

I'd consider perhaps wrapping the whole line in STRONG, DEL, and EM and using the span to unset those values, as from a grammar/syntax point of view that might make more sense, but styling that would be harder.

I'd probably max-width the UL not the LI since IE8 goes tits up on that from time to time, use padding instead of margin since there's no interfering style and avoids margin-collapse headaches from rearing their ugly mug,

.prices {
	list-style:none;
	max-width:20em;
}

.prices li {
	padding-bottom:1em;
}

.prices strong,
.prices em {
	color:#D49253;
	font-style:normal;
}

.prices span {
	display:inline-block;
	width:5em;
	text-align:right;
	font-weight:bold;
}

Code (markup):

As to the full page code, damn that looks familiar but...

How can you have a H3 without a H2 preceding it? Since so much of the page would be static why are you slicing up the includes like that? You've got a perfectly good #footer to say clear:both on much less a perfectly good contentWrapper you could set overflow:hidden on, what in blazes is that clear-both div in there for? This isn't 2003.

As to the media queries, as mentioned you just use them so that when the layout would break due to width, you re-arrange the layout to fit. That's all "responsive" layout really is and should be, is making adjustments to add/remove fancy presentational bits and make better use of the available screen space. That could entail stripping off columns, hiding presentational images, letting content images scale down with a max-width, and a host of other changes.

All you have to remember is that any code inside the query only applies when the condition is true, overloading any values you set before them in the code. It's not rocket science, though it takes a bit of getting used to the idea of overloading an existing declaration.

I've got the exact opposite opinion... but you know what they say about opinions.

To me hyphens are illegible crap without spaces around them (admittdly I'm the nutter who says the same thing about the illegible acid trip that is colour syntax highlighting); and it's not like we're subtracting values here. Underscores are more legible, but I prefer to reserve those as delimiters for prefixes instead of as space replacements.

... and I actually PREFER camelCase for another reason: consistency with the naming convention I use in PHP and JavaScript. Having every Joe blasted language we use have a DIFFERENT naming approach is annoying as HELL; so I picked one and use it for everything... and that means camelCase for normal stuff, prefix_camelCase for related stuff, and CamelCase for object classes.

Though with JS having little distinction between a class and an instance, that can get confusing... but that's what loose typecasting and shoe-horning objects into C syntax any-old-way gets you in a language. There are times I really want to track down Brendan Eich and kick him in the junk. Then help him up, shake his hand, and give him a hug for NOT going with Scheme. It's a love/hate thing.

 

I don't have the legibility problem, but I loathe hyphens in any type of name, simply because of PHPs haphazard way of assigning names to built-in functions - THAT is a mess that should've been rewritten ages ago, with one consistent way of naming stuff.

I just don't like camelCase. Dunno why, really, it just doesn't work as well for me. I usually spend a little more time reading a long camelCase name than I do the same name with underscores. I use mostly underscores for any kind of language, although in JS I tend to assign variables with camelCase for some reason (mostly to make it easier to differentiate between post-variables being sent via AJAX, where I usually name the post-variable name and the content-variable the same thing, only the post one with simple lowercase (with underscores, if need be), and the content with camelCase to make it easier to read.

 

Nothing.

It is a structural paragraph, used properly in a structural markup language. With your concern for grammatical definitions, how do you mark up other grammatical entities? Clauses of various types? Adverbs and adjectives? What about the sentences within a paragraph? Or, is the paragraph the only case to insist on the grammatic markup?

I cannot understand why you insist on solely using of the grammatical definition and willfully ignoring the structural definition of the paragraph in a structural markup language.

Re images, they are inline replaced elements and ultimately devolve to text. The same applies to the object element. The P element is the lowest order text container and is appropriate unless a more specific container element, e.g. Hx, applies.

gary

 

Gentlemen . . . thank you so much for your input, advice and suggestions. I am still amazed at how many different ways and opinions there are to getting something done. Now I wish even more that everybody could get together and adopt one standardized way of doing html, css, php and what not. But then again, if they did, it would sure make for some boring reading. LOL

Anyway, deathshadow, to start with, the code should look familiar. I have been trying to incorporate everything I am learning from you and the others into these little projects of mine. I agree with you on most aspects and am trying to learn to do this the 'right' way. Only problem is that there are so many different ways to do it the 'right' way. You will notice the code for the mainMenu is yours and I am using it basically as a place holder while I try to figure out how media quires work and if I can get it to work with my projects. Once that is done, I will tackle a menu for the project and your code will go away.

I tried your suggested changes above to my code and I could not get it to work the way I was hoping for. The suggested code that PoPSiCLe offered worked like a champ and due to my lack of experience I cannot figure out why one produced the desired results and the other did not.

In reading the responses above regarding media query, it appears that maybe I have been over thinking the whole thing.

Anyway, with a new understanding of the purpose of media query in my case, I started playing with the code and I think I might be on the right path now. I was able to take my test project from full screen on my laptop and reduce the screen size as small as I could and it seemed to resize the way I understand it should. But, I am not sure if I did it the 'right' way.

So this is what my media query looks like:

@media (max-width:50em) {
    body {
        min-width:192px; /* CSS3 possible, so let it go narrower */
    }
    #contentWrapper {
        float:none;
        width:auto;
    }  
    h2 {
        padding-bottom:0.66em;
    }
    #productInfo {
        margin: 0 auto;
        display: inline-block;
    }
    #purchaseInfo {
        float: left;
        display: inline;
        margin-top: 2em;
    }
    #description {
        display: inline-block;
    }
    #description li {
        margin-left: 1em;
        font-size: 1.15em;
        line-height: 1.5em;
    }
    #description p {
        padding: 0.65em 0 0 1em;
}

@media (max-width:660px) {
    h1 {
        text-align:center;
        padding:0;
    }
    h1 a {
        padding:0.33em 0.167em;
        font:bold 275%/125% arial,helvetica,sans-serif;
    }
    h1 span {
        display:none;
    }
}

@media (max-width:340px) {  
    #productInfo {
        width:auto;
        margin:0 auto;
        display: inline-block;
        -webkit-box-sizing:padding-box;
        box-sizing:padding-box;
    }
    #purchaseInfo {
        width:auto;
        margin:0 auto;
        display: inline-block;
        -webkit-box-sizing:padding-box;
        box-sizing:padding-box;
    }
}

Code (markup):

I am not sure about the 340px.

So my first question is - am I on the right path?

Next question is - if I am on the right path, are there standard max-widths I should be working with other than the one's above?

And finally, if ya'll have any suggestions to improve any of this, please share with me.

Thanks so much for all the help . . .

 

I know, it was a joke. As Duckie would say "It's called a sense of humor, you should try it, it's nice!"

Since the content of those elements are NOT images, aka something that would be measured in pixels, I wouldn't be using pixels as the trigger. Your fonts SEEM to be dynamic (though the lack of a declaration on BODY is troublesome since you can't trust the defaults) meaning that on large font systems like mine, you'd want that to trigger at 425px, not 340. That's why media queries for anything that's filled with text content should be done as the same measurement one uses for flow text -- and that means EM. I'd probably make that kick in at around 22em, but I'd have to see and test the page live to say for certain. Media queries should be based on the needs of the content, not some arbitrary pre-planned value and that means test to see when the layout breaks or becomes unusable, and apply your change. That's why for stuff that should be in pixels -- like images, you use px, but for things that should be in EM as much as possible -- like fonts -- you use EM.

for something that's two columns being gutted down to one, 340px or 22em seems a wee bit small, but again I'd have to see it live.

But I'd say you're getting there and making tons of progress. It's a lot to take in all at once and given the sink or swim nature of the dive into the deep end of the pool you've taken, I'd say you're swimming along nicely.

 

I kind of figured that you were just rattling my chain, but there are some that are very touchy about their code. I just wanted to make sure that you understood that I had no intention of stealing your code.

So, with that out of the way, you can see the live page at test.allvixen.com/text.php and if you happen to take a look at it, maybe you can tell me what I have done that causes the text 'Product Description' to fall below the blue bar. I had the text showing in the bar, but now it down below and nothing I do it will move it.

I have added the following to the css:
body {
font-size: 100%;
background:#BFCDE4;
}

Is this the correct way to declare a default font size or should it be declared in px?

Can you clarify what a large font system is?

Maybe its too early in the day, but I am not following this at all. Maybe, once you look at the live page and make recommendations, then it will make more sense.

Boy! You ain't kidding. It seems that at my age now things take a whole lot longer to sink in, but when I get past my senior moments, it all starts falling into place.

One more thing . . . if you happen to look at the live page, I would appreciate your thoughts on the order in which I am presenting the product, then purchase info, then the means to make/complete a purchase and finally the description. I am wondering if I should swap the description with the means to make/complete a purchase so that is the last step?

Thanks again for your patience, understanding and support. I greatly appreciate it.