CSS Positioning 70-30 with Inline-Block

CSS Positioning 70-30 with Inline-Block

You have to remove white space between divs as it also take place and doesn't let inline-blocks align properly.

.main-bar, .side-bar {    position: relative;    margin: 0;    padding: 0;    outline: 0;    display: inline-block;    border: none;    background: #CCC;}.main-bar {    width: 70%;}.side-bar {    width: 30%;}

<div class="main-bar">    I am the King!</div><!--
--><div class="side-bar">   I am not less!</div>

why can't I put a 30% wide div next to a 70% wide div and have them both inline?

You are using inline-block, that calculates white spaces too. So either have your div elements on the same line or use something modern such as flexbox.

With inline-block (same CSS as you're using now):

<div id="wrapper">
  <div id="w30">  
    width 30%
  </div><div id="w70">  
    width 70%
  </div>
</div>

With flexbox (same HTML as you're using now):

#wrapper{  display:flex;  width:100%;}#w30{  background:yellow;  width:30%;}
#w70{  background:pink;  width:70%;}

<div id="wrapper">  <div id="w30">      width 30%  </div>  <div id="w70">      width 70%  </div></div>

CSS crazyness inline-block unremovable margin

Best answer is @emmanuel one (see question comment).
Even if there is no text, spaces beetwen divs does count.

* {  padding: 0px;  margin: 0px;}.section {  display: inline-block;  width: 20%;  min-height: 50px;  box-sizing: border-box;  border: solid 1px;  /*float: left;*/}

<div id="container">  <div class="section">a</div><!--  --><div class="section">b</div><!--  --><div class="section">c</div><!--  --><div class="section">d</div><!--  --><div class="section">e</div></div>

How to align two elements on the same line without changing HTML

Using display:inline-block

#element1 {display:inline-block;margin-right:10px;} 
#element2 {display:inline-block;} 

Example

Check whether a PDF-File is valid with Python

The two most commonly used PDF libraries for Python are:

• pyPdf
• ReportLab

Both are pure python so should be easy to install as well be cross-platform.

With pyPdf it would probably be as simple as doing:

from pyPdf import PdfFileReader
doc = PdfFileReader(file("upload.pdf", "rb"))

This should be enough, but doc will now have documentInfo() and numPages() methods if you want to do further checking.

As Carl answered, pdftotext is also a good solution, and would probably be faster on very large documents (especially ones with many cross-references). However it might be a little slower on small PDF's due to system overhead of forking a new process, etc.

two column divs in bootstrap3 modal

Remove the spaces between the closing tag of the first div and the opening tag of the second:

</div><div id="right_div">

and it will work. The line break probably breaks the CSS rules and adds a small gap between the two divs which causes the right div to get down.

JSFiddle

Maintain the aspect ratio of a div with CSS

Just create a wrapper <div> with a percentage value for padding-bottom, like this:

.demoWrapper {
  padding: 10px;
  background: white;
  box-sizing: border-box;
  resize: horizontal;
  border: 1px dashed;
  overflow: auto;
  max-width: 100%;
  height: calc(100vh - 16px);
}

div {
  width: 100%;
  padding-bottom: 75%;
  background: gold; /** <-- For the demo **/
}

<div class="demoWrapper">
  <div></div>
</div>

how to split screen into two halves of 20/80 or 30/70 in HTML?

You can achieve this using Bootstrap classes :)

<div class="row">
<div class="col-md-4">
   <div class="leftside">
    ...leftside content here...
   </div>
</div>
<div class="col-md-8">
    <div class="rightside>
    ...rightside content here...
    </div>
</div>

Use col-md for medium and above screens. You can use col-sm for small size screens.

You can refer from here:
https://getbootstrap.com/docs/4.1/layout/grid/

---

Related Topics