Configuration options for content division in a table cell

Please see the following fiddle which I have attempted:

http://jsfiddle.net/9LdEc/

code:

html:

<div id="CorpDealerSearch">
     <div class="row">  
            <div class="left">
                 Quarter To Date
            </div>
            <div class="left">
              <a href="self">914</a>
            </div>
            <div class="left">
                 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAZCAYAAACM9limAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACoSURBVFhH7dkhDoMwFIfxJ5EcieNwG5IZJJY7IDhCBTeYm0JCgviTEJaxAUnfbL8mdVVffn0VNTMT+7KBifVdYIdCmF8YhLm5KoQhjG+KIgYxiPEVQIyvFzMGMdI4ztuOWUmJaZpBef5QllUqilZl2SmE12WnpMK8C0zTor5/qq4DYWKuz/FMkmJiIhGGVynGyecMYhCDGF8...

<p>css:</p>

<pre><code>#CorpDealerSearch{
    display:table;
    padding : 5px;
   border: 2px solid gray;
   border-radius:3px;
}
.row{
        display:table-row;
}

.left {
    display:table-cell;
    display:inline-block;
    padding:5px;
}

However, I am looking for a design similar to the screenshot below. How can I update the fiddle to achieve this design?

I only need to make changes to the last cell.

htmlcss

Answer №1

Check out the latest updates I made to your fiddle: http://jsfiddle.net/9LdEc/4/

I included some new classes in your html and applied the following css styling:

body {
    font-family: Arial;
}

#CorpDealerSearch {
    display:table;
    padding : 5px;
    border: 2px solid gray;
    border-radius:5px;
    vertical-align: middle;
    line-height: 25px;
}
#CorpDealerSearch a,
#CorpDealerSearch a:hover,
#CorpDealerSearch a:visited {
    color: red;
    font-weight: bold;
}

.row {
    display:table-cell;
    vertical-align: middle;
}
.left {
    display:table-cell;
    display:inline-block;
    padding-left:5px;
    padding-right: 5px;
}
.tier {
    border-left: 2px dotted black;
    background-color: lightgreen;
}

Do these changes meet your expectations?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to perfectly align a Wufoo form within an iframe using CSS

I have integrated a web form from Wufoo into my webpage using an iframe. Custom CSS can be used to style the form and I am trying to center it within the iframe. Below is the HTML code of the form displayed in the iframe: <div id="container" class="lt ...

htmlcssformsiframe

executing a pre-existing executable file within a web browser or XAML Browser Application (

Currently, I have an application (let's call it exe1) provided by the supplier of our instruments that I would like to integrate into my existing application. Instead of rewriting exe1 from scratch, I am considering embedding it using something like a ...

c#htmlwpfxbap

The issue with the Hidden Content feature in the Slick Carousel is that it does not function correctly on the

There are some related topics worth exploring, such as: Slick carousel center class not working when going from last item to first item Despite trying various solutions, the issue still persists in my code. My goal is to have each item displayed in the ce ...

javascripthtmljquerycssslick.js

Determine the placement of the body with CSS styling

Here is the code snippet from my website: body { background-image: url('background.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } .centered { /* Center entire body */ display: flex; ...

htmlcss

"Upload a text file and create a JavaScript variable that contains the text within it

I am currently developing a library and I need to add a feature that reads the contents of a text file. Currently, it only returns the path. How can I modify it to return the actual content of the file? function displayFileContent() { var file = do ...

javascripthtmlupload

Disable or set input text to read-only in Internet Explorer 9 and earlier versions using JavaScript or jQuery

Can anyone offer any suggestions on how to accomplish this task? I attempted using JavaScript with the code below, but it did not yield the desired results. element.readOnly="true"; element.readonly="readonly"; element.disabled="disabled"; I also tried ...

javascriptjqueryhtmltextinput

I am looking to save the session value into the search box of the appTables application by utilizing jQuery

Is there a way to save the session value in the search box of appTables by using jQuery? <?php $session = \Config\Services::session(); ?> <script type="text/javascript"> $(document).ready(function () { var searc ...

phphtmljquerycssajax

What is the best way to blend a portion of an image into a div?

Having a bit of trouble with overlapping my image onto another div in my current project. When you take a look at what I've been working on, you'll see there's an image that says "That's me!" and it needs to overlap the left side div. I ...

htmlcssimageoverlap

Determining the class condition using AngularJS ng-class

I am working with an HTML element that contains AngularJS directives: <div class="progress"> <span ng-repeat="timeRangeObject in timeRangeObjects" style="width: {{timeRangeObject.percentage}}%" ...

javascripthtmlangularjs

Can the text value be read and its strings changed?

I need to modify the message inside an H2 element with the code provided below. I want to change the text from No results were found for this query: <em class="querytext"> to "No results were found by hello world!, but the catch is that I cannot di ...

javascripthtmlcss

Tips for effectively redirecting traffic to another website

Is there a way to redirect someone from a page URL like example.com/2458/233 to example2.com/2458/233? The first URL contains only a file that redirects to the other domain. Can anybody provide instructions on how to achieve this process? To clarify furt ...

javascriptphphtmljson

Steps for incorporating error messages in jQuery Validator:1. Begin by including the

I am currently facing an issue with displaying error messages on my "contact me" form. Although I have successfully implemented validation, I am struggling to comprehend how the errorPlacement function should be utilized. Could someone provide me with a ...

jqueryhtmlcss

What is the reason for the disparity between CSS box-sizing content-box and border-box?

Consider the following example where I only changed the CSS box-sizing property from content-box to border-box. The resulting output difference is significant. Give this code a try: .box1 { width: 300px; height: 100px; border: 1px solid blue; pa ...

htmlcss

Tips for retrieving nested data objects from a JSON API on the web

Below is the provided API link - I attempted to utilize this jQuery script in order to collect data for each state individually for my project. However, I am facing difficulties accessing the information with the code provided below. $.getJSON('http ...

javascriptjqueryhtmljsonapi

Send form using ajax technology

I am in the process of developing a website using GitHub pages and Jekyll. One of the key features I want to include is a contact form that allows users to send emails. To implement this functionality, I have decided to use Formspree. After creating an ac ...

javascriptjqueryhtmlajaxgithub-pages

Flex wrap is causing additional space within the layout

When using flex-wrap, if there are more textBoxes than the available width in the container, they shift to the next line. This is fine, but it leaves too much space between the button and the textBox. This spacing issue can make the layout look odd. I hav ...

htmlcss

Verify the presence of a ::after pseudo-element on a scraped webpage

I am facing a dilemma with a checkbox on my website that is described in the following HTML code: html = <div class="checkbox checkbox-success checkbox-block"> <input type="checkbox" data-false-value="'0'&qu ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

Tips for customizing the CSS file of a React component imported from a UI framework

As I embark on building a large application utilizing React, I find myself navigating the new territory of React philosophy coming from a background of Css+Js+jQuery methods. One key requirement for my project is a reliable UI framework that aligns with Go ...

javascriptcssreactjsmaterial-design

The images fail to load on Mozilla browser and appear as blank spaces

My images are only displaying as white in Mozilla but fine on other browsers. I've tried using -moz without success. It's a simple fix that I can't seem to locate. Any help would be appreciated. Just a quick note, the images appear blank wh ...

htmlcssbootstrap-4

Concealing the ellipsis in the will_paginate function of Rails

I'm currently utilizing will_paginate to manage a large number of values, but I am struggling to find a way to hide the "..." portion and the page numbers following it. Here is my current setup: https://i.stack.imgur.com/f2Tt8.jpg However, what I wou ...

htmlcssruby-on-rails