layout css

index.html

<p>
  Having no layout whatsover is almost ok if all you want is one big column of content. However, if a user makes the browser window really wide, <span>(a hidden inline element)</span> it gets kind of annoying to read: after each line your eyes have a long distance to travel right-to-left to the next line. Try resizing your browser to see what I mean!
</p>
<p class='red'>another block level element that starts on a new line and streches all way as far as it can to the left and the right</p>

<a href="# ">first inline element</a><a href="# " class="crimson">second inline element</a>


<main>
  some awesome stuff can happen in here
</main>

<div id="width-property">
  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. The element will take up the width you specify, then the remaining space will be split evenly between the two margins.
</div>

<footer>
  The only problem occurs when the browser window is narrower than the width of your element. The browser resolves this by creating a horizontal scrollbar on the page. Let's improve the situation...
</footer>

<div class="box1">
  this is box 1
</div>

<div class="box2">
  this is box 2
</div>

<br>

<div class="box3">
  this is box3
</div>
<div class="box4">
  this is box4
</div>

layout-css.markdown

layout css

A Pen by MrRamoun on CodePen.

License.

style.css

p {
  width: 60%;
  margin: 0 auto;
  
  text-align: justify;
  text-justify: auto;
}

main {
  font-size: 2em;
  font-weight: bold;
  display: inline;
}

.red {
  color: red;
}

.crimson {
  color: crimson;
}

span {
  color: #c9c9c9;
  display: none;
/*   visibility: hidden; */
}

#width-property {
  width: 500px;
/*   width: auto; */
}

footer {
  padding: 40px;
  
  color: #917b3d;
  font-family: arial;
  font-size: 20px;
  
  text-align: justify;
  text-justify: auto;
  
  margin: 0 auto;

/*   width: 600px;   */
  max-width: 400px;
  min-width: 200px;
}

.box1 {
  width: 400px;
  height: 200px;
  background-color: gray;
  padding: 20px;
  border: 10px solid black;
}

.box2 {
  width: 400px;
  height: 200px;
  background-color: #df2232;
  
}

.box3 {
  padding: 20px;
  box-siziing: border-box;
  width: 200px;
  hegith: 100px;
  color: #fff;
  background-color: crimson;
  border: 10px solid black;
}

.box4 {
  padding: 20px;
  box-siziing: border-box;
  width: 200px;
  hegith: 100px;
  color: #fff;
  background-color: lime;
  border: 10px solid black;
}