Arranging three items within a div container

I am facing an issue with the layout provided in the code snippet below. Essentially, there is a div container with tools on the left side, main content in the center, and tools on the right side (a visual drag handle on the left and a delete button on the right). I was able to position them using float:left and float:right properties respectively. However, when I tried to add a background color to the main content, the color spills over to the left floating elements but not to the ones on the right (this has only been tested in Firefox 3.5).

Here is the code:

<head>
    <style type="text/css">
    #container{
        width:500px;
    }
    .handle{
        float:left;
    }
    .delete{
        float:right;
    }
    .main{
        width:450px;
        background-color:#ccc;
    }
    </style>
</head>
<div id="container">
<div class="c"><p class="handle">HH</p><p class="delete">X</p><p class="main">Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as asd fasd fas dfa sdf asdf as dfas df dasf asd fas df asdf asdf asd fasd fasdf asdf asdf asdf as df asdf asdf asd fas df asdpf asdf asdf asd fas dfa sdf asdf asd fas df</p></div>

<div class="c"><p class="handle">HH</p><p class="delete">X</p><p class="main">Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div>
</div>

Answer №1

I can fulfill your desires using the following CSS code:

<style type="text/css">
*{border:solid 1px black}
#container{
    width:500px;
}
.handle{
    float:left;
}
.delete{
    position:relative;
    right:50px;
    float:right;
}
.main{
    width:390px;
    padding:9px 30px;
    background-color:ccc;
}
</style>

However, it falls short of excellence.

Answer №2

To give a background color specifically to the element identified with the ".main" class, you will need to make some adjustments to your HTML and CSS:

Reorder your elements so that the one with the "main" class is situated between those marked as "handle" and "delete".

<div class="c">
<p class="handle">...</p>
<p class="main">...</p>
<p class="delete">...</p>
</div>

Include "float:left" in the styles for ".main"

.main{
  ...
  float:left;
}

Be aware that there is a mistake in the second example. The background-color should be "#ccc" instead of just "ccc".

Answer №3

Are you looking to apply the color to all sections (left, main, & right) or just the middle div?

If you want the color to cover all sections, adjust the width of the main div to match the container width. Here's an example:

.main{
     width:500px;
     background-color:#ccc;
 }

Alternatively, if you only want the color in the main div, you can float it to the left like this:

.handle{
    float:left;
    clear: left;
}
.delete{
    float:right;
    clear: right;
}
.main{
    width:450px;
    background-color:#ccc;
    float: left;
}

Answer №4

To resolve the issue, simply apply a float:left property to the .main element.

If you download either the ColorZilla Firefox addon or Firebug, you can inspect and understand the problem. The reason behind the #ccc background is that the .handle is floated to the left within the .main element.

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

What is causing the classList function to throw an error: Uncaught TypeError: Cannot read properties of undefined (reading 'classList')?

There's an error that I can't figure out: Uncaught TypeError: Cannot read properties of undefined (reading 'classList') console.log(slid[numberArray].classList) is working fine, but slid[numberArray].classList.add('active') is ...

Use jQuery to delete the parent div when the element inside does not contain a specific class

I'm dealing with a grid that has 3 columns, each sharing the same div class. Inside each column is a span with either the class of class="simplefavorite-button" or class="simplefavorite-button.active". Here's how the markup looks: <div class= ...

HTML/JavaScript - Ways to show text entered into an input field as HTML code

One dilemma I'm facing involves a textarea element on my website where users input HTML code. My goal is to showcase this entered HTML code in a different section of the webpage. How should I approach this challenge? The desired outcome is similar to ...

Customize Cell Styling with Bootstrap Full Calendar CSS

I am attempting to implement a Bootstrap calendar feature where cells are colored green if the timestamp is greater than today's date. This can be achieved by: $checkTime > $today cell.css = green background I came across this code snippet on St ...

Switching Text Box Content When Hovering Over a Static Element: A Fail-proof Method

Even though I followed the solution from another source, the Description I set still refuses to show up in the text box. I have already attempted this: How To Change Text Box Content On Hover I meticulously checked every class name and every bracket in th ...

What is the best way to display link icons - as images or using CSS background-image URLs?

When designing a web UI, I am considering using iconography to represent actions such as adding, editing, deleting, and searching for items. However, I want to ensure that the purpose of each action is clear without displaying text and cluttering the UI sp ...

Is it possible to use the same HTML select/dropdown menu for multiple rows in a table?

I am working with an HTML table that usually has between 10-30 rows, each containing a column for "item name". The drop down menu consists of about 75 products to choose from. In order to reduce the page size, I want to use a single drop down list for all ...

What is the best way to reveal CSS files downloaded via npm?

I'm currently working on a Sass/CSS library that I have hosted on npm. I am exploring ways to make it easier for clients to access it, such as using: @import 'library_name' Instead of the less appealing option: @import 'node-modules/ ...

How can I vertically center a back button in jQuery Mobile?

Recently, I've been incorporating the back button into my jQuery Mobile page. One thing I'm trying to achieve is vertically aligning the back button in the header. Appreciate any help in advance! ...

What strategies can be implemented to avoid using .stop() in specific scenarios?

Currently, I am working on a jQuery animation where clicking on a tile should display its information by hiding all other tiles and showing its details. While I have implemented .stop() to prevent queuing issues, I encountered a problem with the transition ...

React - Highcharts Full Screen dark overlay

I am currently working on integrating highcharts/highstock into my application, and I have encountered an issue with the full screen functionality. The challenge I am facing is setting a fixed height for my charts while also enabling the option to view ea ...

Creating code for both the PC and mobile website by utilizing the user agent

I need to customize the CSS for my website, and I have a specific question: If a user is accessing my web page via a computer, the CSS should be as follows: <link rel="stylesheet" href="/pc.css" type="text/css" media="all" /> However, if they are ...

Automatically submit a PHP form if the input text box is left blank

I need a way to automatically refresh the data on my page when the textbox is empty. Manually submitting the form works perfectly, but I want it to happen automatically if the textbox is empty. The catch is that I don't want the form to submit while t ...

Extract the variables from the while loop

Is there a way to store the variables outside of the while loop? For instance, I have a slideshow displaying images for each category and a button that when clicked leads to the image gallery related to that category. However, due to graphical reasons, the ...

Opacity problem when hovering on Chrome

Work in progress: Hello everyone, I'm facing an issue with a hover effect that only seems to be occurring in Chrome. When hovering over a tile, the background color changes, the image opacity decreases, and an icon appears over the image. In Chro ...

Click on the button to reveal the hidden content within the div, and then smoothly scroll down to view

I have a footer div that is present at the bottom of every page on our site. I've added a button to expand this div, but I'm looking for a way to automatically scroll the page down so that the user can view the expanded content without manually s ...

Incompatible parameter type for the Angular keyvalue pipe: the argument does not match the assigned parameter type

I need to display the keys and values of a map in my HTML file by iterating over it. To achieve this, I utilized Angular's *ngfor with the keyvalue pipe. However, I encountered an error when using ngFor: The argument type Map<string, BarcodeInfo ...

Tips for positioning an element so that it remains anchored to the content it is placed within

Hey Everyone! I'm struggling a bit with how to position the h2 headings in my code so that they stay fixed in the top right corner of the box while moving along with the rest of the contenthttps://i.stack.imgur.com/OOVaA.png%60 What I'm attempt ...

Can you modify a WordPress/WooCommerce title written in uppercase to display in proper capitalization?

My current project is centered around WordPress and utilizes WooCommerce as its e-commerce platform. I recently migrated products from an old site where the product titles were written in uppercase. At the moment, my HTML code for the product titles looks ...

Styling Tip: Aligning text to the baseline of a height-adjusted input field using CSS

As per the information from the Mozilla documentation, it states that I can align the text in an input field to the baseline if the element's display property is set to inline-block. I have made adjustments to the height of several input elements, bu ...