Leverage Bootstrap to apply margins to a container

I'm creating a new blog platform and I need some advice on how to properly position the blog post div in relation to the date div so it displays with the appropriate gaps. https://i.stack.imgur.com/oLbCq.jpg

https://i.stack.imgur.com/CqV7b.png

Here's the code snippet I currently have:

<div class="container post">
<div class="date">
<h3>20</h3>
<h5>november</h5>
</div>
Lorem ipsum dolor sit amet
</div>

.post{
margin-top: 40px;
padding: 10px;
color: white;
background: black;
border: 3px white solid;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
position: relative;
}

.date {
position: absolute;
    border: 2px white solid;
    width: 55px;
    height: 50px;
    left: -40px;
    background: black;
}

.date h3{
position: relative;
    top: -18px;
    left: 11px;
}
.date h5{
position: relative;
    top: -28px;
    left: 2px;


}

If you could offer any assistance on this matter, specifically how to ensure the blog post aligns correctly with the date div, that would be greatly appreciated.

Answer №1

Give this a shot:

.post {
    margin-top: 40px;
    padding: 10px;
    color: white;
    background: black;
    border: 3px white solid;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    position: relative;
}

.date {
    position: relative;
    float: left;
    border: 2px white solid;        
    height: 50px;
    background: black;
    margin: 0 10px 10px 0;
    padding: 5px;
}

.date h3 {
    position: relative;
}

.date h5 {
    position: relative; 
}

This code will place the date in the upper left corner of the post container and allow the text to flow around it.

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

Effective URL structure with nested ui-view in AngularJS

It is common knowledge that Angular functions as a SPA (Single Page Application). I am seeking the most effective approach to display a main left-side menu selector page, where clicking on any menu item will load the content in the right-side view div. Th ...

"Redirecting visitors based on their location using GeoIP targeting for

Is there a way to implement a code that redirects users based on their location? For example, if a user accesses the site from the United Kingdom, they should be redirected to /UK/, if from the US to /US/, and if from anywhere in the EU (excluding the UK) ...

Listening to a song on a webpage while filling out the online form

Seeking advice on integrating audio file selection in form: <form ....> <input type="file" name="file-main" id="file-main" class="inputfile inputfile-3" multiple/> <audio preload="none" src=""> // excluding submission buttons for brevi ...

Code that achieves the same functionality but does not rely on the

I utilized a tutorial to obtain the ajax code below. The tutorial referenced the library jquery.form.js. Here is the code snippet provided: function onsuccess(response,status){ $("#onsuccessmsg").html(response); alert(response); } $("# ...

Adding items to a jCarousel using C# programming language is a simple process that involves following

I am struggling to display images in jcarousel using a C# Webmethod and jQuery Ajax. Here is my setup: My HTML structure: <div> <ul id="mycarousel" class="jcarousel-skin-tango" style="float: left"> </ul> </div ...

What is the best way to replicate the orange outline when focused?

I am in the process of creating a series of divs that can be navigated by the user using the tab key. I would like to incorporate the standard orange focus outline for these elements. Is there anyone who can provide guidance on how to achieve this? I unde ...

Attempting to call a nested div class in JavaScript, but experiencing issues with the updated code when implemented in

Seeking assistance. In the process of creating a nested div inside body > div > div . You can find more information in this Stack Overflow thread. Check out my JSFiddle demo here: https://jsfiddle.net/41w8gjec/6/. You can also view the nested div ...

The alignment of two elements is off in mobile display

Why aren't my two divs centered in mobile view? I am using Vuetify CSS flex helper justify-center to try and achieve it, but it doesn't seem to be working. Even when I use justify-sm-center, it still doesn't work. What am I missing? <v-co ...

Different choices for pick component in Bootstrap

Struggling to create an inline label with a select element using Bootstrap, I came across this helpful example on jsfiddle: http://jsfiddle.net/kokilajs/1q53pr6j/ <form id="searchForm" method="get" class="form-horizontal" role="form"> <div class= ...

Challenge with modifying CSS variable names in Angular SSR

Recently, I noticed that some of my CSS variable names are being changed to something else on the server-side rendering build, causing them not to work as expected. An example of this is: .color-black-75 { color: var(--black-75-color); } In my styles. ...

Incorporating additional text following the creation of an image composite using HTML5

I am facing an issue with positioning two images on a canvas using HTML5. Despite changing the x and y properties, the images remain stuck at the top left corner (0, 0). This is different from how I can position text easily on the canvas. <canvas width ...

Combining keyframe properties in a more efficient way using less code

While attempting to develop a LESS mixin for CSS3 keyframes, I encountered the typical way of chaining IDs and classes: #idOne, #idTwo, .classOne, .classTwo { ... } Nothing groundbreaking there. What I'm currently working on is crafting the foll ...

Ensuring the Sticky Table Header Moves Alongside Horizontal Scroll

I've been working with an HTML table that has a sticky header, meaning the header stays in place as the table scrolls vertically. However, I'm facing an issue where I need the header to move along with the horizontal scroll, but remain fixed ver ...

html Comparison of Documents

My goal is to compare HTML documents to see if they have the same tags in the same arrangement, regardless of different inner text and attribute values. I am only interested in comparing the general tag structure, such as: <html> <head> </h ...

What is the procedure for adjusting the padding in Material UI's datepicker?

Click here to access the codesandbox link function InlineDatePickerDemo(props) { const [selectedDate, handleDateChange] = useState(new Date()); return ( <Fragment> <MuiPickersUtilsProvider utils={DateFnsUtils}> <Keyboa ...

The navigation area is too small for the social media buttons to fit

Hi everyone, I'm encountering an issue with the social media buttons on my website. They're not staying in the navigation header area despite trying to use the float attribute. Here are some images illustrating the problem: https://i.stack.imgur ...

What is the best way to strip the text from a link that encompasses both text and an image using jquery?

I have a website with a list of items. Each item in the list has a link that includes both text and an image. Here is an example of the HTML structure: <li class="li-one" style=""> <a href="#" onclick="return ...

Every time I hover, my jQuery code keeps repeating the hover effect

I am currently facing an issue that has me stumped on finding a solution. The problem arises when I hover over the .div multiple times, the animation just doesn't stop and keeps running continuously. What I aim for is to have the .hidden element fad ...

What is the best way to reduce the size of an image using a URL?

As I work on creating a website in React for a company, my main focus is on developing a drive repository where users can upload files. One issue that has arisen is the performance of the "photos" folder, as it contains numerous high-resolution images th ...

Organizing information in local storage using an array and converting it to a string

After storing user inputs (Worker's name, Car Vin, Start time and End time) in the local storage, you want to sort the employees' names in alphabetical order. The question is where should the code be placed and how should it be written? // Car C ...