1

I am having an issue structuring and styling my sidebar and header using the genesis theme.

I want a full width article header area with a sidebar that is aligned next to the entry content.

I have tried moving the header area to the genesis_before_content hook, but this causes the title and post info to be outside the article tag and associated schema, which is not ideal.

I have tried specifying the entry-header content to be full width in css, then setting the top of the sidebar to start x number of pixels down the page to align it with the entry-content. This has the problem that if the header text encompasses more than one line, the sidebar is misaligned to the entry-content.

Here is a fiddle of how I currently have the css arranged:

.wrapper {
    background-color:#f9f9f9;
    width:600px;
    height:800px;
    font-size:40px;
    color: #FFF;
}

.content {
    background-color:blue;
    opacity:0.2;
    float:left;
    position:relative;

    width:300px;
    height:100%;
}

.header {
    background-color:red;
    opacity:0.5;
    position:relative;
    width:600px;
    height:200px;
    display:inline-block;
    text-align:center;
}

.sidebar {
    background-color: green;
    opacity: 0.2;
    width: 300px;
    height: calc(100% - 200px);
    float: right;
    position: relative;
    top: 200px;
}
<div class="wrapper">
    <div class="content">
        <div class="header">Title</div>
        <div class="entry">Entry content</div>
    </div>
    <div class="sidebar">Sidebar widgets</div>
</div>

https://jsfiddle.net/j9z4tjod/

Can anyone help me find a solution?

Thanks

sackoftrout
  • 31
  • 3
  • Show us the code! See if you can simplify it to a minimal working example that exhibits your issue. If you make it easy to help you, you'll be more likely to get help – alexroussos Aug 01 '17 at 17:09
  • @alexroussos Hi thanks for the tip, I am new here :) I've added a fiddle. – sackoftrout Aug 01 '17 at 17:37

0 Answers0