Underscores WP theme CSS move sidebar to side

Question

I'm trying to create a new theme in Wordpress. So far I only used child themes or messed around with some php, html and css seperately. I downloaded _s starter theme and right now I'm somewhat failing with the css. I'm trying to move the widget-area/sidebar to the left side, but no matter wat I try it will stay at the bottom of the page, and the content-area will just get decreased to 75%.

This ist what I tried:

.content-area {
 float: right;
 margin: 0 0 0 -25%;
 width: 100%;
}
.site-main {
 margin: 0 0 0 25%;
}
.site-content .widget-area {
 float: left;
 overflow: hidden;
 width: 25%;
}

I know this is pretty basic stuff and I feel kind of dumb right now, but no matter what I do the sidebar won't come to the side. I also tried setting pixel width of 200px for content and widget-area. I'll keep trying, but if somebody might know the answer and could help me I would be really happy! I would prefer not to set a z-index.

Thanks in advance, Carlos

EDIT: this is how it looks like in chrome site inspector

<div id="primary" class="site-main">blabla</div>
<div id="secondary" class="widget-area">blabla</div>

EDIT2: Could it have something to do with the dummy data that I imported? I mean all the dummy content in the widget area should not be a problem, as I set overflow: hidden; am I right?

Answer 1

It’s hard to say without seeing your HTML, but I think your problem is that the content area width needs to be set to 75%.

FWIW, here’s a simple example of a fixed-width sidebar layout using flexbox:

.content {
  background-color: lightBlue;
  padding: 10px;
}

.sidebar {
  background-color: yellow;
  padding: 10px;
}

@media all and (min-width: 600px) {
  .wrapper {
    display: flex;
  }

  .content {
    flex-grow: 1;
  }

  .sidebar {
    flex-shrink: 0;
    margin-left: 30px;
    width: 260px;
  }
}

<main class="wrapper">
  <div class="content">
    <p>Main content</p>
  </div>
  <div class="sidebar">
    <p>Sidebar</p>
  </div>
</main>

Answer 2

With this HTML structure:

<div class="site-content">
 <div class="site-main">
  Main content here.
 </div>
 <div class="widget-area">
  Sidebar content here
 </div>
</div>

And this CSS:

.site-content{
  width: 100%;
}
.site-main {
 float: right;
 width: 75%;
}
.site-content .widget-area {
 float: left;
 overflow: hidden;
 width: 25%;
}

You'll have it.

Running example here: https://jsfiddle.net/6a3ow5xq/

Answer 3

I built a theme with underscores and for some reason, they have get_sidebar() outside of the closing tag. They also do not have it inside of tags. What I did was first put get_sidebar() inside of aside tags and move that into after the closing tag. I didn't want to set the main tag to display: flex so I added a wrapper tag (div.sidebar-page) around and , then I set that to display: flex. And since you want the aside\sidebar on the left you can just set the flex-direction to row-reverse.

 .sidebar-page {
    display: flex;
    flex-direction: row-reverse;
    margin: 0 auto; /* optional */
  }