I am looking for two divs or table cells to float alongside each other, with one set to display:inline and the other expanding to fill the remaining space of the row

What I desire:

My current accomplishment:

I successfully floated both DIV tags side by side and also experimented with tables. My goal is to have the HR line fill the remaining horizontal space that the title does not occupy.

However, I prefer not to use fixed nor percentage widths.

I have exhausted most of my knowledge trying different approaches such as table cells. The effect I am aiming for is akin to using display: inline with headers, where it prevents full width expansion and allows the table to wrap around it, leaving the HR table cell to occupy the rest of the row.

Please find below a snippet of code which only includes relevant parts pertaining to tables:

 .certificatetitle { font-weight: 100; font-size: 16px; }

 .collapsed .line { height: 40px; }
 .line { height: 40px; }
 .line hr { color: #f69f1a; background-color: #f69f1a; border-color: #f69f1a; height: 1px; }


<table class="certificatebar" height="40px">
    <tr>
        <td class="certicon" width="30px"></td><td class="certificatetitle">Microsoft Office</td><td class="line"><hr /></td><td class="dropdown" width="20"></td>
    </tr>
</table>
htmlcss

Answer №1

This method allows you to achieve the desired design using only one element, maintaining semantic integrity and ensuring easy maintenance in the future.

Visit this link for more details.

<h1>Microsoft Office</h1>

h1 {
    /* Add "door" logo image as background here */
    position: relative;
    overflow: hidden;
}

h1:before { /* Element holding the carrot image */
    position: absolute;
    display: inline-block;
    content: ' ';
    right: 0;
    top: 50%;
    margin-top: -15px; /* Half of the height */
    width: 30px; /* Width of the background image */
    height: 30px; /* Height of the background image */
    background: url(http://placehold.it/30x30) no-repeat white;
}

h1:after { /* Element creating the `hr` effect */
    display: inline-block;
    content: " ";
    border-bottom: 1px solid goldenrod;
    width: 100%;
    margin-right: -50%;
    vertical-align: middle;
}

Answer №2

Maybe this solution could be of assistance to you:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style>
        table.certificatebar { width: 100%; }
        .certificatetitle { font-weight: 100; font-size: 16px; }
        .collapsed .line { height: 40px; }
        .line { height: 40px; width: 100%; }
        .line hr { 
            color: #f69f1a; 
            background-color: #f69f1a; 
            border-color: #f69f1a; 
            height: 1px;
        }
    </style>
</head>
<body>
<table class="certificatebar" height="40px">
    <tr>
        <td class="certicon" width="30px"></td>
        <td class="certificatetitle">Microsoft&nbsp;Office</td>
        <td class="line"><hr/></td>
        <td class="dropdown" width="20"></td>
    </tr>
</table>
</body>
</html>

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

Chrome Bug with Fixed Position Background

Just finished creating a website that features fixed images as backgrounds with text scrolling on top of them. I've noticed an issue when using Chrome - the scrolling stops briefly between backgrounds, pauses for about a second, and then resumes. I&ap ...

htmlcssgoogle-chromescroll

The image shape at the bottom of the screen may disappear on certain resolutions

I've added a unique curvy shape at the bottom of the image on a bootstrap card I designed using bootstrap 5. Everything looks great on resolutions above 1400px, but on smaller screens, the shape disappears, leaving the image rectangular. I've tri ...

htmlcssbootstrap-5card

Ways to eliminate the .html extension when someone accesses your static website

My current setup involves a static website being served by nginx. For example, when visiting www.mydomain.com, it displays as www.mydomain.com/index.html. Is there a way to avoid the trailing .html and have www.mydomain.com/index displayed instead? I&ap ...

htmlnginx

Issue with the formatting of the disabled button

I am facing an issue with styling a disabled button. Whenever I try to apply custom styling, it reverts back to the default styling. I have already cleared my cache but the problem persists. The button is disabled using JavaScript with document.getElementB ...

css

Transition delays in Tailwind CSS when dark mode is activated

My dark mode toggle is functioning with the following CSS: :root { --primary: var(--white); } .dark { --primary: var(--black); } However, when I include the following code: * { @apply transition-colors duration-700; } The background colors of ...

csstailwind-css

Using AJAX in a loop iteration

I am struggling to grasp AJAX and its application for my specific needs. I am required to incorporate ajax calls within a foreach loop in my project. The challenge arises when contemplating the scenario where using PHP calls could result in all actions fir ...

phphtmlajaxwordpress

I am encountering an issue where my codeigniter controller is unable to load my model

Below is the code for my controller: defined('BASEPATH') OR exit('No direct script access allowed'); class Welcome extends CI_Controller { function __construct() { parent::__construct(); $this->load->model('User_model') ...

phpjqueryhtmlcsscodeigniter

The alignment of Material-UI Button and ButtonGroup is not consistent

I'm puzzled as to why the Button and ButtonGroup elements are not aligned on the baseline in the code snippet provided. Is there a specific property that can be adjusted on the ButtonGroup element to achieve alignment? <!DOCTYPE html> <htm ...

cssreactjsmaterial-ui

Tips for adding a border to a 3D pie chart in Highcharts

I created a 3D pie chart using the Highchart plugin and wanted to add borders to each portion. I tried adding the following code: borderWidth: 4, borderColor: "red" within the plotOptions: pie: section. However, I noticed that the portions were getting b ...

javascriptjqueryhtmlcsshighcharts

Using the <!DOCTYPE html> tag seems to cause issues with the measurements of div elements

Currently in the process of developing a website, I created this div: #container #content .imagewindow { width: 560; height: 380; background-color: #1E1640; } After adding the doctype html tag, the browser appears to be disregarding my styling commands ...

csshtmldoctype

Modifying text input in Angular

I am working on an Angular form that includes a text input which I would like to be able to edit by clicking on the edit button. Within the form, there are 3 buttons available: edit, cancel (which discards changes), and save (which saves changes). When t ...

htmlangularangular-materialangular11

Tips for setting up styles for h:panelgrid in JSF

When using a simple h:panelGrid to display a table, how can I specify styles for the table to enhance its appearance? I have been researching online but am feeling overwhelmed by all the information available. <h:panelGrid id="panel" columns="2" cellp ...

cssjsfjsf-2

Generate a list of users using Angular in an efficient manner

I am working on creating a user list similar to the image provided below. I am using Angular and Bootstrap for the basics of this project. However, my concern is how to efficiently handle a large number of users. If the user count exceeds 10k, what would b ...

angularjshtmltwitter-bootstrapmongodbexpress

jquery and radio button technology

I am attempting to create a basic function using jquery, but it is not functioning properly. Here is the radio button in question: <input type="radio" id="price" name="shipping" class="styled" /> In the head section of my HTML, I have included the ...

phpjavascriptjqueryhtmlajax

When using Vue with CSS3, placing an absolute positioned element within a relative wrapper can cause issues with maintaining the

Just starting out with Vue and diving into the world of CSS3! I'm currently working on a component that you can check out here: https://codesandbox.io/s/yjp674ppxj In essence, I have a ul element with relative positioning, followed by a series of di ...

javascriptcssvue.jsvuejs2vue-component

"Preventing scrolling in Safari with CSS overflow:hidden isn't working as expected

Why does overflow: hidden on the body tag not disable scrolling on the page in Safari? It works in Chrome but not in Safari. I'm struggling to find a solution. Can anyone help? ...

cssreactjssafarioverflow

Stopping the <nav> element from displaying as "unlabeled section" on HTML5 webpages

As I work on incorporating proper sectioning in HTML5 with sectioning elements and headlines to meet my customer's design goals (while adhering to certain restrictions), I have encountered a challenge. The basic layout requested is as follows: <b ...

htmlnavigationsemanticsnav

Utilizing a Web Interface for Remote Monitoring of Windows Servers

I am in need of creating a webpage that will indicate whether a server is currently operational or not. These servers are all Windows based, with some running on 2008 and others on 2003. They are spread across different networks within various client locat ...

javascriptphphtmlsnmp

The total sum displayed after decoding JSON always varies in count

I am a beginner when it comes to using APIs and I am facing an issue with counting the data and displaying it in an HTML view. When I use count($data) to count it in the HTML view, the result is different from the actual data received from the API. Below a ...

phphtmljsoncodeigniter

Exploring the world of animation with Jquery and images

I'm delving into the world of jQuery to create some captivating animations. Currently, I've been tasked with an assignment involving images that expand, contract, change opacity, and eventually hide. Below is my code snippet: function play_pic1 ...

jqueryhtmlcss