Styling a playbook using CSS Grid management techniques

Exciting to create a playbook layout style, here's how it goes:

       Name: Text starting here - unique style #1
             text that moves to a new line with a different look - unique style #2
             more text continuing on another new line - unique style #1

Longer Name: Text starting here - unique style #1
             text that moves to a new line with a different look - unique style #2
             more text continuing on another new line - unique style #1

The challenge lies in getting the style #2 text to start on a new line.

This is the code I'm using:

<div class="line">
  <div class="level1">
    <div class="name" >name:</div> 
      Text starting here - unique style #1 
      <span>text which should go in a new line with different style #2</span> 
      text continue here with another new line - unique style #1
    </div>
  </div>

<style type="text/css">
.line {
    text-align: right;
    font-size: 14px;
    width: 477px;
    margin: 0 auto;


}

.level1 {
    display: inline-flex;
    font-size: 14px;
    line-height: 12px;


}

.name {
    display: inline-block;
    font-size: 14px;
    width: 40px;
    min-width: 50px;
    text-align: left;
    margin-left: 15px;


}

</style>

Despite setting these values, Style #2 always breaks into a new column rather than a new line. You can view an example on jsfiddle. It seems like "flex-inline" might be causing this issue. Are there any alternatives for this?

htmlcssflexbox

Answer №1

Use this snippet for assistance.

<div class="section">
    <div class="block1">
        <label class="title" >Title:</label> 
        <p>
            Start of the text - style A <br>
            Text to be displayed on a new line with style B <br>s
            Continue text here with a different line - style A
        </p>
    </div>
</div>

<style type="text/css">
.section {
    font-size: 14px;
    width: 477px;
    margin: 0 auto;
}

.block1 {
    display: inline-flex;
    font-size: 14px;
    line-height: 12px;
}

.title {
    display: inline-block;
    font-size: 14px;
    width: 40px;
    min-width: 50px;
    text-align: left;
    margin-left: 15px;
}
</style>

Answer №2

To ensure your elements are aligned to the right, consider implementing the following code snippet. Keep in mind that you may need to adjust for various screen sizes.

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: 0;
}

.main {
  margin: 1px;
  border: 1px solid;
  padding: 10px;
  display: inline-block;
}

section {
  margin-bottom: 5px;
  text-align: right;
  border: 1px solid red;
  padding: 10px;
}

section>.name {
  border: 1px solid;
  padding: 5px;
  display: inline-block;
  vertical-align: top;
}

section>.content {
  border: 1px solid;
  padding: 5px;
  max-width: 100%;
  display: inline-block;
  text-align: left;
}
<div class="main">
  <section>
    <div class="name"> name:</div>
    <div class="content">
      <p>Text starting here - style #1 </p>
      <p>text which should go in a new line with different style #2</p>
      <p>text continue here with another new line - style #1</p>
    </div>
  </section>
  <section>
    <div class="name">Longer name:</div>
    <div class="content">
      <p>Text starting here - style #1 </p>
      <p>text which should go in a new line with different style #2</p>
      <p>text continue here with another new line - style #1</p>
    </div>
  </section>
  <section>
    <div class="name">Much Longer name:</div>
    <div class="content">
      <p>Text starting here - style #1 </p>
      <p>text which should go in a new line with different style #2</p>
      <p>text continue here with another new line - style #1</p>
      <p>text continue here with another new line - style #1</p>
      <p>text continue here with another new line - style #1</p>
    </div>
  </section>
  <section>
    <div class="name">A really Longer name:</div>
    <div class="content">
      <p>Text starting here - style #1 </p>
      <p>text which should go in a new line with different style #2</p>
      <p>text continue here with another new line - style #1</p>
    </div>
  </section>
</div>

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

Creating an interactive map using Python with Folium, incorporating a draggable legend and clickable items for users to easily zoom into specific locations

Looking to create an interactive map with python folium package. Need icons for locations and a draggable legend that allows for repositioning by mouse drag. Also need ability to click on legend items to zoom into corresponding locations on the map. Can s ...

htmlpython-3.xfoliumfolium-plugins

The page is present, but unfortunately, the content is displaying a 404 error. I am considering using Selenium to retrieve

Is there a way to use Selenium webdriver to download images from a dynamically updated website, like this site? Every day a new page is created with images uploaded around 6 pm. How can I retrieve these images using Python and Selenium? url = 'http:/ ...

pythonhtmlseleniumselenium-webdriver

Tips for creating a clickable title that directs to a URL

I am currently using the "Import All" WordPress plugin to bring in an Excel file containing numerous hyperlinks that point to specific Custom Post Types and a designated field. These hyperlinks are separated by commas from the corresponding title. For exam ...

phphtmljquerycsswordpress

Issue with sending an ajax post request using Jquery

The jquery ajax request below is not working as expected: $(document).ready(function(){ var friendrequest = $(".friendrequest").val(); $(".afriendreq").click(function(){ $(".afriendreq").hide(); ...

htmlajaxjquery

What are some ways I can make my content come alive on my website using the Tympanus examples

After spending hours searching for a way to add animation to my content, I finally found a technique that seemed promising. Despite following the same steps as outlined in the tutorial I found, I was disappointed to discover that there was no animation o ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Can one image impact other images through a wrapping function?

I am facing an issue with positioning 3 images independently from the window size using the position: relative declaration. When I try to define positions for the first 2 images and then insert the third one, it disrupts the position of the first two. Is ...

jqueryhtmlcss

werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The server is unable to process the request sent by the browser or proxy. This error occurred in a Flask web application

Can someone guide me on troubleshooting this issue in Flask? I am still learning. Server running at (Press CTRL+C to exit) 127.0.0.1 - - [26/Jul/2020 11:19:45] "GET /predict HTTP/1.1" 500 - Traceback (most recent call last): raise exceptions. ...

pythonhtmlcssflaskpython-requests

Designing a uniquely shaped button

Is there a way to design a button with a slightly irregular shape? The current CSS for my button creates a basic rectangle like this: .btnclass { width:100; height:40; } However, I would like it to have a more unique appearance such as this: ...

css

I'm feeling lost trying to figure out how to recycle this JavaScript function

Having an issue with a function that registers buttons above a textarea to insert bbcode. It works well when there's only one editor on a page, but problems arise with multiple editors. Visit this example for reference: http://codepen.io/anon/pen/JWO ...

javascriptcss

Determining the Size and Color of Squares in a Treemap Based on Content with D3.js

I encountered an issue with a treemap visualization. I came across an example that is similar to my situation, which can be viewed here: In the demo, you can see that the size of each square in the treemap is determined by the content size. However, all s ...

javascriptjquerycssd3.jstreemap

Having trouble with HTML code displaying correctly in R leaflet for labels instead of popups

While working with leaflet in R Studio, I encountered an issue when trying to add HTML code to the labels of the icons. Strangely enough, it works for the popups but not for the labels. Below is the code snippet causing the problem: library(leaflet) libr ...

htmlrleaflet

Produced inputs and preset values

I have a question regarding the use of generated input elements in my App's form. I want to keep it as simple as possible, which is why I am using native form reset for these elements. It appears that the 'default value' becomes bound to th ...

javascriptjqueryhtml

Showing the outcome of the AJAX call

I have searched extensively for information on how to use AJAX, but I have been unable to find a resource that clearly explains the concept and its workings. When I send an AJAX request to a PHP file using the code below, I can see the response in Mozilla ...

javascriptphphtmlajax

Remove HTML element and launch in a separate browser tab while preserving styles

I am currently working on developing a single-page application with Polymer3 (Javascript ES6 with imports). One of the key functionalities of my application involves moving widgets to new browser windows, allowing users to spread them across multiple scree ...

javascripthtmlwebecmascript-6polymer

CSS Alignment in React with Material UI

Is there a way to align one button to the left while centering the other two? To see an example in Codesandbox, please visit HERE <DialogActions sx={{ justifyContent: "center" }}> <Button>Left</Button> <Button on ...

cssreactjsmaterial-ui

"Emphasizing the Html.ActionLink menu for improved user navigation and

Currently, I am facing an issue with my menu. I want to clear previously visited links while keeping the current one styled as a:visited in CSS. Although I have attempted to achieve this, unfortunately, the code is not functioning properly. Here is what I ...

javascriptjquerycss

Is Next.js compatible with CSS caching?

I'm currently working on a project with Next.js (version 12.1.0) and SCSS modules. I've noticed that my CSS seems to be caching extremely aggressively, requiring me to restart the server (npm run next dev) in order to clear it. Has anyone else en ...

javascriptcsssassnext.js

The iframe is not adjusting its size in relation to the parent window

For more information, click here: http://jsfiddle.net/5HYve/ <div style="position: fixed; top:0; right:0; width:300px; height: 100%; text-align:justify; overflow:hidden;" class="chat-container"> <iframe id="chat_1" style="width:300px;height:1 ...

htmlcssiframeresize

By including "on click" as a trigger, child nodes in the (_hyperscript) can be activated

Currently, my goal is to design a menu that keeps track of whether the user has expanded or collapsed a menu item and its sub-menu items. The issue I'm facing is that the "_"on click"" event gets "attached" to all child elements. I have sco ...

htmlhyperscript

The problem with clearing floats in IE7 (as well as 6)

Currently, I am facing an issue where I have a list that I want to split into three columns by using the float left property and then clearing the first column. Everything seems to be working fine in IE8 and FF, however, IE7 is causing the second column t ...

cssinternet-explorer-7