Arrangement of Div Box

Here is the HTML code that I am currently working with:

<div class="item">
    <div class="pageheader">
        Header
    </div>
    <div class="info">
        Created on...
    </div>
    <div class="image">
        Image
    </div>
    <div class="more">
        Read More...
    </div>
</div>

I have a specific layout requirement where I cannot change the order of the elements and do not want to use position absolute. Is there a way to achieve this desired positioning without using position absolute?

htmlcssposition

Answer №1

UPDATE:

.product{

    width: 350px;
    height:  150px;
    border: 2px solid black;
    position: relative;
}

.picture{

    float: left;
    border-right: 2px solid black;
    height: 150px;
    width: 100px;

}

.header{

    float: right;
    border-bottom: 3px solid black;
    height: 30px;
    width: 248px;
    top: 33px;
    left:102px;
    position: absolute;
}

.description{

    float: right;
    border-bottom: 3px solid black;
    height: 30px;
    width: 248px;
    top: 0px;
    left:102px;
    position: absolute;
}

.readmore{

    float: right;
    height: 30px;
    width: 248px;
    top: 66px;
    left:103px;
    position: absolute;
}

CSS modifications applied successfully.

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

Display two images consecutively within a single img tag

My goal is to display two images using a single <img /> tag. The first small image will be loaded and shown using the src attribute, while the second large image will be contained within the data-src attribute. Only one image will be displayed at a t ...

javascriptjqueryhtmlcssimage

BeautifulSoup: A guide on retrieving information following a designated HTML element

I have the following HTML code and I am trying to determine how to instruct BeautifulSoup to extract the <td> data after the element <td>Color Digest</td> <tr> <td> Color Digest </td> <td> 2,36,156,38,25,0, ... ( ...

pythonhtmlbeautifulsoupscrape

Converting text/plain form data to JSON using Node.js - step by step guide

I am currently working on a Node.js application to execute a POST call to an API for placing an order. However, the data I receive in our app is in text/plain format and not JSON. This is the current format of the data: TypeOrder=buy Coin=BTC AmountCoin= ...

javascripthtmljsonnode.jsexpress

Challenges with exporting dynamically generated divs using jspdf in an Angular 2 project

I have been utilizing the jspdf library to print div elements in my current project. But I recently discovered an issue where dynamic content within a div is not being printed correctly. Specifically, when incorporating simple Angular if statements, jspdf ...

javascripthtmlangulartypescriptjspdf

Using inline JavaScript to style an element when clicked

Looking for assistance with styling a link. I've connected an external stylesheet to my HTML file, so that part is all set. The goal is to modify the text-decoration when the onclick event occurs. Here's what I currently have: <a class="dopel ...

htmlcss

The header logo will have an absolute position to overlay the navigation menu when the screen is resized

I am currently working on a website layout that involves using position: absolute for the logo to overlay another div below it, purely for stylistic reasons. While I have achieved this effect, it doesn't translate well into responsive web design. When ...

htmlcss

Hiding the SVG element with pattern definitions using the 'display: none' property makes the patterns completely disappear from view

When I include a set of SVG definitions at the top of my body, I encounter an issue where the svg tag with zero height and width creates unnecessary space at the beginning of the document. To resolve this, I initially use display:none, but this leads to pr ...

htmlcsssvg

Leveraging tailwind for achieving dynamic height responsiveness

My Tailwind-built page currently has a table in the bottom left corner that is overflowing, and I would like it to adjust its size to fit the available space and scroll from there. I want it to fit snugly in the bottom left corner of the browser viewport ...

csstailwind-css

Prevent the parent component's ripple effect from being activated by the child component

If I have a simple code snippet like the following: <ListItem button={true} > <Typography variant='caption' color='primary'> {value} </Typography> <Button onClick={foo} > Button ...

javascriptcssreactjsmaterial-uidom-events

How can I navigate to an anchor using hover?

I'm unsure if I can accomplish this task using just CSS and HTML or if I need to incorporate Javascript because my research did not yield much information on the subject. I have not attempted anything yet as I am uncertain about the approach I should ...

htmlcss

Stylish CSS typography options for both Mac and Windows users

When browsing various websites, I've noticed that many of them showcase beautiful fonts without using images. Examples include The Firebug site and Happy Cog. It seems like web designers use CSS tricks and JavaScript to achieve this effect. I'm ...

cssfonts

What steps can I take to prevent ng-bootstrap modal from automatically centering the content within the modal?

Looking for a solution to a UX issue with my Angular ng-bootstrap modal. The problem arises when displaying messages of varying lengths - if the message is longer than the screen's vertical resolution, it gets centered on the screen. This causes incon ...

cssangularng-bootstrap

How can we stop Vuetify from overwriting Bootstrap3's classes when using treeshaking?

I am currently in the process of transitioning an app from jQuery/Bootstrap3 to Vue/Vuetify. My approach is to tackle one small task at a time, such as converting the Navbar into its own Vue component and then gradually updating other widgets. Since the n ...

cssvue.jstwitter-bootstrap-3vuetify.js

Utilizing Vue's string-based class binding feature?

Can Vue class binding work with strings? For example: <div :class={open: target == 'myString'}></div> var app = new Vue({ target: null }) It works when I don't use quotes <div :class={open: target == myString}></div ...

javascriptcssvue.js

Ways to Create a Text Overlay on an Image for your Banner

I have a banner div element with an image overlapping it. I'm trying to display my text without it being covered by the image, but I'm facing some challenges. Here's a visual example of the issue: https://i.stack.imgur.com/JdW75.png This ...

htmlcssbootstrap-4

Exclusive Hover Effect: Applying Hover Styles Only to Child Elements, Independent from Parent Hover

Styling with components is a great way to enhance your web design. const box = style.div` background-color: blue height: 300px ` const image = style.img` filter: grayscale(50%) ` <box> <image /> </box> If <image> stands alo ...

cssstyled-components

Hero Sticky Transition with 100vhDivElement

My code is giving me some trouble. I want the div with text to stay at the bottom of the hero section with a transparent background. When that div reaches the top, it should stick with a black background. The issue is that I have set it in the javascript v ...

javascriptcss

Force the page to refresh if the user navigates back using the browser's back button

Similar Question: Cross-browser onload event and the Back button I am looking for a way to automatically refresh a view or page when a user navigates back to it using the browser's back button. Any suggestions? ...

javascripthtml

Is there a way to align these buttons in the middle?

I am currently designing a webpage at The challenge I'm facing is: How can I center those buttons on the page? They need to remain centered and responsive even when the page is resized. Additionally, the spacing between the buttons is inconsistent. ...

htmlcsstwitter-bootstrapbuttonresponsive-design

Struggling to find your way around the header on my website? Let me give

I'm looking to display certain links prominently at the top of a page, similar to this example: "home > page1 > link1 > article 1." Can someone advise on how to achieve this using HTML, PHP, or jQuery? ...

javascriptphpjqueryhtml