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

Tips for showcasing beautifully formatted XML content on a webpage

I have some XML data that I want to display on my website, but I'd prefer to show it in a styled format like a bootstrap table. However, I'm not sure how to go about doing this. Here's an example of the XML: <?xml version="1.0" encoding ...

htmlcssxml

Retrieve only the most recent input value

Currently, I am working with a text input to capture user input. As of now, here is my code snippet: $(myinput).on('input', function() { $(somediv).append($(this).val()); }); While I want to continue using the append function, I am facing an i ...

javascriptjqueryhtml

Having difficulty executing a function inside a JavaScript file

Within my index.php file, the following lines of code are present: <!doctype html><html class=""><head><title>a title</title> <link href="_css/boilerplate.css" rel="stylesheet" type="text/css"> <script type="text/jav ...

javascriptjqueryhtmlpopupcall

Navigation is failing to float in the correct position

Having issues with my navigation positioning, specifically when it reaches the breakpoint. There's a strange gap on the right side that I can't seem to fix by adjusting padding or margin settings. I'm relatively new to this so please bear wi ...

htmlcss

Display the scrollbar on a flexbox container instead of the entire browser window

I'm curious about how to implement a scroll-bar on a div using flexbox CSS. To better illustrate the issue, I've provided an example below: * { box-sizing: border-box; } .flex-display { display: flex; align-items: stretch; height: 100 ...

htmlcssflexbox

Selenium is unable to activate the button element by clicking

I have been using Selenium with Python and attempting to click a button, but it simply isn't working. Here is the relevant HTML: <div class="nmMym"> <button class="sqdOP yWX7d _8A5w5 " type="button"> ...

pythonhtmlseleniumselenium-webdriverautomation

The forecast button seems to be malfunctioning. Each time I attempt to click on it, a message pops up saying, "The server failed to comprehend the request sent by the browser (or proxy)."

Even though I provided all the necessary code, including the Flask app, predictionmodel.py, and HTML code, I am still encountering an error when running it locally after clicking submit. The browser (or proxy) sent a request that this server could not un ...

pythonhtmlmachine-learningflasknltk-trainer

The styling in Docker for Asp.Net Core is not being properly displayed

I recently deployed my first ASP.NET Core application using Visual Studio for Mac inside a Docker container on Linux. However, I'm facing an issue where the CSS is not being applied and the JavaScript is not functioning as expected. It seems like the ...

cssasp.netdocker

What is the process for right-aligning components in BootStrap 5.0?

Currently, I am enrolled in an online course where the instructor utilizes Bootstrap 4. However, I decided to challenge myself by using Bootstrap 5.1 instead. I have been struggling with configuring my navigation bar elements to look like the ordered list ...

htmlcsstwitter-bootstrap

What is the best way to make jQuery not consider hidden elements?

Apologies for not sharing the code, as I know many of you prefer to see it. I am currently working on developing a comprehensive calculator for my small business, and I am aware that I am making several mistakes. I kindly request that you do not critique ...

jqueryhtmlcsshidden

What is the process for mediating a SWF-Flash file with a PHP mediating, also known as an HTTP-Pseudostreaming script?

I am currently developing a mini context media platform that utilizes HTTP Pseudostreaming. This involves using a PHP script to manage the media file, ensuring proper access and linking to the correct directory. Below are the key components of my code: // ...

phphtmlflashhttpmediator

What might be causing the status problem to not display correctly?

My toggle feature to switch between no issue and issue is not displaying the status correctly. Despite trying to troubleshoot, I can't figure out why the issue section is not showing up. <!DOCTYPE html> <html> <script src="https://aj ...

javascripthtml

Top strategies for avoiding element tampering

What is the best solution for handling element manipulation, such as on Chrome? I have a button that can be hidden or disabled. By using Chrome's elements, it is possible to change it from hidden/disabled to visible/enabled, triggering my click functi ...

javascriptjqueryhtmldom

Troubleshooting issue with removing an item from jQuery's html5 localStorage

Exploring the following code snippet: $('#doneItem').click(function(){ $(this).each(function(index){ var item = 'personal' + index; alert(item); localStorage.removeItem('personal' + ...

jqueryhtmllocal-storage

I'm working on a CSS project and my goal is to ensure that all the items are perfectly aligned in a

I have been working on a ReactJS code and I'm struggling to achieve the desired result. Specifically, I am using Material UI tabs and I want them to be aligned in line with an icon. The goal is to have the tabs and the ArrowBackIcon in perfect alignme ...

cssreactjsmaterial-ui

Tips for inserting a personalized image or icon into the ANTD Design menu

Can anyone help me figure out how to replace the default icons with a custom image or icon in this example: https://ant.design/components/layout/#components-layout-demo-side I attempted to do it by including the following code: <Menu.Item to="/" key=" ...

javascriptcssreactjsantd

Linking an element's class to the focus of another element in Angular

In my Angular application, I have multiple rows of elements that are wrapped with the myelement directive (which is a wrapper for the input tag). To highlight or focus on one of these elements at a time, I apply the .selected class in the styles. Everythi ...

javascripthtmlcssangularjs

Bootstrap 4 Row failing to fill entire div width

I am currently designing a bootstrap 4 layout with four columns, but starting with just three. I have an outer div container and an inner row with three columns. However, when I add borders to all the containers, I notice that the row does not expand to fi ...

htmlcsstwitter-bootstrapbootstrap-4row

Encountering XMLHttpRequest errors when trying to make an AJAX POST request

I'm encountering an issue with a modal containing a form for submitting emails. Despite setting up the ajax post as usual, the submission is failing consistently. The console displays the following two errors: Setting XMLHttpRequest.withCredent ...

javascriptjqueryhtmlajaxasp.net-mvc-5

Creating a jquery DataTable from HTML generated by angular $sce can be done by following these steps

I have created an Angular controller that takes data and generates an HTML table from it. The generated table is being displayed on the page. Now, I want to apply jQuery data tables using that scope variable. The variable contains the HTML code of the tabl ...

javascriptjqueryhtmlangularjsdatatables