Can someone help with this flexbox problem?

[rnbutler87]

Hi
I’m just experimenting with changing a template in wordpress but want to see if I can mockup a simple example first.
I’m trying to get the blue header full width. And then underneath, have the red and black sections next to each other, with the red box taking up 2 thirds of the space and the black box taking up the remaining third.
Here’s where I’ve got to: https://codepen.io/rnbutler87/pen/pBJVxg
Any help would be greatly appreciated.
Richard

[Paulie_D]

Frankly, the HTML structure looks messed up for this.

Yes…you’ll need to swap some things around. You want the article to be 66% wide but the header inside it to be 100% wide, that isn’t going to work.

[rnbutler87]

Maybe I’m wrong, but as I understand it, the article tag is just there for semantic reasons; I actually want the .article-content to be 66%, not the entire article tag itself.

[Paulie_D]

Regardless, the header inside the element that is 66% wide can’t be 100% of the super-container.

To get the article next to the sidebar the article needs to be 66% wide which means your header can’t be 100% wide…see?

[rnbutler87]

Sorry but I don’t understand, I’m probably being dense…! From how I thought I’d written the code, the header element isn’t inside anything that is 66%. The .article-content div is what I want to be 66% and the sidebar to sit next to it in the remaining space. Thanks for your patience…

[Paulie_D]

The header is inside the article but the sidebar isn’t.

So they can’t be next to each other because they don’t share a parent container.

To make the header 100% wide, the article needs to be 100% but it can’t be because the article has to sit next to the side bar.

So, either the header comes out of the article or the sidebar goes in….then it’s possible.

[rnbutler87]

So even though everything is in a flex container div, an article tag does not behave like a normal div?

[rnbutler87]

(and I really want to get my head around this so thank you for taking the time to explain it!!)

[Paulie_D]

So even though everything is in a flex container div, an article tag does not behave like a normal div?

It is acting like a normal div…but the fact that it’s in a flex container won’t make any difference.

The article and sidebar are both children of the flex container so if the sidebar is 33% wide what does that leave for the article…67% right?

So, if the article is a maximum of 67% wide, the header inside the article can’t be wider than that.

[LearnTheNew]

Adjust the column and rows like example i have placed a code in your codepen test
.row{
display: flex;
flex-wrap: wrap;
width: 100%;
}
.col-4{width: 33.33%; background-color: black;}
.col-8{width: 66.67%;}

[rnbutler87]

In response to Paulie D: Hi, thanks again for the reply. I’ve looked again and it makes sense what you’re saying. The only thing I don’t understand is that the

<

header> tag is not inside the

<

article> tag. But but does that still get affected by the sidebar %?

EDIT Nm, I thought Header was outisde Article, it’s not….I need to go away and think about this.

I think what I’m trying to do is honour the Article tag semantics whilst having a full width header and article content with a sidebar. I’ve seen it on other sites and I wonder if its possible

[Paulie_D]

If you can find an example of this design we can take a look at it and see how they did it!

[Author]

Posts