I am trying to make something like this:
|--------------------------------------------------------|-------------|
| | |
| DIV 1 | |
| | DIV 3 |
|--------------------------------------------------------| |
| DIV 2 | |
|--------------------------------------------------------|-------------|
I can't use a table for this. And I don't know if there's a way to just let them stack like that?
I tried it with the code below, but DIV 3 is not all the way at the top. It is actually exactly div2.height lower from the top.
#DIV_1 {
height: 125px;
width: 80%;
display: block;
float: left;
}
#DIV_2 {
width: 80%;
height: 15px;
display: block;
}
#DIV_3 {
display: block;
float: left;
height: 140px;
width: 20%;
}
<div class="row" style="width: 1024px; height: 140px;">
<div>
<div id="DIV_1"></div>
<div id="DIV_2"></div>
</div>
<div id="DIV_3">
</div>
</div>
The layout is relatively simple with CSS flexbox:
.row {
display: flex; /* establish flex container */
height: 140px; /* height from original code */
width: 1024px; /* width from original code */
}
.row > div:first-child {
flex: 0 0 80%; /* width from original code */
display: flex;
flex-direction: column; /* stack first div children vertically */
}
.row > div:first-child > div {
flex: 1; /* items in first div distribute space equally */
border: 1px dashed black;
}
.row > div:last-child {
flex: 0 0 20%;
border: 1px dashed black;
}
<div class="row">
<div>
<div id="DIV_1">DIV #1</div>
<div id="DIV_2">DIV #2</div>
</div>
<div id="DIV_3">DIV #3</div>
</div>
Benefits of flexbox:
minimal code; very efficient
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex elements
it's responsive
unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.
Browser support:
Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
Try this. I removed float and width from DIV_1 and DIV_2 and put it on the parent.
#DIV_0 {
width: 80%;
float: left;
}
#DIV_1 {
height: 125px;
}
#DIV_2 {
height: 15px;
}
#DIV_3 {
float: left;
height: 140px;
width: 20%;
}
<div class="row" style="width: 1024px; height: 140px;">
<div id="DIV_0">
<div id="DIV_1">div1</div>
<div id="DIV_2">div2</div>
</div>
<div id="DIV_3">
div3
</div>
</div>
Do not use floating with #DIV_1. Instead use float: left, width: 80% with the parent of #DIV_1.
I would highly recommend using Bootstrap Grid.
Something like this:
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">DIV 1</div>
<div class="row">DIV 2</div>
</div>
<div class="col-md-4>DIV 3</div>
</div>
</div>
You can accomplish this with twitter's bootstrap. Link to the bootstrap online:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Then you can use the below code to accomplish that:
<div class="row">
<div class="col-lg-8">
<div class="row"></div>
<div class="row"></div>
</div>
<div class="col-lg-4"></div>
</div>
Try this one:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#one img, #two img{width: 300px;
height: 300px;}
#three img{height: 600px;
width: 600px;}
div#onetwo, div#three{display: inline-block;}
</style>
</head>
<body>
<div id="onetwo">
<div id="one"><img src="image1.jpg" alt=""></div>
<div id="two"><img src="image2.jpg" alt=""></div>
</div>
<div id="three"><img src="image3.png" alt=""></div>
</body>
</html>
or use bootstrap
This can also be achieved using pure CSS with CSS Grid.
main {
display: grid;
grid-template-columns: 1fr 1fr;
}
<main>
<div class="col-1">
<div class="row-1">
row 1
</div>
<div class="row-2">
row 2
</div>
</div>
<div class="col-2">
column 2
</div>
</main>
The benefit I find of using CSS grid is that it takes very few CSS rules if your HTML is defined well.
CSS Tricks has an in-depth Guide to CSS Grid which includes browser support information (now implemented in most modern browsers).
Related
I have a main wrapper div that is set 100% width. Inside that i would like to have two divs, one that is fixed width and the other that fills the rest of the space. How do i float the second div to fill the rest of the space. Thanks for any help.
There are many ways to do what you're asking for:
Using CSS float property:
<div style="width: 100%; overflow: hidden;">
<div style="width: 600px; float: left;"> Left </div>
<div style="margin-left: 620px;"> Right </div>
</div>
Using CSS display property - which can be used to make divs act like a table:
<div style="width: 100%; display: table;">
<div style="display: table-row">
<div style="width: 600px; display: table-cell;"> Left </div>
<div style="display: table-cell;"> Right </div>
</div>
</div>
There are more methods, but those two are the most popular.
CSS3 introduced flexible boxes (aka. flex box) which can also achieve this behavior.
Simply define the width of the first div, and then give the second a flex-grow value of 1 which will allow it to fill the remaining width of the parent.
.container{
display: flex;
}
.fixed{
width: 200px;
}
.flex-item{
flex-grow: 1;
}
<div class="container">
<div class="fixed"></div>
<div class="flex-item"></div>
</div>
Demo:
div {
color: #fff;
font-family: Tahoma, Verdana, Segoe, sans-serif;
padding: 10px;
}
.container {
background-color:#2E4272;
display:flex;
}
.fixed {
background-color:#4F628E;
width: 200px;
}
.flex-item {
background-color:#7887AB;
flex-grow: 1;
}
<div class="container">
<div class="fixed">Fixed width</div>
<div class="flex-item">Dynamically sized content</div>
</div>
Note that flex boxes are not backwards compatible with old browsers, but is a great option for targeting modern browsers (see also Caniuse and MDN). A great comprehensive guide on how to use flex boxes is available on CSS Tricks.
I don't know much about HTML and CSS design strategies, but if you're looking for something simple and that will fit the screen automatically (as I am) I believe the most straight forward solution is to make the divs behave as words in a paragraph. Try specifying display: inline-block
<div style="display: inline-block">
Content in column A
</div>
<div style="display: inline-block">
Content in column B
</div>
You might or might not need to specify the width of the DIVs
You can use CSS grid to achieve this, this is the long-hand version for the purposes of illustration:
div.container {
display: grid;
grid-template-columns: 220px 20px auto;
grid-template-rows: auto;
}
div.left {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: row1-start
grid-row-end: 3;
background-color: Aqua;
}
div.right {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end; 1;
background-color: Silver;
}
div.below {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end; 2;
}
<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="below">Below</div>
</div>
Or the more traditional method using float and margin.
I have included a background colour in this example to help show where things are - and also what to do with content below the floated-area.
Don't put your styles inline in real life, extract them into a style sheet.
div.left {
width: 200px;
float: left;
background-color: Aqua;
}
div.right {
margin-left: 220px;
background-color: Silver;
}
div.clear {
clear: both;
}
<div class="left"> Left </div>
<div class="right"> Right </div>
<div class="clear">Below</div>
<div style="width: 200px; float: left; background-color: Aqua;"> Left </div>
<div style="margin-left: 220px; background-color: Silver;"> Right </div>
<div style="clear: both;">Below</div>
<div class="container" style="width: 100%;">
<div class="sidebar" style="width: 200px; float: left;">
Sidebar
</div>
<div class="content" style="margin-left: 202px;">
content
</div>
</div>
This will be cross browser compatible. Without the margin-left you will run into issues with content running all the way to the left if you content is longer than your sidebar.
If you're not tagetting IE6, then float the second <div> and give it a margin equal to (or maybe a little bigger than) the first <div>'s fixed width.
HTML:
<div id="main-wrapper">
<div id="fixed-width"> lorem ipsum </div>
<div id="rest-of-space"> dolor sit amet </div>
</div>
CSS:
#main-wrapper {
100%;
background:red;
}
#fixed-width {
width:100px;
float:left
}
#rest-of-space {
margin-left:101px;
/* May have to increase depending on borders and margin of the fixd width div*/
background:blue;
}
The margin accounts for the possibility that the 'rest-of-space' <div> may contain more content than the 'fixed-width' <div>.
Don't give the fixed width one a background; if you need to visibly see these as different 'columns' then use the Faux Columns trick.
Give the first div float: left; and a fixed width, and give the second div width: 100%; and float: left;. That should do the trick. If you want to place items below it you need a clear: both; on the item you want to place below it.
How can I place two divs next to each other using css. I tried a few things on my own, but not sure where my mistakes are. Thanks!
css:
.posts{
display: flex;
flex-direction: row;
}
.posts .col-md-6{
padding-top: 14px;
display: flex;
flex-direction: column;
}
.posts .searchandlists{
padding-top: 14px;
display: flex;
flex-direction: column;
/*float: right;*/
/*padding-bottom: 14px;*/
}
.list-group{
max-height: 300px;
margin-bottom: 10px;
overflow:scroll;
-webkit-overflow-scrolling: touch;
}
html:
#extends('layouts.master')
#section('content')
<section class="row posts">
<div class="col-md-6 col-md-3-offset></div>
<div class="container searchandlists"></div>
</section>
It's required to have one .container as the parent before you can use .row (https://getbootstrap.com/docs/4.3/layout/overview/#containers).
col-md-3-offset is not in bootstrap4. Use .offset-md-3 instead (https://getbootstrap.com/docs/4.3/layout/grid/#offsetting-columns).
I will personally use bootstrap grid system as the structure and customize the elements inside. I would not write custom styles on existing bootstrap elements, like what you did on .post .col-md-6, unless you know what you're doing.
I will prefer to have a layout like this:
<section class="posts">
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3"></div>
<div class="col-md-3">
<div class="searchandlists"></div>
</div>
</div>
</div>
</section>
try using this ,approve answer if helps
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
.box1{width: 400px; height: 400px; background-color: red; float: left;}
.box2{width: 400px; height: 400px; background-color: blue; float: left; margin-left: 50px;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
I have gotten into the habit of using tables a lot.
<section class="row posts">
<tr>
<td><div class="col-md-6 col-md-3-offset></div></td>
<td><div class="container searchandlists"></div></td>
</tr>
Even with separate div elements, the two items should show up side by side. Hope it helps and cheers!
I'm working with a framework developed in-house which depends on a certain structure to our HTML. And one of the tricky things is that each row needs its own container with its own classes and data attributes.
So here's the problem. Without drastically changing the DOM, how can I make the flex box below render essentially like an HTML table would? Or is a table the only way? The solution will have to work in both IE11 and Chrome.
I'm trying to make it look like this...
Column A | Column B | Column C
1 | 2 | 3
section {
display: flex;
flex-wrap: wrap;
}
section .col {
flex: 1 1 auto;
}
section .line-break {
flex-basis: 100%;
width: 0px;
height: 0px;
overflow: hidden;
}
<html>
<head>
</head>
<body>
<section>
<header>
<div class="col">Column A</div>
<div class="col">Column B</div>
<div class="col">Column C</div>
</header>
<div class="line-break"></div>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
</section>
</body>
</html>
header, .row {
display: flex; /* aligns all child elements (flex items) in a row */
}
.col {
flex: 1; /* distributes space on the line equally among items */
}
<section>
<header>
<div class="col">Column A</div>
<div class="col">Column B</div>
<div class="col">Column C</div>
</header>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
</section>
If the content you are going to present is of type tabular data, then a table is the proper way.
HTML 5.1 W3C Recommendation, 1 November 2016, 4.9 Tabular data
Given that you can't, or don't want to, alter the markup, this can be done using CSS Table, and with that easily swap between any display type such as flex, block, etc., or even float, using media query etc.
I also removed the <div class="line-break"></div> element, since you don't need, though if it is rendered by a component or similar, leaving it as is won't cause any problem.
Using CSS Table
section {
display: table;
width: 100%;
}
section > * {
display: table-row;
}
section .col {
display: table-cell;
}
<html>
<head>
</head>
<body>
<section>
<header>
<div class="col">Column A</div>
<div class="col">Column B</div>
<div class="col">Column C</div>
</header>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
</section>
</body>
</html>
If you still need, or have to, use Flexbox, this answer of mine mention the difference between CSS Table and Flexbox on two important features:
Can flexbox handle varying sizes of columns but consistent row height?
Updated, a sample showing some useful Flexbox stuff, with varying width's and span columns.
Using Flexbox
.tbl {
display: flex;
flex-direction: column;
}
.row {
display: flex;
min-height: 50px;
}
.cell {
flex: 4;
border: 1px solid red;
}
.cell:nth-child(1) {
flex: 1;
}
.cell:nth-child(2) {
flex: 2;
}
.cell.span4-5 {
flex: 8 24px; /* col 4,5 flex-grow/border/padding */
}
.cell.span3-4 {
flex: 8 24px; /* col 3,4 flex-grow/border/padding */
}
.cell.span3-5 {
flex: 12 36px; /* col 3,4,5 flex-grow/border/padding */
}
.row:first-child .cell {
display: flex;
justify-content: center; /* center horiz. */
align-items: center; /* center vert. */
}
.row .cell {
padding: 5px;
box-sizing: border-box;
}
<div class="tbl">
<div class="row">
<div class="cell">ID </div>
<div class="cell">Nr </div>
<div class="cell">Header 1 </div>
<div class="cell span4-5"> Header 2 </div>
</div>
<div class="row">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
</div>
<div class="row">
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell span3-5">Content</div>
</div>
<div class="row">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell span3-4">Content</div>
<div class="cell">Content</div>
</div>
</div>
This code works for me:
* {
box-sizing: border-box;
}
body, html {
height: 100%;
margin: 0;
}
#container {
width: 400px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
background-color: lightgrey;
padding: 10px;
}
.shelf {
flex: 1 1 auto;
width: 100%;
margin-bottom: 10px;
border: 1px solid black;
background-color: lightgreen;
display: flex;
flex-direction: row;
}
.shelf:last-child {
margin-bottom: 0;
}
.labelbox {
flex: 0 0 35%;
}
.valuebox {
flex: 0 0 65%;
}
<div id="container">
<div class="shelf">
<div class="labelbox">Name: </div> <div class="valuebox">Barry Carter</div>
</div>
<div class="shelf">
<div class="labelbox">DOB:</div><div class="valuebox">10/12/1980</div>
</div>
<div class="shelf">
<div class="labelbox">
Description:
</div>
<div class="valuebox">
This content goes on and on and will force the height to expand. And the label box to the left will
"move" with it. There need not be much of a relation other than that their parent div/flex-container is
getting taller as well.
</div>
</div>
<div class="shelf">
<div class="labelbox">Group:</div><div class="valuebox">Advanced</div>
</div>
<div class="shelf">
<div class="labelbox">End Date:</div><div class="valuebox">2020-09-20</div>
</div>
</div>
Use CSS Grid. You can style any table the way you like.
Keep in mind If your table is more than 700 rows, the fram rate will start to drop, no matter what js framework you use. react, angular, vue or vanila JS. the scrolling will get real laggy.
And the maximum you row can use is 1000. More than that the extra row will create bad graphic. But you wont reach 1000 anyway, because at 700th row, the scrolling speed, starts to get bad.
If somehow you need to display more than 1000 rows, you will visualized lib. Every js framework has a lib to do so. Basically, it will render the rows in the view port. The rows that not in the view port will not be rendered. They will only be rendered when user scrolls.
This is year 2021, chances you read this answer in the future, the browsers vendor might probably fix the performance of 1000 rows, they might even extend that limit. So try it out.
I used the styling from this thread to make a progress bar fill in the empty space in a div (only other item is a button).
The problem is now that align-items: center doesn't vertically center the progress bar. I tried using align-content: center on the child too, with no effect.
Here's the code in case you didn't open the link
.wrapper {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 5em;
background: #ccc;
}
.wrapper > .left
{
background: #fcc;
}
.wrapper > .right
{
background: #ccf;
flex: 1;
}
Markup:
<div class="wrapper">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
Can someone tell me what I'm doing wrong? Thanks in advance
This is how it looks:
I guess you can do the following to get it right:
There is a margin coming for the .progress element- first you can nullify it:
.wrapper > .left > .progress {
margin: 0;
}
Give 100% height for wrapper
I also removed height: 10vh for the container of wrapper to finish things up.
See revised fiddle here and snippet below:
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.wrapper {
display: flex;
align-items: center;
width: 100%;
background: #ccc;
height: 100%;
}
.wrapper > .left {
background: #fcc;
flex: 1;
}
.wrapper > .right {
background: #ccf;
}
.wrapper > .left > .progress {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-s-6 col-s-offset-3" style="background:purple; position:relative; border-radius:10px;">
<div class="wrapper">
<div class="left">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width:35%">
</div>
</div>
</div>
<div class="right">
<button type="button" aside-menu-toggle="menu-1" class="btn btn-sm btn-default">Меню</button>
</div>
</div>
</div>
</div>
</div>
Let me know your feedback on this. Thanks!
A flex container will enable a flex context only to its direct children. Hence, your "progress-bar" div is out of reach. Likewise, your purple background bar is before flex container (wrapper), so don't expect it's content to be centered either. You can check this guide.
Check this code:
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-s-6 col-s-offset-3" style="background:purple; height:10vh; position:relative; border-radius:10px;">
<div class="wrapper">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
</div>
</div>
</div>
Pen based on your code here
Try adding
align-items: center;
justify-content: center;
to your .wrapper class.
Here is a good article on FlexBox positioning:
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
I was wondering what the best approach would be to create a 5 column layout in Bootstrap and give those divs a border and spacing.
I've created a new class to make the grid suitable for 5 columns, like so:
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
position: relative;
min-height: 1px;
}
.col-xs-15 {
width: 20%;
float: left;
}
#media (min-width: 768px) {
.col-sm-15 {
width: 20%;
float: left;
}
}
#media (min-width: 992px) {
.col-md-15 {
width: 20%;
float: left;
}
}
#media (min-width: 1200px) {
.col-lg-15 {
width: 20%;
float: left;
}
}
<div class="item col-md-15">
<div class="item-wrap">
.....
</div>
</div>
What I try to do is to give each column 10px margin on the right (except for last column offcourse). Further I want to give each column or item-wrap a 1px border.
Whatever I try I always end up with no margin.
.item {
border: 1px solid #efefef;
padding:10px;
}
.item.last {
margin-right: 0;
}
See my fiddle
Currently, 5, 7 and 9 column layouts are not supported in native Bootstrap, as the default 12 column structure isn't evenly divisible by those numbers. In order to get a 5 column layout, you would need to visit http://getbootstrap.com/customize/#grid-system and modify the #grid-columns value to 15 (or really, anything that is evenly divisible by 5).
After customizing and downloading your personal version of Bootstrap, you could then implement a 5 column layout using:
<div class="col-xs-3">Column 1</div>
<div class="col-xs-3">Column 2</div>
<div class="col-xs-3">Column 3</div>
<div class="col-xs-3">Column 4</div>
<div class="col-xs-3">Column 5</div>
And you wouldn't have to mess with CSS to try and mimic the existing Bootstrap classes and styles. Just be cautious using this approach, as any existing columnar layouts may be affected by this change.
If you want to give all columns a margin for spacing, you can use pseudo classes to achieve this:
.item:not(:last-child) {
margin-right:10px;
}
Basically this will give all elements with the .item class a right margin, except for the last element. Here is your updated fiddle.
With the release of bootstrap-4, we saw lots of new features and changes it came up with. One such change was dropping floats and percentages, and using the flex-box for layouts in bootstrap-4.
Bootstrap-4 is built on top of the flex-layout.
So whenever we have such a requirement where our layout is not fitting to the usual 12-grid layout of our bootstrap-4 ,we can use our customized CSS (using flexbox properties) to create any number column responsive layout(in your case which is a 5 column layout), since flexbox gives us so much flexibility in doing so. Use the below code that I've wrote to achieve this.
HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./style.css" />
<title>5 column layout in flexbox</title>
</head>
<body>
<main class="flex-container">
<div class="flex-item col1">col1</div>
<div class="flex-item col2">col1</div>
<div class="flex-item col3">col3</div>
<div class="flex-item col4">col4</div>
<div class="flex-item col5">col5</div>
</main>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding-top: 1rem;
}
/* --- This much code will do it for you --- */
.flex-container {
display: flex;
}
.flex-item {
min-height: 400px;
border: 4px solid #03a503;
margin: 0 0.5rem;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
.flex-item:first-of-type,
.flex-item:last-of-type {
margin-right: 1rem;
}
/* ----- Basic break-point ----- */
#media screen and (max-width: 768px) {
.flex-container {
flex-direction: column;
}
.flex-item {
min-height: 100px;
margin: 0.5rem;
}
.flex-item:first-of-type,
.flex-item:last-of-type {
margin: 0.5rem;
}
}
Here is the full code https://jsfiddle.net/cLmq0otv/3/
Hope this code solves the problem.
You have to use Auto-layout columns, column classes without an explicit numbered. You may use predefined grid classes, grid mixins, or inline widths to set the width of one column and have the sibling columns automatically resize.
.col{
padding:1rem;
}
.col div{
border:1px solid red;
min-height:5rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
<div>content column 1</div>
</div>
<div class="col">
<div>content column 2</div>
</div>
<div class="col">
<div>content column 3</div>
</div>
<div class="col">
<div>content column 4</div>
</div>
<div class="col">
<div>content column 5</div>
</div>
</div>
</div>