a fixed width layout with two columns aligned at the top

I've been struggling to design a two-column, top-aligned layout with fixed width for data that will be inserted into text in a WebView for an iPhone app. The first column needs to have a set width so the items in the second column can align perfectly.
I've attempted various solutions from Stack Overflow and other sources using HTML, CSS, or both, but each time I've come up short. The column width doesn't stay consistent, and the entries are not aligned at the top.

Here is an example of the content:

First Column:

Address  
Distance  
Ticket Price

Second Column:

12-26-3 Kami Itabashi, Itabashi-ku, Tokyo
23km   
350 Yen

This marks my debut question here, so please bear with me.

If needed, I can share my CSS style sheet as well.

htmlioscssembed

Answer №1

It seems like the question is a bit unclear, but here's a solution:

HTML

<div class="frame">
    <div class="l">
        <p>Address</p>
        <p>Distance</p>
        <p>Ticket<span>price</span></p>
    </div>    
    <div class="r">
        <p><span class="number">12-26-3</span>Kami Itabashi, Itabashi-ku, Tokyo  </p>
        <p><span class="number">23km</span></p>
        <p><span class="number">350</span>Yen</p>
     </div>    
</div>

CSS

p{
    height:20px;
    color:#000000;
    margin: 20px 0px;
}
.frame{
    width:310px;
    height:150px;
    background:#A0A0A0;
}
.number{
    color:#8D0000;
}
.l{
 float:left;   
}

.r{
    width: 220px;
    float:right;   
}

JSFIDDLE

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

Place a vertical slider adjacent to an HTML element on either the left or right side

I'm struggling to bind a range slider to the left or right side of a canvas that displays video. Despite my efforts, CSS seems to be putting up a strong fight. I can handle issues like stretching and slider values, but attaching it to the canvas is pr ...

javascripthtmlcsshtml5-canvasrange

Retrieve the data stored in the HTML input field prior to transferring it to the SQL database

Currently, I have a form where users input latitude and longitude coordinates, which are then used to create markers and send them to the MySQL database. However, I would like to update it so that users can input an address instead. I attempted to use the ...

htmlmysqlservergeolocation

What is the best way to manage classNames dynamically in React with Material-UI?

I am wondering how to dynamically add and remove classes from an img tag. My goal is to change the image automatically every 2 seconds, similar to Instagram's signup page. I am struggling to achieve this using the material-ui approach. Below is a snip ...

javascriptcssreactjsreact-hooksmaterial-ui

Is it feasible to incorporate two distinct images into a single element using CSS layering?

I have a question about setting a background image for a web page using CSS. Currently, I have the following code: body { font-size: 62.5%; /* Resets 1em to 10px */ font-family: Verdana, Arial, Sans-Serif; background-color: #9D5922; color: #000; margin ...

cssimagelayoutz-index

Adding dynamic elements to a pop-up window with the use of jQuery's .load() function

When implementing Javascript to create a modal, I have encountered an issue where the close button disappears. The modal opens and loads different HTML files dynamically using the jQuery load() method, but the close button vanishes. I suspect that the mod ...

javascriptjqueryhtmlajaxdom

`Finding the appropriate place to define a variable within a React Component`

When attempting to declare the variable images within the component, I encountered an error. See the screenshot for more information: here. ...

htmlreactjsjus

Ensuring consistency in aligning float elements

I've been struggling to create a concept design for my internship project. I aim to have a page with six clickable elements (images). When one is clicked, the others should disappear and the active one moves to the top. I managed to achieve this using ...

javascriptjqueryhtmlcss

Need to update various form fields at once with jquery?

There is a form with fields for firstname, lastname, email, country, along with edit icon and submit/cancel buttons. When the user clicks on the edit icon in the top right corner, all values will be displayed in textboxes and the country will be shown in ...

javascriptjqueryhtmlcss

Adjust the scroll position when the height of a div is modified

Imagine we have a large div A with a height value and below it are other divs B, C, and more. If the user is viewing divs B or C, and A reduces its height by half, the scrolling position will remain the same. However, divs B and C will move up by that amo ...

javascripthtmlcssvue.js

The appearance of responsive CSS is altered when deployed compared to when it is viewed on the

I'm a beginner in web development and facing an issue with my mobile CSS. The strange thing is that when I view it on localhost, everything looks great, but once deployed (tried both Heroku and GitHub), it appears distorted. Even when I make extreme c ...

javascripthtmlcssgithubfrontend

Tips for utilizing vulnerable web scripts on SSL-enabled pages

After implementing SSL to secure my pages, I encountered an issue where one of my scripts no longer functions properly. Specifically, I had a script on my page that was used to display the visit count from this website. Previously, it was functioning fla ...

phpjavascripthtmlweb-applicationsssl

Running nodejs scripts within my HTML and JavaScript code

Using express, I send an HTML file to incoming GET requests: app.get('/', function(req, res) { res.sendFile(path.join(__dirname + '/public/index.html')); }); Within that HTML file, I included another JavaScript file, script.js, us ...

javascripthtmlnode.jsexpress

What is the best way to showcase a blank div element using CSS?

Is there a way to make this empty div tag display without having to add &nbsp;? Can it be achieved using only CSS? <div class="bar bg-success" title="2015-07-23,5.0000" height="50%"></div> .bar { background: green; width: 5px; float ...

htmlcss

Utilize viewport activation to determine browser width

Is there a way to dynamically add the viewport-meta tag only for devices with screen widths larger than 680px? If the screen is smaller than 680px, then the responsive style file should be enabled instead. I attempted to achieve this by placing the follow ...

javascriptcssviewportresponsive

Dimming the background of my page as the Loader makes its grand entrance

Currently, I am in the process of developing a filtering system for my content. The setup involves displaying a loader in the center of the screen whenever a filter option is clicked, followed by sorting and displaying the results using JQuery. I have a v ...

javascriptjquerycssajaxhtml

Animating the maximum height causes a delay in the performance of other elements

Attempting to adjust the maximum height of a ul. When the max-height property changes (via toggling a class), the height shifts immediately, while the items below the ul maintain the animated height as expected. var expander = $('.skill-expand&apos ...

jquerycssanimationcss-transitions

How to implement multiple dependent select boxes in Rails?

I'm currently working on developing a car application where each car is assigned to a specific make and model. However, not all makes have every model available. My goal is to create a series of select boxes that update dynamically based on the selec ...

jqueryhtmlruby-on-railsajaxselect

Creating an Eye-catching Presentation: Tips for Adding Text to Your CSS3 Slideshow

I am currently in the process of creating a CSS3 slideshow with text for each image. I found inspiration from this example: . However, I made some modifications to make it responsive. Here is the HTML code I have used: <div id="slideshow"> < ...

htmlcss

Unable to stop page refresh following form submission or file upload

Is it possible to upload a photo with Ajax to Express and have the response generate desired HTML? Whenever I submit the form, it redirects me and displays the picture data as an object. Here's the Express code: const storage = multer.diskStorage({ ...

jqueryhtmlnode.jsajaxexpress

Place an image on top of adsense

Is there a way to overlay an image on top of Google AdSense ads in order to track user clicks? I am trying to implement an onclick method for when someone clicks on the ads. .ad-alert { width: 728px; height: 400px; background: #cccccc; mar ...

htmlcssadsense