We Keep Coding

Making text align with DIV in div-based HTML page in CSS?

My page for a clone script can be found at https://jsfiddle.net/k68dm4wj/
The problem is getting the text and image for a DIV to align next to the image with a small amount of space between the top and next to the image, like this example.
This is my code, taken from the JSFiddle above:
<div class="card">
<img class="listing-main-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Audi_A6_Allroad_Quattro_C8_IMG_1975.jpg/880px-Audi_A6_Allroad_Quattro_C8_IMG_1975.jpg">
<div class="card-info">
<h2 class="listing-title title-wrap">Audi A6 Allroad Sport 55 TFSI 340PS 3.0</h2>
<p class="listing-attention-grabber ">BRAND NEW 2020 CAR</p>
<ul class="listing-key-specs ">
<li>2020 (20) reg</li>
<li>Estate</li>
<li>40 miles</li>
<li>3.0L</li>
<li>339BHP</li>
<li>Automatic</li>
<li>Petrol</li>
<li>1 owners</li>
</ul>
<ul class="listing-extra-detail">
</ul>
<p class="listing-description">2020 (20) reg, black, 40 miles £46,796</p>
<div class="seller-info ">
<div class="phone-code">
Tel: (0114) 49600000
</div>
<div class="seller-type">
Trade seller
</div>
<div class="seller-location">
<span class="seller-town">Sheffield</span> -
43 miles away
</div>
</div>
</div>
<section class="price-column">
<div class="vehicle-price">£46,795</div>
</section>
</div>
Although my code works properly, getting it to look similar to the page I linked to - at least for the DIV part of my code is the main problem. This relates to where I have .
There is also a second problem; I want to include smaller images and allow the user to scroll through them with jQuery or javascript, but the main image in remains the first one; also, how to include a logo after the images at the end like in the linked-to page (if there's one needed; not every div will need a logo).
Like this:
This is the intended end result:
I should add, the JSFiddle linked to has one large CSS file in there, when I've actually got three separate files - one for the layout, one for basics, and one for webfonts. For JSFiddle, I had to condense it into one CSS file there; the original file has CSS links in the header.
I would really appreciate any advice or guidance on making this look better.

Try using overflow: hidden in .layout{}. Also use "white-space: nowrap" in unordered list.It will not wrap your content on next line.For example:
.layout{
//rest of the styling here ....
overflow: hidden;
}
.ul{
//rest of the styling here ....
white-space: nowrap
}

.card-info
{....}
.card-price
{
padding: 1rem;
font-size: 0.9rem;
}
In Your CSS Change the padding of card-price from 2rem to 1rem
check the space in the image

remove/change selector value based on screen size

I have 1 line of code that used a selector for my parallax image
here is the code
<div class="expertise-top" data-parallax="scroll" data-image-src="images/expertise/expertise-head.jpg">
<div class="container">
<section>
<div class="row">
<div class="col-md-12">
<h3>Interactive & Identity</h3>
<p><b>ECTECIANT</b> IS MADE UP OF <b>A NETWORK OF FREELANCERS.</b> OUTSTANDING <b>CREATIVE DIRECTORS, ART DIRECTORS, WEB DESIGNERS, DEVELOPERS AND ILLUSTRATORS</b> THAT ARE ABLE TO BRING TO OUR PROJECTS THE <b>PERSONALITY</b> AND <b>QUALITY</b> THAT SETS US APART.</p>
</div>
</div>
</section>
</div>
</div>
the selector is
data-image-src="images/expertise/expertise-head.jpg"
the problem is the image is not responsive, the selector acts like
background-image
in css
So, I'm trying to change the selector src for the image based on the screen size
I know there is a way to get class or id in javascript by using getelementbyid, but is there a way to get the custom selector?

Bootstrap.js Carousel with only text

I follow this tutorial to make Carousel slide .
When I define each item contain image and paragraph as -
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
it's work fine (here its jsFiddle) .
But when I reduce it to paragraph only as -
<div class="item">
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
it stop working (here its jsFiddle) .
How could I make it work with only paragraph such that is slide the text each switch ?

The position property of the .carousel-caption was causing the problem, without the image it goes haywire, so set it to static:
.carousel-caption{
position:static;
}
Here's the demo of it working both with and without image:
DEMO

The easiest way will simply to make images that are a background colour. If you want a cleaner way to do it, you can probably achieve the same effect using CSS.

See after removing image and leaving only paragraph
i gave the item container class the width and height of image with a background colour to div to indicate the presence just copy and paste this code in fiddle css section and run to see the change
.item{
height:480px;
width:1200px;
background-color:orange;
}

I want a thumbnail to expand in size as the div does

Hey I'm looking for some help - I'm more of a designer than a coder but I am trying to learn :)
I do have this kinda working but I can't figure out how to get the thumbnail image to resize to the height of the expanded div - as it expands.
I have a container div and inside that div I have multiple "expandable" divs which contain information about different products.
Each of these expandable divs has a title, a thumbnail image and a price of the product (as well as a plus sign image to expand the div itself).
When the div is expanded there is some more information about the product on show.
But when the div is expanded, I would also like the "price" to disappear (as it's now visible in the expanded information) and I would like the image to automatically scale to the height of the expanded div.
So the product information will be on the on the left hand side of the div and the image will be taking up the right half of the div (with the minus button on top of it.
This is my html
<div class="expandingContentContainer">
<div class="expandingContent">
<div id="expandingContentHeader" style="display:inline; float:left">
<h4>Portable navigation system</h4>
</div>
<div id="expandingContentThumb" style="display:inline;">
<img src="images/thumbnails/audio-portable-navigation-thumbs.jpg" />
</div>
<div id="expandingContentPrice" style="display:inline;">
<img src="images/assets/icon_pound.png" />Price: £200
</div>
<div id="expanderSign">
<img src="images/assets/icon_plus.png" />
</div>
<div id="expanderContent" style="display:none">
<p>Bluetooth voice dialling without the hassle of having to train the device. Reads text messages out loud and features a stylish 2,8" colour display. Play back music and phone calls via the OE-audio system.</p>
<p><img src="images/assets/icon_pound.png" />Price: £200</p>
<p><img src="images/assets/icon_tick.png" />Availability: Most models<img src="images/assets/icon_hash.png" />Part Number: 3600-78-474<img src="images/assets/icon_pencil.png" />Legal: N/A</p>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#expanderSign").click(function(){
$("#expanderContent").slideToggle();
if ($("#expanderSign").text() == "+"){
$("#expanderSign").name("−")
}
else {
$("#expanderSign").text("+")
}
});
});
</script>

Sounds like something you could solve entirely with CSS. As long as the container-div has a fixed height, you should be able to set the height of the img-element to height: 100%, causing the image to scale accordingly. However, this will not work while the display-mode of the container is set to display: inline. You will have to use display: inline-block to be able to set the height of the div.

In order to get a good help you should add a link to your website or the css files.
You will need some changes in the css and maybe (depending on the support you need) some javascript (jquery or zepto).
You could also use a pre build library but it's really not necessary.

Is it possible to use CSS to align these divs/spans in a table-like manner? (While still retaining continuity)

I have
<div class='line'>
<div class='chord_line'>
<span class='chord_block'></span>
<span class='chord_block'>E</span>
<span class='chord_block'>B</span>
<span class='chord_block'>C#m</span>
<span class='chord_block'>A</span>
</div>
<div class='lyric_line'>
<span class='lyric_block'></span>
<span class='lyric_block'>Just a</span>
<span class='lyric_block'>small-town girl</span>
<span class='lyric_block'>living in a</span>
<span class='lyric_block'>lonely world</span>
</div>
</div>
(Excuse me for not being too familiar with proper css conventions for when to use div/spans)
I want to be able to display them so that each chord_block span and lyric_block span is aligned vertically, as if they were left-aligned and on the same row of a table. For example:
E B C#m A
Just a small-town girl living in a lonely world
(There will often be cases where an empty chord block is matched up to non-empty lyric block, and vice-versa.)
I'm completely new to using CSS to align things, and have had no real understanding/experience of CSS aside from changing background colors and link styles. Is this possible in CSS? If not, how could the div/class nesting structure be revised to make this possible? I could change the spans to divs if necessary.
Some things I cannot use:
I can't change the structure to group things by a chord_and_lyric_block div (and have their width stretch to the length of the lyric, and stack them horizontally), because I couldn't really copy/select the lyrical lines continuously in their entirety, which is extremely critical.
I'm trying to avoid a table-like solution, because this data is not tabular at all. The chord line and the lyric line are meant to be read as one continuous line, not a set of cells. Also, apart from the design philosophy reasons, I think it might have the same problems as the previous thing bullet point.
If this is possible, what div/span attributes should I be using? Can you provide sample css?
If this is not possible, can it be done with javascript?
EDIT: I'm sorry I wasn't clear at the start, but I would like a solution that allows both the chord line and the lyric line to be "selectable" and continuous.

Original Attempt... ---> CSS Tables Demonstration
div.line {
display:table;
}
div.line > div {
display:table-row;
}
div.line > div span {
display:table-cell;
vertical-align:middle;
}
For empty blocks, place html entity for non-breaking space as their contents. This should do what you want, if not, then I may have misunderstood.
SPECIAL NOTE: Compatibility for display:table-* is limited. More information
NEW EXAMPLE: Quite sure this is what you are looking for. --->
Demonstration
CSS
.block {
margin-top:1.5em;
position:relative;
display:inline-block;
}
.block .chord {
font-weight:bold;
font-size:0.8em;
position:absolute;
top:-1em;
}
HTML
<div class="block">
<div class="chord"></div>
<div class="lyric"></div>
</div>
<div class="block">
<div class="chord">E</div>
<div class="lyric">Just a</div>
</div>
<div class="block">
<div class="chord">B</div>
<div class="lyric">small-town girl</div>
</div>
<div class="block">
<div class="chord">C#m</div>
<div class="lyric">living in a</div>
</div>
<div class="block">
<div class="chord">A</div>
<div class="lyric">lonely world</div>
</div>

It looks interesting to me so I just searched over it and find following article that is discussing similar problem:
Create a table using CSS
I checked it here:
http://jsfiddle.net/MdzDp/
I think you need to use DIVs and SPANs instead of ULs and LIs here.

A similar question was asked once, and the only workable solution was indeed a combined "chords and lyrics" block (with the chords having a combination of position: absolute and position: relative). It's the only way I can think of if you want this to work reliably and in edge cases like different font sizes and so on.
JSFiddle example
Now this doesn't do exactly what you need: It doesn't allow continuous selection of lyrics. But I can think of two general directions to extend it.
A) Chords as background images: If the Chord symbols
C# E# Em Am
could be background images instead of actual text, you could use my code example and give the chord_block class a background-image of whatever Chord is in question. The image would have to contain the Chord (e.g. Em) as text. The upside is that this keeps the "lyrics line" intact. The downside is that this is not accessible, not resizable, and possibly problematic in print because many browsers don't show background images when printing.
B) Using jQuery: Using the approach shown in the JSFiddle, you have elements of the class chord_block that are already in the correct position. It should be half-way easy to use jQuery to create a new element on the fly, and add it to the document at the x/y position of each chord_block but outside the line, so you can still select the whole lyrics line without interference.

here's a crappy way to do it... i'd try more, but christmas dinner is served :)
<head>
<style type="text/css">
div.line {width:100%;}
div.line div.chord_line div.chord_block, div.line div.lyric_line div.lyric_block {width:20%; float:left;}
div.lyric_line {clear:left;}
</style>
</head>
<body>
<div class='line'>
<div class='chord_line'>
<div class='chord_block'>...</div>
<div class='chord_block'>E</div>
<div class='chord_block'>B</div>
<div class='chord_block'>C#m</div>
<div class='chord_block'>A</div>
</div>
<div class='lyric_line'>
<div class='lyric_block'>...</div>
<div class='lyric_block'>Just a</div>
<div class='lyric_block'>small-town girl</div>
<div class='lyric_block'>living in a</div>
<div class='lyric_block'>lonely world</div>
</div>
</div>
</body>
EDIT:
if you're open to structural changes, here you go:
<head>
<style type="text/css">
#chord_block {float:left; padding:2px; text-align:left;}
</style>
</head>
<body>
<div id="chord_block">
<div id="chord"></div>
<div id="lyric"></div>
</div>
<div id="chord_block">
<div id="chord">E</div>
<div id="lyric">Just a</div>
</div>
<div id="chord_block">
<div id="chord">B</div>
<div id="lyric">small-town girl</div>
</div>
<div id="chord_block">
<div id="chord">C#m</div>
<div id="lyric">living in a</div>
</div>
<div id="chord_block">
<div id="chord">A</div>
<div id="lyric">lonely world</div>
</div>
</body>

let the down-voting begin ...
as much as I love css, sometimes tables are worth using.
let me clarify, if you can pull it off with css and div's, it's all good; but if you have to spend hours trying to figure the simplest (with tables) layout out -- I think you're wasting your (and your client's) time and money.