steps to create a flexible width div with a set height

Question

steps to create a flexible width div with a set height

Is it possible to create a responsive div that is fixed from both sides? It would look something like this:

                               Screen (big)
+----------------------------------------------------------------+
|                                                                |
|....20px.....______________________________________....20px.....|
|            |                                      |            |
|            |                 div                  |            |
|            |______________________________________|            |
|                                                                |
|                                                                |
+----------------------------------------------------------------+




                Screen (small)
+--------------------------------------------+
|                                            |
|....20px.....__________________....20px.....|
|            |                  |            |
|            |       div        |            |
|            |__________________|            |
|                                            |
|                                            |
+--------------------------------------------+

It should be noted that my focus is just on left and right side.

Now, is the implementation of this possible?

html css responsive-design

Answer 1

Answer №1

This is a very straightforward solution.

CodePen

.container {
  padding: 10px;
  background: pink;
}
.item {
  height: 80px;
  background: #FFA500;
}

<div class="container">
  <div class="item"></div>
</div>

Answer 2

This is a very straightforward solution.

CodePen

.container {
  padding: 10px;
  background: pink;
}
.item {
  height: 80px;
  background: #FFA500;
}

<div class="container">
  <div class="item"></div>
</div>

Answer 3

Answer №2

No need to wrap it:

<style>
div
{
border: 1px solid blue;
padding: 5px;
}
</style>

<div>Hello!</div>

Answer 4

No need to wrap it:

<style>
div
{
border: 1px solid blue;
padding: 5px;
}
</style>

<div>Hello!</div>

Answer 5

Answer №3

Are you looking for this solution? http://codepen.io/panchroma/pen/xGJPyX
Add a parent div with 20px padding on the left and right sides.

HTML

<div class="container">
  <div class="content-div"></div>
</div>

CSS

.container {
  padding-left: 20px;
  padding-right: 20px;
}
.content-div {
  background-color: pink;
  min-height: 100px;
}

Answer 6

Are you looking for this solution? http://codepen.io/panchroma/pen/xGJPyX
Add a parent div with 20px padding on the left and right sides.

HTML

<div class="container">
  <div class="content-div"></div>
</div>

CSS

.container {
  padding-left: 20px;
  padding-right: 20px;
}
.content-div {
  background-color: pink;
  min-height: 100px;
}

Answer 7

Answer №4

It's a simple task to accomplish, do you perhaps want to create a more intricate layout?

All you have to do is specify the margin with your preferred values and utilize a standard div (display: block). You may also need to eliminate padding and margin from the body and html elements. For example:

HTML:

<html>
    <head>
        ...
    </head>
    <body>
       <div class="contents">...</div>
    </body>
</html>

CSS:

body, html {
  padding: 0px;
  margin: 0px;
}

.contents {
  margin: 0px 20px;
}

Check out this interactive demo for reference.

Answer 8

It's a simple task to accomplish, do you perhaps want to create a more intricate layout?

All you have to do is specify the margin with your preferred values and utilize a standard div (display: block). You may also need to eliminate padding and margin from the body and html elements. For example:

HTML:

<html>
    <head>
        ...
    </head>
    <body>
       <div class="contents">...</div>
    </body>
</html>

CSS:

body, html {
  padding: 0px;
  margin: 0px;
}

.contents {
  margin: 0px 20px;
}

Check out this interactive demo for reference.

steps to create a flexible width div with a set height

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a way to shift text upward while it is contained within a span element inside a list item?

What is the best way to make a scrollable div with top and bottom padding without adding extra elements inside?

jquery allows you to toggle the visibility of content

Activate the "double" class within the image carousel

Arranging a list with both Left and Right alignment on a single line in proper sequence

Adjust the page height when switching between two divs

Ensure that all Woocommerce products have consistent height while allowing for variations in width

Retrieve information from a JavaScript file to incorporate into an HTML file

Prevent carousel from rotating while video is playing in Bootstrap 4

What is the best way to determine the length of an array using input from an HTML form?

Determining the Nearest Form to an Element using jQuery

Calculate the sum of two numbers in a Django application and display the result on the same page

Is there a way for me to identify a click on a specific element along with all of its child elements, excluding one

Exploring the Beauty of Trees through Twitter Bootstrap

What could be the reason for my button not activating the form while inside a bootstrap modal?

Streamlining form submission processes with VBA automation of check box selections

Center the two consecutive <div> elements within the container

Implementing a line break within a JavaScript function specifically designed for formatting images

I'm experiencing some unwanted white spaces between my div elements, likely caused by varying heights. Is there a way to remove these spaces without having to resort to setting a fixed

The MVC5 model is unable to retrieve the text value entered in the textbox