Basic CSS Layout

by vintharas

HTML

<p>testing basic css layout stuff from <a href="http://learnlayout.com/display.html">http://learnlayout.com/display.html</a></p>

<h1>Display</h1>
<h2>Block</h2>
<div>div is the standard block-level element. A block-level element starts on a new line and stretches out to the left and right as far as it can. Other common block-level elements are p and form, and new in HTML5 are header, footer, section, and more.</div>
<h2>Inline</h2>
<p>span is the standard inline element. An inline element can wrap some text inside a paragraph <span> like this </span> without disrupting the flow of that paragraph. The a element is the most common inline element, since you use them for links.</p>
<h2>none</h2>
<p>Another common display value is none. Some specialized elements such as script use this as their default. It is commonly used with JavaScript to hide and show elements without really deleting and recreating them.</p>
<h2>other</h2>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">https://developer.mozilla.org/en-US/docs/Web/CSS/display</a>



<h1>Margin Auto</h1>
<div class="fixed-width centered">
    <p>setting the width of a block-level element will prevent it from stretching out to the edges of its container to the left and right. Then, you can set the left and right margins to auto to horizontally center that element within its container.
    </p>
    <p>Using max-width instead of width in this situation will improve the browser's handling of small windows.</p>
</div>

<h1>Box model</h1>
<h2>Classic box model</h2>
<p>
    While we're talking about width, we should talk about width's big caveat: the box model. When you set the width of an element, the element can actually appear bigger than what you set: the element's border and padding will stretch out the element beyond the specified width. 
</p>

<div class="fixed-width centered">Simple div</div>
<div class="fixed-width center other-shit">Div with same width but paddings, margins and...

CSS

body{
    font-family: helvetica, arial, sans-serif;
}

div {
    border: 2px solid lightgreen;
}

span{
    border: 2px solid lightgreen;
}

.fixed-width{
    max-width: 200px;
}
.centered{
    margin: 0 auto;
}

.other-shit{
    border-width: 10px;
    padding: 10px;
    margin: 20px auto;
}

.use-border-box div{
      -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.use-border-box{
    border: none;
}


pre {
    background-color: lightgrey;
    padding: 10px;
}

.static {
    position: static;
}

.relative{
    position: relative;
}

.down-and-left{
    left: 30px;
    top:20px;
}

.fixed{
    position: fixed;
    bottom: 0;
    right: 0;
    width: 50px;
}

.absolute{
    left: 0;
    top: 0;
    width: 100px;
    border-color: red;
}

img.float-me-right{
     float: right;
      margin: 0 0 1em 1em;
}

.floating-box{
      float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}

.after-floating-box{
    clear: left;
}

.clearfix{
    overflow: auto;
}

.box-inline-block{
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 1em;
}

 .three-column {
  padding: 1em;
  -moz-column-count: 3;
  -moz-column-gap: 1em;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  column-count: 3;
  column-gap: 1em;
    }