Divide post content into two columns, one fixed

4 Views

I’m trying to get my posts to automatically divide into two columns with one column fixed, one scrolling. Example –

enter image description here

Read More

Similar to this website.

So far I’ve managed to divide the post into two, though it’s not behaving how I want it to. I did –

The HTML 

<td class="entry-content-left">
<div class="entry-image">
<td class="entry-content-right">
<?php the_content(); ?>

The CSS 

.entry-content-left { 
font-size: 18px;
line-height: 26px;
width: 531px; 
float: left; 
color: #444444;
} 
 .entry-content-right { 
font-size: 18px;
line-height: 26px;
width: 531px; 
float: right; 
color: #444444; 
}
.entry-image {
float: left; width: 75%; position: fixed;

Here is my website.

Post Views: 4

Related posts

Leave a Reply

1 comment

  1. You can do this using position:fixed; (more info). I made this quick layout using divs, (you should not be using tables for this kind of content) that should be the desired layout :

    FIDDLE

    HTML:

    <header></header>
<div class="entry-content-left">
    <div class="entry-image"></div>
    <div class="entry-content-right"></div>
</div>

    CSS:

    header{
    position:fixed;
    width:100%;
    top:0;left:0;
    height:100px;
    background:gold;
}
.entry-image{
    position:fixed;
    top:100px;left:5%;
    width:40%;
}
.entry-image img{
    width:100%;
    height:auto;
}
.entry-content-right{
    width:45%;
    margin-left:50%;
    margin-top:120px;
}