Tags:
If you want to ad a nice three column newspaper style to your webnode page you might find it difficult. Of course you can use a 3 column table and split the information up but that's not really the way you should do it.
For example on my homepage I have the 3 column newspaper style done in CSS. If you are using webnode as your platform and want to add this type of column on a wide layout page (no side columns) this is what you have to do:
Open Website Templates and choose Advanced Settings.
Click on Edit CSS
Add the following code after the first set of comments */:
.xouter3{
width:80%;
float:left;
margin:15px 0 15px 9%;
}
.xleftcol3{
float: left;
width: 33%;
padding-right: 10px;
}
.xmiddlecol3 {
overflow:hidden;
}
* html .xmiddlecol3{float:left}
* html .xmiddlecol3 .xinner3{width:100%;}
.xrightcol3 {
float:right;
width: 33%;
position:relative;
padding: 0px 0px 0px 10px;
}
Click save and then Close Settings from the top right corner
Now when you want to write into column style you should open the Source to write and paste this code:
<div class="xouter3">
<div class="xleftcol3">
Here you write whatever you want and it will show up on the left collum.
</div>
<div class="xrightcol3">
Here you write whatever you want and it will show up on the right collum</div>
<div class="xmiddlecol3">
<div class="xinner3">
This is the middle column
</div>
</div>
</div>
Of course you edit the bits between <div></div>.
This is an article on how to add a three column style newspaper on a webnode website. The source code comes from https://pmob.co.uk and I thank with this occasion for this wonderful piece of css.
Disclaimer. You can not blame me for your webnode website if you screw up your css code. There is also a option to restore to default so you don't have to be afraid.