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

Unable to submit form using the submit button

Can anyone explain why the form won't submit in this scenario? I prefer not to use input type='Submit', but the function call seems to be working. <button onclick='submitForm()'>Save</button> function submitForm() { ...

jqueryhtml

Can a custom structural directive be utilized under certain circumstances within Angular?

Presently, I am working with a unique custom structural directive that looks like this: <div *someDirective>. This specific directive displays a div only when certain conditions are met. However, I am faced with the challenge of implementing condit ...

htmlangulartypescriptangular-structural-directive

Learn the art of animating "basic jQuery filtering" exclusively with CSS

Does anyone have suggestions on how to animate elements when filtered by JavaScript? The code I've tried so far doesn't seem to be working. Here's what I currently have: http://jsfiddle.net/ejkim2000/J7TF4/ $("#ourHolder").css("animation", ...

javascriptcsssortinganimationfiltering

Email confirmation section

I'm in the process of setting up a subscription newsletter page, and everything seems to be working correctly except for the part where I need users to enter their email address twice. The second email field is meant for confirmation purposes, but I&a ...

phphtml

How can I stack one column beneath two columns in a unique format?

I am looking to create a layout similar to the one depicted below. https://i.sstatic.net/m1aCj.png The window is represented by the red box, and the black boxes represent the <div> elements. I have attempted to arrange the image into two columns, bu ...

htmltwitter-bootstrapbootstrap-4

An easy way to enable mobility for BootstrapDialog on mobile devices

Currently, I am utilizing the library available at https://github.com/nakupanda/bootstrap3-dialog in order to create a dialog box. However, my issue arises when viewing the dialog on mobile devices where it exceeds the screen size. On desktops, adjusting t ...

javascriptcsstwitter-bootstrap-3bootstrap-modal

Introducing the new and improved SweetAlert 2.0, the ultimate solution for

I am currently utilizing SweetAlert2.0, known as "This One" <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> It is functioning properly; however, I would like to display a table, div, or HTML element within this swe ...

javascriptjqueryhtmlcss

When clicked, elevate the element to the top of the window with an offset

Is there a way to click on this button, which is located within an accordion section header, and have it automatically move to the top of the page based on the window size? It seems like it should be a simple task, but sometimes after a long day things ca ...

javascriptjqueryhtml

Acquiring the value of an input box in VBA through HTML

Can someone provide guidance on how to retrieve the value from an input box on an Internet Explorer page using VBA? I have tried various solutions but none seem to work. Below is the HTML code I am working with. I specifically need the value of the bolded ...

htmlvbainputbox

Adjust picture to fit in div and align vertically

JSFiddle In my fluid layout, I have a div with a required aspect ratio of 1:1. This div can contain text, an image, or both. The challenge is to vertically align the text and ensure the image fits within the div without exceeding its boundaries or losing ...

css

What is the best way to apply a class to the grandparent div of an element in AngularJS?

Currently, I have a dynamically generated list of tests: <script id="TestsTemplate" type="text/ng-template"> <article class="tests-main"> <section class="tests"> <div class="test" ng-repeat="test in ...

javascripthtmlangularjs

What is the best way to add a checkbox tag in Rails using JavaScript?

I am attempting to use javascript to append the values from option fields to checkboxes in Rails. Here is a snippet of my javascript code: $("#regions option").each(function(){ $("#region-checkboxes").append('<li><%= check_box_tag "region ...

javascriptjqueryhtmlruby-on-railsruby

What are the steps to create a CSS grid like this?

Any suggestions on how to create a grid template similar to the image shown in this picture? I am looking to achieve this design without rounded borders and without any gaps between the elements. ...

htmlcssgridcss-grid

Validating radio buttons with JQuery for multiple sets of options

My form originally only submitted one out of eight radio buttons to a PHP $_POST super global array, so I needed some validation. Thankfully, I received help with this code: $("#form").submit(function (event) { if(!$(":radio:checked").length) ...

phpjqueryhtmlforms

How to Use Laravel to Create HTML Divs Without Images

While working with a text editor, we have the ability to incorporate various HTML tags such as images and videos. However, I am only interested in displaying text fields. When I use {{$loop->content}}, it displays: <p><strong>EXAMPLE</st ...

htmlcsslaravellaravel-5

Obtain a masterpiece by creating a canvas in React

Greetings! I have developed a drawing app using react and I am looking for a way to capture what the user has drawn on the canvas when they release the mouse button. This process should repeat continuously until the user stops drawing. Can anyone suggest h ...

javascriptcssreactjscanvas

Tips for personalizing tooltips in Bootstrap 4

Currently, I am utilizing Bootstrap '4.0.0-alpha.6' and attempting to customize the tooltip styles. Despite adding a custom CSS class along with using Bootstrap 4, the tooltip is not responding correctly to my specified style when hovering over. ...

csshtmltwitter-bootstrap

Understanding the fundamentals of positioning elements in CSS as they float on a webpage

Understanding the behavior of float in CSS can be confusing. When floating an element to the left or to the right, it affects how other elements wrap around it. But why do some elements wrap while others don't? For example, when you have a floated im ...

csscss-float

Chrome page loading with smooth color transitions

Setting global colors on links and transitions on their color: a { color: blue; transition: color 300ms linear; } Later in the code, there's more specific styling for links in the navigation: nav a { color: red; } nav a:hover { color: black; } ...

cssgoogle-chrometransition

Is it possible to stack divs horizontally in a liquid layout while allowing one of the widths to be dynamic?

This is the code snippet and fiddle I am working with: http://jsfiddle.net/hehUt/2/ <div class="one"></div> <div class="two">text here text here text here text here text here text here text here text here text here text here text here te ...

csscss-float