Inline CSS not displaying properly

I prefer my code to be displayed like this:

Name1      
Name2 Jim

However, it is currently displaying like this:

Name1 Name2  Jim

Is there a way to change it so that it matches my preference?

CSS

.display-left {
     float: left; 
     width: 200px; 
     text-align: left; 
     font-weight:bold   
}

.display-right {
     text-align: left;
}

HTML

<div class="display-left">Name1:   </div>
  <div class="display-right" > </div>
</div>
<div>
  <div class="display-left">Name2: </div>
  <div class="display-right">Jim </div>
</div>
htmlcss

Answer №1

To easily resolve the layout issue, simply include a clear:left; in your .display-left class and add a float:left; to your display-right class.

Click here for an example

.display-left {
    float: left;
    width: 200px;
    text-align: left;
    font-weight:bold;
    clear:left;
}

.display-right {
    text-align: left;
    float:left; 
}

The use of the "clear" property indicates where floating elements are not allowed.

If each "row" is wrapped in a div, you can apply a new class to those divs that will clear the float.

Check out this updated example

Answer №2

To make it function properly, consider adding the following code to your .display-left class: display: block;. Give it a try!

Answer №3

To ensure that .display-right takes up the whole line, simply add display:block. This instructs the HTML to allocate the entire line to this element. While using <br> tags can work for a single instance, it becomes inefficient for recurring cases.

Another option is to include clear:both; in the styling of .display-right. By doing so, you communicate to the HTML to "break out of the float and consistently position below it."

Answer №4

To achieve the desired result, insert a <br> tag in your HTML code after "name1" but before "name2". Another option is to use <p></p tags.

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

Using Python's BeautifulSoup library to extract tables from archived HTML webpages

I'm currently working on extracting data from saved HTML webpages using Python 2.7 + Windows. There are several similar saved HTML webpages, each containing a table with 5 columns and an unspecified number of rows. The source code appears as follows ...

pythonhtmlbeautifulsoupextract

Achieving the extraction of a particular string from an HTML element using JavaScript

<input id="WD01B3" ct="CB" lsdata="{2:'WD01B4',4:'Any',20:'\x7b\x22WDA_TYPE\x22\x3a\x22DROPDOWN_BY_KEY\x22,\x22WDA_ID\x22\x3a\x22ABCA950297D2C0C432BAB9BB ...

javascripthtmldom

Using Jquery for conditional statements: if versus else

$("#bottomWatch").click(function(){ var doops = $(".videoMove").display; if (doops == "none") { $("#video").css("left","15%", "display: block"); } else { $(".videoMove").cs ...

jquerycssif-statement

Break up the content in table cells with a new line character

How can I get a string containing a new line character to wrap in a table cell? When I attempt to bind it, the text does not break at the new line character as expected. I have attached a screenshot for reference. In the console window, it displays correct ...

css

Is it possible to utilize WebMatrix for hosting a website?

Is it possible to utilize Webmatrix for publishing and editing websites? I am currently using Weebly and getting tired of logging in and out to make changes. Can I edit my website with Webmatrix and publish it directly from there? ...

javascripthtmlcsswebmatrix

Center image and text horizontally within a div, with padding surrounding them

CSS Challenge <div id="container"> <img src="1.jpg" /> <span>text next to image</span> </div> Can you apply CSS to center the image and span within the div container, with a 5px padding between the image and spa ...

css

Looking for a smart way to extract all the selected elements from a form?

I am attempting to retrieve all the checked items from this form using JavaScript. I have looked at previous solutions, but none of them fit my requirements. <form id="checkform" class="container" style="margin-top:20px;"> <input type="checkb ...

javascriptjqueryhtml

What is the best method for showcasing two images side by side in a column layout?

I need to showcase 2 images in a row using AngularJS, with the next two images in the following row and so forth. Img1 Img2 Img3 Img4 This is my code: <section id="content"> <div class="content-wrap"> <div class="container clearfix "& ...

htmlcssangularjstwitter-bootstrap

Is it better for a browser to request only one stylesheet or all CSS files (including those imported in the main stylesheet)?

When attempting to use the "@import" rule to import multiple CSS files into a single "style.css" file that is then linked in the main HTML file, I noticed only the styles from the "style.css" file were being applied when inspected using Firebug. I am curio ...

htmlcss

Text font automatically adjusts size in Chrome on Android

It seems that when a paragraph of text reaches a certain length, Google Chrome on Android decides to resize the text and make it larger (which can cause some interesting results). I've noticed that on my website, about half of the p-tags stick to the ...

androidhtmlcssgoogle-chromefont-size

What is the best way to align the bottom of an anchor element with the bottom of an SVG element when positioning them together

I am working on a test website where I am trying to create an interesting visual layout. My goal is to place an SVG image in the background, with an anchor element and other elements laid out above it. The challenge I am facing is aligning the bottom of th ...

htmlcsssvganchor

Video background function that mimics CSS's background size cover for a specific element, instead of the entire webpage

In the process of developing a new website, I am looking to incorporate a large splash background as a "hero" image. Similar to the website found at , I am hoping to use a video as the background image showing a woman unloading a car. One key requirement ...

htmlcssresponsive-design

The division element shifts to the left upon invoking the slideUp() function

I am currently working on a page that contains a form with two different sections - one is visible and the other is hidden. When the user clicks a button in the first section, it slides up using slideUp() while the hidden section slides down using slideDow ...

javascripthtmljquerycss

What is the best way to eliminate excess elements from overflow:hidden?

Whenever I click on a modal, it changes my body to overflow:hidden. As a result, the scrollbar disappears and my page becomes unscrollable. Once I close the modal, my body reverts back to overflow:auto allowing the page to scroll again. These functionaliti ...

javascripthtmlcss

Remove all Visual Composer Shortcodes while preserving the content

I'm in the process of transferring 200 posts from a previous WordPress website, which contain numerous visual composer shortcodes within the content. Is there a method to remove all the shortcodes and retain the content? ...

javascriptphphtmlwordpressvisual-composer

What steps do I need to take in order to arrange my cards into binary groups for PC viewing

Is there a way to display cards as binary groups for PC view? The layout looks fine on phone but the cards are all at the bottom when viewed on a computer. This is how it currently appears: https://i.sstatic.net/XBgJc.jpg I want the card layout to resem ...

htmlcss

What is the best way to utilize an accordion feature to display collections of documents?

My request: 1. Retrieve data from a MongoDB collection and display it in an accordion format on a webpage. 2. Ensure that the active ID of the selected HTML accordion tag matches the document ID from the collection. 3. Implement a dropdown transition ...

javascriptjqueryhtmlmongodbmeteor

Adjust the position of a div when the div above it expands

Text is displayed with a toggle button for icons. Beneath the text, there's a pagination div with a top margin set to position it correctly below the text. However, even though it follows the text in the HTML, it appears at the left corner of the main ...

jqueryhtmlpositiontoggle

The background hue contracts as the window size changes

I am encountering an issue. The appearance of my page is not matching what I had envisioned. *{margin:0; padding:0;} .width{width:980px;margin:0 auto;} .header{width:100%;background-color:#ffffbb;} .leftpanel{float:left;height:50px;} .rightpanel{float:r ...

htmlcss

"Utilizing a flexible grid system in Bootstrap to create 2 or

I am looking to create a layout with a variable number of columns using row span. Specifically, I want 3 columns on XS, 2 columns on SM (with the first 2 columns stacked on top of each other), and 3 columns on LG. I am unsure how to make the row span respo ...

csstwitter-bootstrap