CODEWITHSUNDEEP
htmlcss
1ironaut
1ironaut

Reputation: 21

align columns and photos

I can't remember how to align the 2 columns like in the photo

How can I make 2 columns like this?

I have already tried using a column container but I can properly align the 2 columns.

<div id="wrapper">
<div id="column_container">
<div class="column">
<h2>header text</h2>
<p>paragraph text</p>
</div>
<div class="column">
<h2>header text</h2>
<p>paragraph text</p>
</div>
</div>
</div>

Upvotes: 2

Views: 48

Answers (4)

ITChristian
ITChristian

Reputation: 11271

Method 1: using inline-block

To make two centered column, you should use display: inline-block for the columns and the parent div should have text-align: center. When using inline-block then the parent is 'considering' them a simple 'text'.

#container {
  width: 100%; /* OR 100% */
  text-align: center;
}
.column {
  width: 150px;
  display: inline-block;
  margin: 20px;
  background: #fafafa;
  padding: 10px;
  vertical-align: top;
}
<div id="container">
  <div class="column">
   <b>Title 1</b>
   <br/><br/>
   <img width="50" src="https://theme4press.com/wp-content/uploads/2015/11/featured-small-circular.jpg"/>
  </div>
  <div class="column">
   <b>Title 2</b>
    <br/><br/>
   <img width="50" src="https://theme4press.com/wp-content/uploads/2015/11/featured-small-circular.jpg"/>
  </div>
</div>

Method 2: using table

You can also create a table with two columns and center the table with margin: 0 auto 0, relative to container's width.

#container table {
  width: 300px;
  margin: 0 auto 0;
}
#container table td {
  background: #FAFAFA;
  text-align: center;
}
<div id="container">
  <table>
  <tr>
    <td><b>Title 1</b>
        <br/><br/>
       <img width="50" src="https://theme4press.com/wp-content/uploads/2015/11/featured-small-circular.jpg"/>
    </td>
    <td><b>Title 2</b>
        <br/><br/>
       <img width="50" src="https://theme4press.com/wp-content/uploads/2015/11/featured-small-circular.jpg"/>
    </td>
  </tr>
  </table>
</div>

Method 2: using css table

You can also create a table with two columns usind display: table-cell for the columns, display: table-row fort the row and display: table for the entire table and center the table with margin: 0 auto 0.

#container {
  display: table;
  margin: 0 auto 0;
}
#row {
  display: table-row;
}
.column {
  width: 150px;
  display: table-cell;
  margin: 20px;
  background: #fafafa;
  padding: 10px;
  vertical-align: top;
  text-align: center;
}
<div id="container">
  <div id="row">
  <div class="column">
   <b>Title 1</b>
   <br/><br/>
   <img width="50" src="https://theme4press.com/wp-content/uploads/2015/11/featured-small-circular.jpg"/>
  </div>
  <div class="column">
   <b>Title 2</b>
    <br/><br/>
   <img width="50" src="https://theme4press.com/wp-content/uploads/2015/11/featured-small-circular.jpg"/>
  </div>
  </div>
</div>

Upvotes: 1

Justin
Justin

Reputation: 154

You can add a css rule to make the column class be displayed "inline-block"

    <html>
<head>
    <title>TODO supply a title</title>
    <meta charset="windows-1252">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        .column{
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="column_container">
            <div class="column">
                <h2>header text</h2>
                <p>paragraph text</p>
            </div>
            <div class="column">
                <h2>header text</h2>
                <p>paragraph text</p>
            </div>
        </div>
    </div>
</body>

You'll have to use other rules to make it look prettier or modify it however you like afterwards, but it will display in columns now.

Upvotes: 0

Mike Stringfellow
Mike Stringfellow

Reputation: 497

Just put column-count:2; in the CSS of the #column_container and column-break-after: always; in the CSS of .column. Please see this fiddle for a complete example: https://jsfiddle.net/af7xdwx6/

Upvotes: 0

andreas
andreas

Reputation: 16936

There are multiple possibilities to achieve two columns in CSS. Here's an example using float: 

.column_container {
  width: 400px;
  margin: 0 auto;
}
.column {
  width: 50%;
  text-align: center;
  border: 1px solid;
  box-sizing: border-box;
}
.colleft {
  float: left;
  color: #55a;
}
.colright {
  float: right;
  color: #a55;
}
<div id="wrapper">
  <div id="column_container">
    <div class="column colleft">
      <h2>header text</h2>
      <p>paragraph text</p>
    </div>
    <div class="column colright">
      <h2>header text</h2>
      <p>paragraph text</p>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions