Is there a workaround for ensuring that text can be displayed accurately alongside a div or span element?

I'm having trouble aligning my text next to a square div or span element.

I've experimented with using a div and floating the text, as well as trying a span with display: inline-block and display:block. Despite searching on Stack Overflow for solutions, nothing seems to work for me.

Here is the code snippet I am currently using:

.event-date{
background-color: #2C3846;
color: white;
width: 50px;
height: 50px;
margin: 20px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
}

.event-text{
  float: left;
}
<body>
  <div class="main-container">
    <section class="col-content">
      <main>
        <h1>Our Events</h1>
          <section>
            <div class="event-date">9<br>Apr</div>
            <h2 class="event-text">Discussion Meeting Europe</h2>
                <p class="event-text"><q>What does Europe mean concretely for me in my everyday life as...</q></p>
            </main>
          </section>
        </div>
      </body>

I would like the 'h2' and 'p' elements to be positioned next to the blue square representing the event date. This layout will serve as an event listing template.

htmlcss

Answer №1

If you have the main div containing both the date and text, make sure to add float: left; to the date div instead of the text class. Here's an example:

.event-date {
background-color: #2C3846;
color: white;
width: 50px;
height: 50px;
margin: 20px;
float: left;
text-align: center;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
}

.event-text {
  margin: 0;
  padding: 0;
}
<body>
<div class="main-container">
<section class="col-content">
<main>
<h1>Our Events</h1>
<section>
<div class="event-date">9<br>apr</div>
<br><h2 class="event-text">European Discussion Meeting</h2>
<p class="event-text"><q>What does Europe mean specifically for me, in my daily life as 
            ...</q></p>
</section>
</main>
</section>
</div>
</body>

I adjusted by adding float: left; to the date div, removing the padding and margin from the text (to fit better with the date space), and including a <br> to create some separation between the date and text. For further reference, here is a JSFiddle demonstration as well:

JSFiddle DEMO

Answer №2

To modify this, you simply need to make sure the date and text are displayed inline-block

.event-date, .event-text{
  display:inline-block;
}

If you prefer the date to be on the left side of the text, include float:left in the date's CSS.

Check out the JSFiddle Demo here

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

Is it true that Vue CLI3 app does not support HTML srcset and sizes attributes?

Has anyone encountered issues with using the HTML attributes srcset and sizes for responsive images in Vue-loader? I am trying to optimize performance and ensure responsiveness by serving specific images to certain screen sizes. If you have faced a similar ...

htmlvue.jsresponsive-designvue-loadervue-cli-3

Adding an item to the shopping basket using a hyperlink in JSP

As a beginner in JSP, I am attempting to incorporate products from viewProduct.jsp into a basket found in basket.jsp. To achieve this, I understand that it requires an appropriate hyperlink that directs to basket.jsp within viewProduct.jsp. In my attempt, ...

javahtmljsp

What is the best way to set the input type in AngularJS based on a variable?

Is there a way to dynamically set the input type based on another variable in AngularJS? I was considering using a directive that triggers from an onclick event to change the input type, but I'm not entirely sure. FIRST //loop <a class="orgTitle" ...

htmlangularjs

Is it possible to retrieve the value of a particular field from a table?

My goal is to create a table that displays data about various users awaiting admin approval. Each row represents a specific user, and when the approve button on a particular row is clicked, I want to open a new window displaying detailed user information f ...

javascripthtmlobject

jQuery Toggle and Change Image Src Attribute Issue

After researching and modifying a show/hide jQuery code I discovered, everything is functioning correctly except for the HTML img attribute not being replaced when clicked on. The jQuery code I am using: <script> $(document).ready(function() { ...

javascriptjqueryhtmlcss

Modifying paragraph content according to viewport width: a guide to dynamic content replacement

Is there a way to dynamically change the content of a specific paragraph based on the browser width? For instance, I want the paragraph with class '.main-lead' to display different content on mobile devices compared to tablets and laptops: <p ...

jqueryhtml

The column width in Bootstrap HTML is too excessive

var parentDiv = document.getElementById("cc"); var statementDiv = document.createElement("div"); var statementName = document.createElement("div"); // var removeIconDiv = document.createElement("div"); // removeIconDiv.className = "col w-25"; // ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Text does not wrap correctly when placed between elements with the property white-space: nowrap

When applying the white-space: nowrap property to all children of an element, an issue arises in Webkit (and blink) where white space doesn't break between elements as expected: View example on jsFiddle .pairs { width: 180px; overflow: hidde ...

cssgoogle-chromewebkitblink

Don't forget to keep track of when the user has closed

How can I ensure that the cache retains the user's action of closing the div? Currently, when I close the div and refresh the page, it reverts back to its original state. Is there a way to make this change persistent? Experience it live: Here is the ...

javascriptjqueryhtmlcsscaching

What is the best way to trigger an onclick event to call another function?

I am having trouble triggering an onclick function when a button on my site (with the id "rum_sst_tab") is clicked. I also need to execute another function that tracks a google conversion using gtag_report_conversion(). I attempted various jQuery options ...

javascripthtml

I need to extract the entire footer, including all HTML elements and text, using PHP's DOMXPath

I am looking to extract the footer content, including all HTML tags and text, using DOMXPath. Here is an example of the HTML structure: <div class="footer"> <div class="footer-new"> <div class="footer-additional"> <div class="add- ...

phphtmlxpathdomdocument

Leverage the functionality of Typo3 Powermail to automatically input form values from one page to another

I am currently developing a website with a simple form that includes an input field for entering an email address and a submit button in the footer. Clicking the button directs users to a contact page featuring a Powermail form, where the input field value ...

htmlformstypo3powermail

The connection to the Max CDN link for Font Awesome seems to be unavailable at the moment

Utilizing Font Awesome icons on my website has been a consistent practice. Lately, I've noticed that the link to the icons is broken or unreachable. Could there be an issue with their repository? I'm not even able to download static files from ...

htmlcssfontsfont-awesomecdn

displaying a pair of distinct elements using React techniques

I need help adding a react sticky header to my stepper component. When I try to render both components together, I encounter an error. To troubleshoot, I decided to render them separately. Surprisingly, when rendering separately, I do not get the "store is ...

javascripthtmlreactjsreduxmaterial-ui

Displaying a collapsible table directly centered within the table header

I am having trouble centering my table header in the web browser page. When I click the "+" button, the data is displayed beneath the table header, but I want the collapsible table to be centered directly below the header. I have tried making changes in CS ...

javascripthtmljquerycss

What is the best way to show a check mark when selecting a checkbox?

I have customized my checkbox to appear as a circle, and now I want to display a check mark when the user selects the checkbox. When I remove -webkit-appearance: none;, the check mark appears but my CSS stops working. Is there a way to achieve this witho ...

htmlcsscheckbox

Using jQuery, identify when a key has been pressed within a three.js environment

How can I detect a keypress within a designated scene contained in a div with the id "world"? I've written the following code in an attempt to achieve this, but it doesn't seem to be working properly. Here is the code snippet: $('world&apos ...

javascriptjqueryhtmlthree.jskeydown

Issue with fortawesome icon: relative and absolute positioning not functioning as expected

I have utilized a diamond symbol from the Fort Awesome icon collection and noticed that when I target the i tag in my CSS, the icon becomes highlighted (see screenshot attached). However, I am encountering issues with relative and absolute positioning not ...

htmlcss

Issue with Bootstrap 3 Modal: Missing Title and Input Labels

I'm currently working on customizing a bootstrap template for my friend's church website. My goal is to create a simple web presence for them, and I am in the process of setting up a contact form. I want this form to appear as a modal where users ...

javascriptjqueryhtmlcsstwitter-bootstrap

Images in emails do not conform to specified height and width parameters in Outlook

Here is the structure of my DOM in HTML content that I am including in an email. <a href="http://content.mindmatrix.net/email/814xjqjmpj5r/b59tqx7tzz2x7" target="_new"> <span style='text-decoration:none;text-underline:none'> <img ...

htmlcssoutlookwindows-live-mail