Converting DIV-like page into blog-like layout within CSS?

Question

This is my HTML page:

https://jsfiddle.net/62czmtvt/2/ (to actually see the HTML page working)

Code from JSFiddle:

:root {
  background-color: #FFFACD;
}

div.infoguide {
  width: 240px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  background-color: #F0FFF0;
}

div {
  margin: 5;
  padding: 0;
  border: 0;
  outline: 0;
}

A:link {
  text-decoration: underline;
  color: rgb(204, 51, 51);
}

A:visited {
  text-decoration: underline;
  color: rgb(204, 51, 51);
}

A:active {
  text-decoration: underline;
  color: rgb(204, 51, 51);
}

A:hover {
  text-decoration: underline;
  color: rgb(204, 51, 51);
}

body {
  margin-left: 0px;
  margin-top: 0px;
}

body,
td,
th {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: rgb(46, 46, 46);
  line-height: 16px;
}

h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  margin-bottom: 0px;
}

h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 0px;
}

h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 0px;
}

h3 A:link {
  text-decoration: none;
  color: rgb(204, 51, 51);
}

h3 A:visited {
  text-decoration: none;
  color: rgb(204, 51, 51);
}

h3 A:active {
  text-decoration: none;
  color: rgb(204, 51, 51);
}

h3 A:hover {
  text-decoration: underline;
  color: rgb(204, 51, 51);
}

ul {
  margin-left: 1.5em;
  padding-left: 0px;
}

.info_data {
  border-color: rgb(137, 137, 137);
  border-style: solid;
  border-width: 1px;
  font-size: 11px;
  padding: 4px;
  text-align: center;
}

.news_headline {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: bold;
  line-height: 22px;
}

.red {
  color: rgb(204, 51, 51);
}

.red_padded {
  color: rgb(204, 51, 51);
  padding: 4px 0px;
}

.redbg {
  background-color: rgb(220, 6, 0);
}

<title>First Drive: 2017 Porsche Panamera - Autos.ca</title>
<div class="infoguide">
  <H3>It works!</h3>
  <p>It works!</p>
</div>

<div class="info_data">
</div>
<div class="infoguide">
  <h2 class="red">A headline</h2>
  <p>It works!</p>
</div>

It's a sandbox page for a blog-like layout of a magazine site, and I'm trying to achieve this sort of look:

Magazine article

but so far I haven't quite managed to get it to look the way I want to of being a three-column DIV with a header in a pseudo-blog-style layout.

I've been trying the :root element in my CSS file, is this encouraged or discouraged in a HTML5 page?

I would appreciate any advice or help with this!

Answer 1

In order to achieve three columns, you will need to alter your code a bit.

1. You need a wrapper/container around your three divs you are attempting to separate and give it a 100% width or whatever width you want.
2. You need to give the three divs a similar second class name and apply a float and a width to those divs. (There are other ways, but this is the clean way).

CSS:

<style>
.page-container {
    width: 100%;
}

.infoguide { 
    float: left;
    width: 30%; 
}
</style>

HTML:

<title>First Drive: 2017 Porsche Panamera - Autos.ca</title>
    <div class="page-container">
        <div class="infoguide">
            <H3>It works!</h3>
            <p>It works!</p>
        </div>

        <div class="infoguide">
            <h1>Test Content</h1>
        </div>

        <div class="infoguide">
            <h2 class="red">A headline</h2>
            <p>It works!</p>
        </div>
    </div>

I would also consider reading into flexbox if you're unfamiliar with it. It's a great way to make responsive webpages with many divs in column format. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

You're going to have to make a couple of changes:

1. Wrap the divs that you want to be aside each other in another div (let's call it wrapper).
2. Float the contents of the wrapper div to the left and give them the desired widths to get the layout.
3. Make sure to include a clearfix to clear the floats.. or the content that comes after the wrapper div will sit beneath it.
4. Use media queries to adjust the layout for mobile devices.

This is a very basic example of how to do that. I set a width for container, float the elements, set a width for them and then using media queries, I adjust the layout so that they fill the full width when the viewport is below 500px.

Notice that the main and sidebar don't have any space between them. If you want to separate them with a bit of margin, check this answer of mine.

https://jsfiddle.net/63o6mfy8/2/

Also be sure to clear the floats like I did in the fiddle.

.page-container::after {
  content: '';
  display: table;
  clear: both;
}

Answer 3

You should learn Bootstrap. With Bootstrap you can easily build whatever layout you want. For now you can start with the following snippet. For clear understanding start learning Bootstrap here.

/* These are demo CSS to show the output nicely, do not use these */

.header {
  height: 100px;
  background: #ffa114;
}

.left-column {
  background: #4fff4f;
  height: 180px;
}

.right-column {
  background: #52a8ff;
}

.footer {
  height: 100px;
  background: #ffa114;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
  <div class="header">
    Here is the title
  </div>
  <div class="container">
    <div class="row">
      <div class="left-column col-9">
        Left Column
      </div>
      <div class="right-column col-3">
        Right Column
      </div>
    </div>
  </div>
  <div class="footer">
    Bottom Content
  </div>
</div>

Answer 4

I'll restate the obvious, and repeated suggestion, to learn and leverage Bootstrap. I'm still learning myself, so maybe the details I've included here will assist you understanding how to leverage the templates that already exist. In this answer I've modified the Jumbotron template, which is included with the Bootstrap download.

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="../../../../favicon.ico">

  <title>Jumbotron Template for Bootstrap</title>

  <!-- Bootstrap core CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  
</head>

<body>

  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu" aria-labelledby="dropdown01">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>

  <main role="main">

    <div class="jumbotron"><!-- start jumbotron -->

      <div class="container"><!-- start title container -->
        <h1>First Drive: 2017 Porsche Panamera</h1>
        <h2>Awesome!!!</h2>
      </div><!-- end title container -->

    </div><!-- end jumbotron -->

    <div class="container"><!-- start article container -->

      <div class="row"><!-- start container row -->

        <div class="col-md-9"><!-- start article column -->
          <h2>Intro</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>

          <div class="row"><!-- start sub row -->

            <div class="col-md-9">
              <h3>Article</h3>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            </div>

            <div class="col-md-3">
              <h3>Mini Side</h3>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            </div>

          </div><!-- end sub row -->
        
        </div><!-- end article column -->

        <div class="col-md-3"><!-- start side column -->
          <h3>Side</h3>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus
            commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
            risus. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </div><!-- end side column -->

      </div><!-- end container row -->

      <hr>

    </div><!-- end article container -->

  </main>

  <footer class="container">
    <p>&copy; Company 2017-2018</p>
  </footer>

</body>

</html>

One of the beautiful aspects of using Bootstrap is responsive design. You'll need a whole lot more details to replicate the full look of the site example you provided, but I think, other than some of the ad spaces, this should get you started, with the columns necessary to isolate your titles, the article, add images, etc.

You'll also notice that I didn't need to change any of the CSS that's also included with Bootstrap, i just referenced the CDN.

I hope this helps.