Transforming a DIV-styled webpage into a blog-style design using CSS?

Question

Transforming a DIV-styled webpage into a blog-style design using CSS?

Here is my unique HTML page:

View My HTML Page (to see the HTML page in action)

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>

This webpage serves as a sandbox for a blog-like magazine layout, with intentions of achieving a three-column DIV structure resembling a pseudo-blog style.

Example Magazine Article

Despite efforts, I have yet to achieve the desired look. Any suggestions or assistance would be greatly appreciated!

I have been experimenting with the :root element in my CSS file. Is this practice recommended or discouraged in an HTML5 page?

Your insights and guidance on this matter are welcome!

css html layout css-multicolumn-layout

Answer 1

Answer №1

To create three columns, a few adjustments need to be made to your code.

Surround the three divs you want to separate with a wrapper/container and set it to 100% width or your desired width.
Give the three divs a common second class name, apply a float, and specify the width for each div. (This is a neat approach but there are other methods available).

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>

If you're not familiar with it, consider exploring flexbox as well. It's an excellent method for creating responsive webpages with multiple divs in column layout. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

To create three columns, a few adjustments need to be made to your code.

Surround the three divs you want to separate with a wrapper/container and set it to 100% width or your desired width.
Give the three divs a common second class name, apply a float, and specify the width for each div. (This is a neat approach but there are other methods available).

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>

If you're not familiar with it, consider exploring flexbox as well. It's an excellent method for creating responsive webpages with multiple divs in column layout. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

Answer №2

If you want your elements to be next to each other, here are the steps you need to follow:

Enclose the divs that should appear alongside each other within a wrapper div.
Float the contents of the wrapper div to the left and assign them the desired widths for the layout.
Ensure you add a clearfix to prevent content from stacking below the wrapper div due to floats.
Implement media queries for adjusting the layout on mobile devices.

The example provided demonstrates these steps by setting container width, floating elements, assigning widths, and using media queries to adjust the layout for viewport sizes under 500px.

Note how there is no space between the main and sidebar elements. If you prefer separation with margin, refer to this answer.

To view the code in action, visit: https://jsfiddle.net/63o6mfy8/2/

Don't forget to clear the floats as shown in the fiddle.

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

Answer 4

If you want your elements to be next to each other, here are the steps you need to follow:

Enclose the divs that should appear alongside each other within a wrapper div.
Float the contents of the wrapper div to the left and assign them the desired widths for the layout.
Ensure you add a clearfix to prevent content from stacking below the wrapper div due to floats.
Implement media queries for adjusting the layout on mobile devices.

The example provided demonstrates these steps by setting container width, floating elements, assigning widths, and using media queries to adjust the layout for viewport sizes under 500px.

Note how there is no space between the main and sidebar elements. If you prefer separation with margin, refer to this answer.

To view the code in action, visit: https://jsfiddle.net/63o6mfy8/2/

Don't forget to clear the floats as shown in the fiddle.

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

Answer 5

Answer №3

If you're looking to enhance your web development skills, Bootstrap is a great tool to learn. With Bootstrap, you have the flexibility to create customized layouts effortlessly. To get started, check out this helpful snippet below and dive into learning Bootstrap here.

/* Demo CSS for visual clarity only - please avoid using in production */

.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">
    This is the heading
  </div>
  <div class="container">
    <div class="row">
      <div class="left-column col-9">
        Content on the left
      </div>
      <div class="right-column col-3">
        Content on the right
      </div>
    </div>
  </div>
  <div class="footer">
    Footer content here
  </div>
</div>

Answer 6

If you're looking to enhance your web development skills, Bootstrap is a great tool to learn. With Bootstrap, you have the flexibility to create customized layouts effortlessly. To get started, check out this helpful snippet below and dive into learning Bootstrap here.

/* Demo CSS for visual clarity only - please avoid using in production */

.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">
    This is the heading
  </div>
  <div class="container">
    <div class="row">
      <div class="left-column col-9">
        Content on the left
      </div>
      <div class="right-column col-3">
        Content on the right
      </div>
    </div>
  </div>
  <div class="footer">
    Footer content here
  </div>
</div>

Answer 7

Answer №4

It's worth mentioning again the benefits of learning and utilizing Bootstrap. As a continuous learner myself, I hope the specifics outlined in this response will aid you in grasping how to make use of the existing templates effectively. Here, I have made adjustments to the Jumbotron template, which comes bundled 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>

<!-- Code shortened for brevity -->

</body>

</html>

A significant advantage of using Bootstrap is its responsive design capabilities. To replicate the appearance of the example site you provided, more fine-tuning and additional details are required, but this set up should give you a good starting point with the essential columns to structure your titles, articles, images, etc.

You'll notice that no modifications were needed to the CSS provided by Bootstrap as I used the CDN for reference.

I trust this information proves beneficial to you.

Answer 8

It's worth mentioning again the benefits of learning and utilizing Bootstrap. As a continuous learner myself, I hope the specifics outlined in this response will aid you in grasping how to make use of the existing templates effectively. Here, I have made adjustments to the Jumbotron template, which comes bundled 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>

<!-- Code shortened for brevity -->

</body>

</html>

A significant advantage of using Bootstrap is its responsive design capabilities. To replicate the appearance of the example site you provided, more fine-tuning and additional details are required, but this set up should give you a good starting point with the essential columns to structure your titles, articles, images, etc.

You'll notice that no modifications were needed to the CSS provided by Bootstrap as I used the CDN for reference.

I trust this information proves beneficial to you.

Transforming a DIV-styled webpage into a blog-style design using CSS?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to position the hamburger menu icon on the right side of the header?

From structured CSS to streamlined LESS syntax

Include a back button during the loading of a URL in an Electron application

Using AJAX to post button values

Improperly positioned Divs overlapping

Troubleshoot: Bootstrap Table Alignment Problem

Setting the width to auto, height to 100, and using overflow hidden does not produce the desired result

When hovering over slick text, it becomes hidden because of non-responsive CSS. Are there any solutions to make it responsive?

What is the best way to position multiple elements within mat-card-content using Angular, CSS, and HTML

Is there a way to display a particular HTML document in one frame while currently being in another frame?

Exchanging text between varying divs and classes

Placing a translucent layer over an image

Using an if/else statement to detect if the iFrame is devoid of content

having difficulty preserving the edited HTML document with JSoup and Java

Preserving the webpage's current state using HTML5 and Phonegap

Using Laravel's "@layout" directive in Ajax calls is a handy feature

CSS animations - Modifying a style element while maintaining the existing timing restrictions

What are the best practices for avoiding text wrapping around a DIV?

Syntax error when inserting PHP code snippet into HTML

Inability to activate hyperlink to a new page when utilizing a passed variable