Is there a way for me to align my div with my header on the same line?

Question

Is there a way for me to align my div with my header on the same line?

HTML:

<h2> RAN shares false news story about Hershey's Oil Commitment</h2>   
<div class="date">  
<div class="number">27</div>
<div class="month">Oct</div>  </div> 
<p>The Rainforest Action Network circulated a fabricated news report regarding Hershey's Oil   
Commitment. The report claimed that Hershey would eliminate palm oil from all their products, and 
several news outlets were fooled by it, including Hershey's local newspaper. In addition to this, members of RAN crashed Hershey's Halloween celebration with a unique orangutan! 
<a href="hershey.html">Curious for more details?</a> </p>

CSS:

.date {
  width:50px;
  height:50px;
  background-color:orange;
  border-radius:1em;
  margin-left:75%;
}

.number {
  color:white;
  text-align:center;
}

.month {
  text-align:center;
  background-color:#E68A00;
  color:white;
}

h2 {
  font-size:1.2em;
  color:#007e7e;
}

I am attempting to align the date and news article title on the same line. Here is the current layout:

css html

Answer 1

Answer №1

Combine the date and title in a single container and align them to the left with a clearfix to prevent sizing problems.

Alternatively, position them relatively by specifying left/top values.

Answer 2

Combine the date and title in a single container and align them to the left with a clearfix to prevent sizing problems.

Alternatively, position them relatively by specifying left/top values.

Answer 3

Answer №2

Check out this simple fix: within your CSS

h2{
    float: left;
}
.date{
    float:right;
}
p {
    clear:both;
}

By floating the h2, it disrupts its normal flow. When you then float the .date element, it also gets pulled out of its natural HTML flow, causing it to be positioned next to the h2. The clear: both; property prevents the paragraph text from overlapping and filling any remaining space, ensuring that everything remains in its original position.

Answer 4

Check out this simple fix: within your CSS

h2{
    float: left;
}
.date{
    float:right;
}
p {
    clear:both;
}

By floating the h2, it disrupts its normal flow. When you then float the .date element, it also gets pulled out of its natural HTML flow, causing it to be positioned next to the h2. The clear: both; property prevents the paragraph text from overlapping and filling any remaining space, ensuring that everything remains in its original position.

Answer 5

Answer №3

To achieve the desired layout, apply float:left to the h2 element and float:right to the .date class. You can see an example implementation here: http://jsfiddle.net/ABCD5/3/

<h2> Breaking news: Hershey's oil commitment exposed as fake! </h2><div class="date">
<div class="number">27</div>
<div class="month">Oct</div>  </div> <br><br>
<p>A fabricated report by the Rainforest Action Network claimed that Hershey would be eliminating palm oil from all products. Several news outlets were fooled, including a local newspaper. Additionally, RAN members crashed Hershey's Halloween event with an orangutan!
<a href="hershey.html">Curious for more details?</a> </p>




.date {
float:right;
width:50px;
height:50px;
background-color:orange;
border-radius:1em;
}

.number {
color:white;
text-align:center; }

.month {
text-align:center;
background-color:#E68A00;
color:white; }

h2 {
    float:left;
font-size:1.2em;
color:#007e7e; }

p {
clear:both;
}

http://jsfiddle.net/ABCD5/3/

Answer 6

To achieve the desired layout, apply float:left to the h2 element and float:right to the .date class. You can see an example implementation here: http://jsfiddle.net/ABCD5/3/

<h2> Breaking news: Hershey's oil commitment exposed as fake! </h2><div class="date">
<div class="number">27</div>
<div class="month">Oct</div>  </div> <br><br>
<p>A fabricated report by the Rainforest Action Network claimed that Hershey would be eliminating palm oil from all products. Several news outlets were fooled, including a local newspaper. Additionally, RAN members crashed Hershey's Halloween event with an orangutan!
<a href="hershey.html">Curious for more details?</a> </p>




.date {
float:right;
width:50px;
height:50px;
background-color:orange;
border-radius:1em;
}

.number {
color:white;
text-align:center; }

.month {
text-align:center;
background-color:#E68A00;
color:white; }

h2 {
    float:left;
font-size:1.2em;
color:#007e7e; }

p {
clear:both;
}

http://jsfiddle.net/ABCD5/3/

Answer 7

Answer №4

h2 {
font-size:1em;
color:#003366; 
float:left;
}

Implement a left float to the header - this will result in the following div floating to the left on the same line as the h2.

You could alternatively apply a right float to the div, but this will position the div at the far right within its container.

Answer 8

h2 {
font-size:1em;
color:#003366; 
float:left;
}

Implement a left float to the header - this will result in the following div floating to the left on the same line as the h2.

You could alternatively apply a right float to the div, but this will position the div at the far right within its container.

Is there a way for me to align my div with my header on the same line?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

When verifying the source, the empty() function does not eliminate any HTML content

Top strategies for avoiding element tampering

Changing Ionic Column Widths Based on Content Length

Activate vertical scrolling in JavaScript when an image is clicked

I am interested in creating a text box that has the ability to gather user input and connect it to a search

Why is this specific element showing as undefined in the form during editing, but appearing correctly in both the debugger and console.log?

The Bootstrap navigation menu is functioning properly when opening, but has an issue when attempting

Determining the pageY value of a div element with overflow-y styling

Trouble with downloading a file from an HTML hyperlink

Placing a div underneath a different element on a webpage

Hovering into Transition Time

Adjust the border hue of the MUI disabled outline input

The <h> tag gains height on its own accord

SQL Delete rows from Table

JavaScript combined with a dynamic menu, a customized current link style using CSS, and a site built on PHP

When interacting with elements with the "user-select: none" property, WkWebView still allows text selection

The functionality of the jQuery program is compromised when used on the Google Chrome browser

Aggregate the data entered into input fields on one page and display them on a separate page

"Gone in a Scroll: Div vanishes as page moves

Arranging data into columns using HTML and CSS