# adding row and cols for div

**URL:** <https://colorlibsupport.com/t/adding-row-and-cols-for-div/20825>\
**Category:** Sparkling\
**Created:** [April 11, 2018, 10:05am UTC](https://colorlibsupport.com/t/adding-row-and-cols-for-div/20825 "2018-04-11T10:05:09Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![drifty](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/d/c77e96/32.png) [@drifty](https://colorlibsupport.com/u/drifty)\
**Post date:** [April 11, 2018, 10:05am UTC](https://colorlibsupport.com/t/adding-row-and-cols-for-div/20825/1 "2018-04-11T10:05:09Z")

</div>

Hello

I’m working on a home page how can I make a row with 3 divs cols  
Many Thanks  
David

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [April 11, 2018, 10:44am UTC](https://colorlibsupport.com/t/adding-row-and-cols-for-div/20825/2 "2018-04-11T10:44:24Z")

</div>

Hello there,

I hope you are doing well today.

The following plugin can be used to add columns to the pages:

> **[Column Shortcodes](https://en-nz.wordpress.org/plugins/column-shortcodes/)**
>
> Adds shortcodes to easily create columns in your posts or pages.

As it goes for the homepage, it was not designed to use columns so in order to add them you would need a developer to change the theme’s code. You can use the following link to contact a developer:

[https://colorlib.com/out/envatostudio](https://colorlib.com/out/envatostudio)

Best Regards,  
Support

---

<div class="post-metadata">

**Author:** ![drifty](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/d/c77e96/32.png) [@drifty](https://colorlibsupport.com/u/drifty)\
**Post date:** [April 11, 2018, 3:30pm UTC](https://colorlibsupport.com/t/adding-row-and-cols-for-div/20825/3 "2018-04-11T15:30:51Z")

</div>

Hello  
I already created my own homepage just wanted to know if the theme had a css style for rows and cols.  
if not is it ok to add bootstrap rows and cols to the css?  
many thanks  
David

---

<div class="post-metadata">

**Author:** ![drifty](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/d/c77e96/32.png) [@drifty](https://colorlibsupport.com/u/drifty)\
**Post date:** [April 12, 2018, 12:12am UTC](https://colorlibsupport.com/t/adding-row-and-cols-for-div/20825/4 "2018-04-12T00:12:34Z")

</div>

ok so I manage to do it here the code incase anyone else whats to do the same thing

CSS

```auto
/* SECTIONS */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/* COLUMN SETUP */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* GRID OF THREE */
.span_3_of_3 { width: 100%; border: 1px solid #DADADA; border-radius: 4px; margin-bottom: 20px; display: block; padding: 30px;}
.span_2_of_3 { width: 66.13%; border: 1px solid #DADADA; border-radius: 4px; margin-bottom: 20px; display: block; padding: 30px;}
.span_1_of_3 { width: 32.26%; border: 1px solid #DADADA; border-radius: 4px; margin-bottom: 20px; display: block; padding: 30px;}

/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col { margin: 1% 0 1% 0%; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}

```

Divs

```auto
<div class="section group">
	<div class="col span_1_of_3">
	<?php if ( is_active_sidebar( 'horizontal-sidebar' ) ) : ?>

			<?php dynamic_sidebar( 'horizontal-sidebar' ); ?>

	<?php endif; ?>
	</div>
	<div class="col span_1_of_3">
	This is column 2
	</div>
	<div class="col span_1_of_3">
	This is column 3
	</div>
</div>

```

Hope it may help others  
Many Thanks  
David

---

<div class="post-metadata">

**Author:** ![pitpot](https://colorlibsupport.com/user_avatar/colorlibsupport.com/pitpot/32/476_2.png) [@pitpot](https://colorlibsupport.com/u/pitpot)\
**Post date:** [April 12, 2018, 4:05am UTC](https://colorlibsupport.com/t/adding-row-and-cols-for-div/20825/5 "2018-04-12T04:05:50Z")

</div>

HI,David  
Could you help me do the homepage two post preview in one row ?  
I need you help.

Many Thanks.

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [April 12, 2018, 5:26am UTC](https://colorlibsupport.com/t/adding-row-and-cols-for-div/20825/6 "2018-04-12T05:26:55Z")

</div>

Hey there

@David - thank you for sharing solution  
@pitpot - your question is similar to David’s question, it needs major modification of the theme structure and style if you don’t have enough experience you have to hire someone, or, you can use solution by David,

---

<div class="post-metadata">

**Author:** ![drifty](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/d/c77e96/32.png) [@drifty](https://colorlibsupport.com/u/drifty)\
**Post date:** [April 12, 2018, 9:34am UTC](https://colorlibsupport.com/t/adding-row-and-cols-for-div/20825/7 "2018-04-12T09:34:32Z")

</div>

Hi @pitpot

The code above is one row do you mean two cols one row if so then do this

CSS

```auto
/* SECTIONS */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/* COLUMN SETUP */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* GRID OF one */
.span_2_of_3 { width: 50%; border: 1px solid #DADADA; border-radius: 4px; margin-bottom: 20px; display: block; padding: 30px;}
.span_1_of_3 { width: 50%; border: 1px solid #DADADA; border-radius: 4px; margin-bottom: 20px; display: block; padding: 30px;}

/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col { margin: 1% 0 1% 0%; }
	.span_1_of_3 { width: 50%; }
        .span_2_of_3 { width: 50%; border: 1px solid #DADADA; border-radius: 4px; margin-bottom: 20px; display: block; padding: 30px;}
}

```

Div

```auto
<div class="section group">
	<div class="col span_1_of_3">
post preview 1
	</div>
	<div class="col span_1_of_2">
post preview 2
	</div>
</div>

```

---

<div class="post-metadata">

**Author:** ![pitpot](https://colorlibsupport.com/user_avatar/colorlibsupport.com/pitpot/32/476_2.png) [@pitpot](https://colorlibsupport.com/u/pitpot)\
**Post date:** [April 12, 2018, 10:05am UTC](https://colorlibsupport.com/t/adding-row-and-cols-for-div/20825/8 "2018-04-12T10:05:41Z")

</div>

HI David  
Many thanks your help,  
The DIV how to add in the index.php file?i try edit many time,the result is not correct  
i know…my PHP/progam skill too bad =.=

please advise/help.  
Many Thanks.

---

<div class="post-metadata">

**Author:** ![drifty](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/d/c77e96/32.png) [@drifty](https://colorlibsupport.com/u/drifty)\
**Post date:** [April 12, 2018, 10:37am UTC](https://colorlibsupport.com/t/adding-row-and-cols-for-div/20825/9 "2018-04-12T10:37:28Z")

</div>

Sorry @pitpot that a bit out of my dept sorry

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [April 12, 2018, 1:01pm UTC](https://colorlibsupport.com/t/adding-row-and-cols-for-div/20825/10 "2018-04-12T13:01:08Z")

</div>

Hi @pitpot ,

As stated before, it would be best to use a third party developer to make these changes. Please have a look at the following link to contact one:

[https://colorlib.com/out/envatostudio](https://colorlib.com/out/envatostudio)

Take care.

---

<div class="post-metadata">

**Author:** ![pitpot](https://colorlibsupport.com/user_avatar/colorlibsupport.com/pitpot/32/476_2.png) [@pitpot](https://colorlibsupport.com/u/pitpot)\
**Post date:** [April 12, 2018, 1:20pm UTC](https://colorlibsupport.com/t/adding-row-and-cols-for-div/20825/11 "2018-04-12T13:20:21Z")

</div>

Dear all

Many thanks ,help a lot i will try do myself and consider the envatostudio service.

Thanks

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [April 12, 2018, 2:42pm UTC](https://colorlibsupport.com/t/adding-row-and-cols-for-div/20825/12 "2018-04-12T14:42:49Z")

</div>

Hello @pitpot,

I am sorry for the inconvenience caused here.  
Please feel free to contact us again in the future regarding any other issues.

Best Regards,  
Support