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%

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;}


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.


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">

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 class="col-md-8">
<div class="rightside>
...rightside content here...

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

You can refer from here:

Related Topics

Leave a reply