The battle between percentages and pixels in fluid design

Question

The battle between percentages and pixels in fluid design

I am looking to create a flexible layout and would like to achieve the following:

width:100%-200px;

This means having a div that contains content, referred to as div id="content", with a fixed margin on each side. I have attempted to place the div id="content" inside another div container with a margin, but I am unsure of how to fill in the background of the div id="content. Is there a way to instruct the div id="content" to utilize 100% of the available space as the background so that the combined width of the content and margin does not exceed 100% of the browser window size?

html css fluid-layout

Answer 1

Answer №1

Setting the DIV to 100% width with a margin on both sides may cause it to exceed the browser window size.

To address this issue, you can implement the following CSS:

body {
    padding:0 2%;
}

#content {
    width:96%;
}

http://jsfiddle.net/ABCD/

Answer 2

Setting the DIV to 100% width with a margin on both sides may cause it to exceed the browser window size.

To address this issue, you can implement the following CSS:

body {
    padding:0 2%;
}

#content {
    width:96%;
}

http://jsfiddle.net/ABCD/

Answer 3

Answer №2

To implement position absolute...

#main {
  position: absolute;
  left: 0;
  right: 150px;
}

Check out this CodePen.

NB One advantage is that you avoid adjusting values on other elements.

Answer 4

To implement position absolute...

#main {
  position: absolute;
  left: 0;
  right: 150px;
}

Check out this CodePen.

NB One advantage is that you avoid adjusting values on other elements.

Answer 5

Answer №3

To achieve the desired result, wrap your content in a container with 200px of left and right padding. Check out this code snippet for an example:

<!doctype html>
<html>
<head>
    <style type="text/css>
        body { margin: 0 50px; }
        #container { padding: 0 200px; background: #FF0000; }
        #content { width: 100%; background: #00FF00; }
    </style>
</head>
<body>
    <div id="container">
        <div id="content">
            Here goes my content
        </div>
    </div>
</body>
</html>

Keep in mind that the body margin is set just for demonstration purposes to show the background variations.

(I would share a jsFiddle link, but I'm currently limited to using IE7 only.)

Answer 6

To achieve the desired result, wrap your content in a container with 200px of left and right padding. Check out this code snippet for an example:

<!doctype html>
<html>
<head>
    <style type="text/css>
        body { margin: 0 50px; }
        #container { padding: 0 200px; background: #FF0000; }
        #content { width: 100%; background: #00FF00; }
    </style>
</head>
<body>
    <div id="container">
        <div id="content">
            Here goes my content
        </div>
    </div>
</body>
</html>

Keep in mind that the body margin is set just for demonstration purposes to show the background variations.

(I would share a jsFiddle link, but I'm currently limited to using IE7 only.)

Answer 7

Answer №4

Here is a solution I came up with, using HTML and CSS:

<div id="content" class="content">
  My Content
</div>

In the CSS part, I styled the .content class to have an absolute position with right and left margins set to 100px, and a background color of #A5112C.

You can view the result here: http://jsfiddle.net/MPYHs/

If you want to add an image as a background, I recommend using a small pattern like this one:

I hope this solution helps!

Best regards,

Answer 8

Here is a solution I came up with, using HTML and CSS:

<div id="content" class="content">
  My Content
</div>

In the CSS part, I styled the .content class to have an absolute position with right and left margins set to 100px, and a background color of #A5112C.

You can view the result here: http://jsfiddle.net/MPYHs/

If you want to add an image as a background, I recommend using a small pattern like this one:

I hope this solution helps!

Best regards,

The battle between percentages and pixels in fluid design

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Create a moving background gradient with styled-components

Stop Gulp Inline CSS from enclosing HTML content within html and body elements

Transform pixel padding into percentage ratios

Creating a custom design for input outline borders using CSS3

Is it possible to invoke this PHP function within an HTML document?

Tips for identifying if the cursor is hovering over the :before or :after section of an element

Visual Delights on the Menu

Encountering a problem creating a hover overlay effect on a transparent PNG image within a parent div that has a background color

What is the best way to remove top divs without causing the bottom divs to shift upwards?

AngularJS issue: Form submission does not trigger the controller function

Assigning a JavaScript code block to execute exclusively on designated pages

Issue with jQuery DataTable: Unable to use column-level filters at the top and maintain a fixed height simultaneously

The fieldset css in PrimeNG differs from the website's original design

downloading responsive design

What is the functionality of client-side applications?

Quick and hassle-free form editing is a breeze with our user-friendly platform

Learn how to hide elements on print pages conditionally in Vue.js using CSS or JavaScript

unable to apply custom css to primefaces components

Issues with zoom functionality not functioning properly within IE11

What is the best way to create a triangle shape that is responsive to elements?