Stretch the div to the right and maintain its horizontal width

I am in the process of coding a two-column layout, with a total width of 980px. Each column will have a background that expands all the way to the left and right sides as shown in the screenshot here.

On the left side, there is a blue div with a width of 49%. Inside this div, there is another div containing text that needs to expand to 470px to keep it aligned within the overall max-width of 980px. The text should also scale down when the viewport size decreases as shown in this screenshot.

I'm looking for a way to keep the div expanded like in the Photoshop screenshots while also aligning it correctly within its parent blue div on the right side. When using float:right and max-width: 470px, I end up with undesired results as shown here. Can someone help me resolve this issue?

css

Answer №1

To align your div to the right within the blue div, follow these steps:

HTML

<div id="newid">
    <p>Insert text here</p>
</div>

CSS:

#newid {
  margin-left : auto;
  margin-right : 0;
}

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

Div Boxes at the Center

I've searched extensively for a solution to my unique problem, but haven't been able to find one that fits. I have 4 div boxes with a max width of 50% and a min width of 400px. When the site is viewed on a smaller screen, I want the boxes to alig ...

htmlcss

What's the reason for my badge being an oval shape?

I am attempting to design a badge that hovers above my cart icon and shows the total number of items currently in the cart. However, I have encountered an issue where the badge appears as an oval shape rather than a perfect circle. Can anyone assist with ...

cssreactjs

How to dynamically change the color of a button in a list in Vue.js when it is clicked

I am working on a dynamic list of buttons that are populated using an array of objects: <div class="form-inline" v-for="(genre, index) in genreArray" :key="index" > ...

javascripthtmlcssvue.jsobject

What is the best way to transform SASS into CSS?

Looking for an online tool to easily convert a few lines of SASS into pure CSS. Despite searching on Google, all the links I found talk about converting CSS to SASS. Below are the specific lines I need assistance in converting to CSS: =text-shadow($color ...

csssass

Adding a half circle connector in HTML can be accomplished by using SVG (Scal

My task is to replicate the construction shown in this image: https://i.sstatic.net/kaRMO.png I have written the entire code but I am unsure how to include a half circle next to the full circle and connect it with a line connector. Here is my code: .ps- ...

javascripthtmlcss

The empty string is not getting recognized as part of an array

Currently, I have a textarea field where pressing enter submits and creates a new item in the array. Pressing shift + enter creates a new line in the textarea input field. But when trying to submit by pressing shift and enter after creating a new line, it ...

javascripthtmlcssreactjs

What could be the reason why the border of my table displays in Firefox and Chrome, but remains hidden in Internet Explorer

I am facing an issue with getting a border to display on a table in Internet Explorer versions IE6, IE7, and IE8. The border is showing up fine in Chrome and Firefox but not in the mentioned IE versions. Below is the CSS code that I have been using: #info ...

htmlcssinternet-explorerfirefox

What is the method for initiating a radial gradient from the middle of the pie chart?

In my pie chart with grid lines, I have successfully implemented a radial gradient. However, the issue is that there is a separate gradient for each pie slice. What I really want is a single gradient originating from the center of the entire pie chart. I ...

javascriptcssd3.js

`Nginx with a touch of material design`

Currently, I'm in the process of implementing material design UI on a functioning web application. The application utilizes Nginx, PHP, and PostgreSQL. While I have proficiency in PHP and PostgreSQL to ensure the functionality (code composed in notepa ...

htmlcssmaterial-design

When resetting the function, make sure to move the class to the closest sibling element

I am currently utilizing a slider that employs the .prev and .next jQuery functions to toggle the active class, indicating which slide is being displayed. Here is the code responsible for this functionality. It identifies the current sibling with the acti ...

javascriptjquerycss

Can @keyframes be iterated through CSS (particularly Stylus)?

Here is some Stylus code I'm working with: for i in (1..3) .l:nth-child({i}) opacity (i / 5) When executed, the output looks like this: .l:nth-child(1) { opacity: 0.2; } .l:nth-child(2) { opacity: 0.4; } .l:nth-child(3) { opacity: 0.6; } ...

cssnode.jsiterationstyluscss-animations

Tips on minimizing the vertical size of a mat field housing a mat-select dropdown

I need help reducing the height of a mat field that includes a mat-select in Angular v15. The code is directly from the material components documentation, with no alterations. It consists of a default table and default outline formfield. <mat-form-fi ...

cssangularangular-material

Guide on implementing a scroll feature for a div element with a fixed width that contains a dynamically generated table with td elements of fixed width in HTML

Struggling with HTML formatting. I'm facing an issue where I have a table nested inside a div. The div has a fixed width of 200px and the td elements are added dynamically. Despite setting each td to be 100px wide, when five td elements are added, to ...

htmlcssinternet-explorer

Header rows in the table remain in place, however, the borders shift when viewed on Chrome and do not display at all on Firefox

I'm having trouble with the borders on my header table. In Chrome, the top border disappears when I scroll down, and in Firefox, it simply doesn't appear. You can see the issue here https://codepen.io/anon/pen/zyEwZq#anon-login Check it out on ...

htmlcss

placing one SWF file above another

Is it feasible to layer multiple SWF files on top of one another directly? I have been experimenting with divs and different z-index values, but I am unsure about how the Flash player comes into play. Is my assumption correct that each SWF has its own indi ...

htmlcssflash

Can someone help me troubleshoot the issue with my submit button's onclick function?

I am currently working on a project where I have a content box enclosed in a div tag. Within this content box, there are paragraphs with unique IDs for individual styling rules. I have set margins, padding, and other styles accordingly. At the bottom of th ...

javascripthtmlcss

The CSS menu appears more compact when viewed on a different page

Recently, I've been working on a website for practice and decided to include a menu. It functions perfectly on the first webpage, but appears slightly smaller on the second one. Here's the code snippet I used for the menu on the initial page: &l ...

htmlcssmenu

Clarification: Javascript to Toggle Visibility of Divs

There was a similar question that partially solved my issue, but I'm wondering if using class or id NAMES instead of ul li - such as .menu, #menu, etc. would work in this scenario. CSS: div { display:none; background:red; width:200px; height:200px; } ...

javascriptcsshtml

Updating the active tab in the navigation bar whenever the router navigates

I'm struggling with changing the active tab in Angular 2 and Bootstrap 4. I have managed to get the active tab to change using this code snippet: navbar.component.html <nav class="navbar navbar-fixed-top navbar-light bg-faded"> <button cl ...

htmlcssangularbootstrap-4

Tips for adjusting the width of a table

add your image description hereImagine a scenario where there is a table featuring two columns. <table> <tr><td>Email</td> <td></td></tr> <tr><td>Full name</td> <td></td></tr> ...

htmlcss