All geek questions in one place

How to make margin constant on both sides of a div

I tried to create a browser-independent code with a search bar (this search bar that I took from demos.jQuery.com), but now when I try to fix the percentage of margin in the left and right sides (I want it to be centered , even when the width of the browser has changed) I can not do this, I am new to CSS, can someone help?

The code I have done so far:

HTML:

<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <title>Screen1</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> <link rel="stylesheet" type="text/css" href="screen1.css"> </head> <body> <div id="header"><p class="p1"><b>Composite<img class="img1" src="https://cdn2.iconfinder.com/data/icons/picol-vector/32/arrow_sans_down-128.png" alt="alternate"></b></p></div> <div id=""main> <div data-role="main" id="main" class="ui-content"> <form> <input data-type="search" id="divOfPs-input"> </form> <div class="elements" data-filter="true" data-input="#divOfPs-input"> <p><strong>These</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p> <p><strong>p elements</strong> nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p> <p><strong>are</strong> et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est</p> <p><strong>filterable</strong> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p> </div> </div> </div> </body> </html>

CSS:

 @CHARSET "ISO-8859-1"; #header { position:absolute; height:40px; width:100%; background-color:#D1D3D4; verticle-align="middle"; left:0; } .img1 { position:relative; height:13px; float:right; padding-right:12%; } .p1{ position:relative; padding-bottom:5%; padding-left:7%; width:100%; } #main { position:absolute; margin-top:80px; left:-.3%; margin-right:2%; width:98%; border-right:5%; }

Pay attention to this script.

+5
source share
5 answers

The main problem is that you determined 98% width without box-sizing: border-box; so that the filling takes the content out of the visible area. You should set the #main div to:

 #main { /* left:-.3%; margin-right:2%; */ width:100%; box-sizing: border-box; }

Fiddle: http://jsfiddle.net/3je1bk67/3/

+3
source

If you want your elements to be centered using margin-right and margin-left , try this:

 /* just change the element tag you want to center */ p{ margin-left:10%; margin-right:10%; }

This will make all your <p> elements centered, and you can apply them to any element.

Take a look at this demo .

+1
source

to add a search bar in the middle you just need to add this

 margin-left: auto; margin-right: auto;

enter image description here Hope this helps.

+1
source

This answer will help you: How to center the <div> horizontally in another <div>?

You also have a typo in your code: <div id=""main> instead of <div id="main"> .

0
source

Jsfiddle

http://jsfiddle.net/3je1bk67/6/

you can resize the browser to see the effect

  #main { margin:30px 0px 0px 0px; }
0
source

Source: https://habr.com/ru/post/1207292/

More articles:


All Articles