Underscores WP theme CSS move sidebar to side - css

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

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 */
}

Answer 3

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/