CODEWITHSUNDEEP
phpcsswordpresswidget
Ross Symonds
Ross Symonds

Reputation: 81

Getting Content-Area and Widget-Area to sit side by side

My website is www.rosstheexplorer.com.

I am using the Penscratch theme although have modified many aspects of it.

I recently made a number of changes including making my header and navigation bar full width.

One of the unintended consequences of these changes is now my widget-area is no longer sitting side by side with my content-area.

I used the Developer Tools on Google Chrome and started trying to alter the width, padding and margin of both elements. Nothing I tried resulted in anything close to what I wanted. I would do more experimentation but I have very little idea as to where to begin.

In style.css do I have to made a modification to 

.site-content .widget-area {
    margin-top: 27px;
    padding-top: 24px;
    border-top: 3px solid #eee;
}

or 

.widget {
    line-height: 2.09231em;
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 0 27px;
    padding: 0 0 27px;
    border-bottom: 1px solid #eee;

Upvotes: 1

Views: 51

Answers (2)

Rupali Pabla
Rupali Pabla

Reputation: 57

See if this code works for you: 

#primary.content-area {float: left;width: 70%;}
#primary.content-area .site-main{width:100%;}
.widget-area{float:right;width:30%;}

Upvotes: 2

Pons Purushothaman
Pons Purushothaman

Reputation: 2261

Inspecting your site, what i understand is, it is an issue related to float. try applying

float:left

for your ".widget-area"

Upvotes: 1

Related Questions