100% width with a pixel offset

Question

100% width with a pixel offset

In the past, I have achieved this by using padding. The concept is to have two div elements positioned side by side, where one has a width of 100% and the other has a fixed width of 50px.

Here's a rough illustration:


------------------------------------------------
|              100%             |     50px     |
------------------------------------------------

I am looking for a solution that meets the following criteria:

No use of javascript
Width should be exactly 100%, not less like 95%

css width percentage

Answer 1

Answer №1

Here is an additional response with a link to jsfiddle for reference.

#one
{
  width:100%;
  float:right;
}

#two
{
  width:50px;
  margin-right:-100%;
  float:right;
}

To ensure proper formatting, the clearfix solution should be implemented on the parent div.

While this may not be the most conventional approach, it does get the job done. For optimal results, consider adding another div within the main div that has the 100% width to contain your content.

Answer 2

Here is an additional response with a link to jsfiddle for reference.

#one
{
  width:100%;
  float:right;
}

#two
{
  width:50px;
  margin-right:-100%;
  float:right;
}

To ensure proper formatting, the clearfix solution should be implemented on the parent div.

While this may not be the most conventional approach, it does get the job done. For optimal results, consider adding another div within the main div that has the 100% width to contain your content.

Answer 3

Answer №2

Based on what I see from your code snippet, it appears that you have tackled the issue in a way that I also considered to be the only feasible solution. By using absolute positioning and adding padding to create space for flexibility, you were able to address the issue effectively. Feel free to share your own answer to your question if you'd like!

For others facing a similar problem who prefer a straightforward answer without the need for a fiddle, here is the simplified version of your working code:

HTML

<div class="black">
    <div class="yellow">
    </div>
    <div class="purple">
    </div>
</div>

CSS

.black{background:black;padding-right:70px;height:100px;position:relative;}
.yellow{background:yellow;width:100%;height:100%;}
.purple{background:purple;width:50px;height:100%;margin:0 0 0 20px;position:absolute;right:0;top:0;}

Answer 4

Based on what I see from your code snippet, it appears that you have tackled the issue in a way that I also considered to be the only feasible solution. By using absolute positioning and adding padding to create space for flexibility, you were able to address the issue effectively. Feel free to share your own answer to your question if you'd like!

For others facing a similar problem who prefer a straightforward answer without the need for a fiddle, here is the simplified version of your working code:

HTML

<div class="black">
    <div class="yellow">
    </div>
    <div class="purple">
    </div>
</div>

CSS

.black{background:black;padding-right:70px;height:100px;position:relative;}
.yellow{background:yellow;width:100%;height:100%;}
.purple{background:purple;width:50px;height:100%;margin:0 0 0 20px;position:absolute;right:0;top:0;}

100% width with a pixel offset

Answer №1

Answer №2

Similar questions

What are the implications of using :root along with the universal selector in CSS to overwrite Bootstrap variables?

Looking to have the content aligned in the center of the parent container while also

How can you prevent a draggable element from surpassing the bottom of the screen?

Is there a way to set the background image to scroll vertically in a looping pattern?

Is there a way to set a custom background image for a specific Vaadin view?

Box size adjusts to fit its content, including any form fields

Revamp HTML <font size=1-7> with the use of CSS or JavaScript

The Font Awesome icon is not displaying on top of the Materialize CSS progress/determinate bar

How to style the first column of the first row in a table using CSS without affecting nested tables

Scalable vector graphics require adjustments in scaling and translation, with variations between Chrome and Firefox browsers

Vue.js does not support the usage of external JSON files directly within HTML documents

issue with accessing the code through the web browser

What causes the disparity between Chrome's print preview and printed output? [HTML - CSS]

Creating a Triangle Slider Component with React and Material-UI (MUI)

How can I create a reverse animation using CSS?

Flashing text compatibility across all browsers

Connect the scroll wheel and then proceed to scroll in the usual way

Explain the concept of paragraph spacing in Word, including how it is

Is there a way to perfectly center this image with the rest of my text content?

Pentagon Silhouette as Header Background