47
Replies
Hi Guys,
I'm working on fleshing out my web page. The main body has an aside on the left side an article in the center and an aside on the right. I've added three articles inside the asides. I've been trying to figure out what HTML/CSS I would need to add to position the articles at the top middle and botton of the aside. Right now they are positioned one under the other. I've added basic CSS for appearance border and color. I haven't been able to figure out if what I want to do is possible. Any help you can offer is appreciated.
,
By @VShaneCurtis
Yes you can do that by using flex 'align-self'. Example code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aligning items with Flex</title>
<style>
body {
display: flex;
margin: 0;
padding: 50px;
}
.leftAside {
flex-basis: 25%;
background-color: #eeccff;
padding: 25px;
}
.rightAside {
display: flex;
flex-wrap: wrap;
flex-basis: 25%;
background-color: #ffe0b3;
padding: 25px;
}
.mainContent {
flex: 1;
background-color: #f2f2f2;
height: 100vh;
padding: 25px;
}
.topArticle {
align-self: start;
flex-basis: 100%;
}
.middleArticle {
align-self: center;
flex-basis: 100%;
}
.bottomArticle {
align-self: end;
flex-basis: 100%;
}
</style>
</head>
<body>
<aside class="leftAside">
<h3>Aside Left</h3>
</aside>
<main class="mainContent">
<h3>Main Content</h3>
</main>
<aside class="rightAside">
<article class="topArticle">
<h3>Top article</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article class="middleArticle">
<h3>Middle article</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article class="bottomArticle">
<h3>Bottom article</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</aside>
</body>
</html>
below:
Thank you I'll give this a try, align-self never even came up in my internet searches.
By @VShaneCurtis
Guide to flexbox:
Thank you for posting your sample. It didn't quite work
By @VShaneCurtis
Sure it worked. Maybe not in the context that you were trying to deploy it but hey Im glad you sorted your issue out. I don't post anything here that doesnt work. I test the solution before I post it.
@VShaneCurtis, it's so simple:
<!doctype html>
<html lang="en-AU">
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Layout using Flexbox">
<style>
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
div, nav {
min-height: 50px;
border: 1px solid black;
padding: 5px;
margin: 5px;
}
@media screen and (min-width: 760px) {
main {
display: flex;
flex: 1;
}
main div:nth-of-type(1) {
flex: 2;
order: 2;
}
main div:nth-of-type(2) {
flex: 1;
order: 1;
}
main div:nth-of-type(3) {
flex: 1;
order: 3;
}
footer {
display: flex;
}
footer div {
flex: 1;
text-align: center;
}
}
</style>
</head>
<body>
<header>
logo
<nav>
navigation bar
</nav>
</header>
<main>
<div>
main content
</div>
<div>
<article>
<h3>First Left Article</h3>
</article>
<article>
<h3>Second Left Article</h3>
</article>
<article>
<h3>Third Left Article</h3>
</article>
</div>
<div>
<article>
<h3>First Right Article</h3>
</article>
<article>
<h3>Second Right Article</h3>
</article>
<article>
<h3>Third Right Article</h3>
</article>
</div>
</main>
<footer>
<div>
left footer
</div>
<div>
center footer
</div>
<div>
right footer
</div>
</footer>
</body>
</html>
Notes on the example:
1. The main content is important for SEO. That is why I have placed it before the sidebars
2. The footer is pushed to the bottom by making MAIN stretch to full available length
3. Articles must contain an H element (h1, h2 etc.)
4. The mobile view comes first. This is where the most important content also comes first
5. The code has been left to a minimum, no classes or ID's to speed development up. This does not mean that classes and ID's must not be used, only where neccessary
It's about semantic structure & grouping related content to make it more understandable to readers. Regardless of which tags you use, there should be a clear hierarchical order of importance to the "madness."
On mobile-first build with meat on top, bread on bottom:
<header/navigation> (minimal)
1 <section/
article/
article/
article>
2 <aside> (related news)
3 <aside> (ads)
<footer>
On large devices, this is where Flex Order comes into play.
<header/navigation>
2 <aside> 1 <section/article/article/article 3 <aside>
<footer>
By @Nancy OShea
I personally think that's a lot of crap. Just use divs and then you can put anything anywhere you like I don't buy into all this semantic twit twwat, SEO shite when the lines get murky and greyed. Either make it make sense or forget it and certainly in the case of the article tag it makes no sense at all to infer it can be an article here but not here. It hasnt been given any thought by whoever came up with the ridiculous spec for the article.
I mean you could not make this junk up if you tried, even the aside tag is NOT an aside on mobile its an underneath......what a load of cobblers we buy into!! What drunken fools suggested this rubbish naming convention.
It hasnt been given any thought by whoever came up with the ridiculous spec for the article.
By @osgood_
===========
Fiddle sticks!
By its very definition, <aside> is a contextual sidebar. It means to or toward the SIDE, away from the main content.
In plays, an aside is a remark intended for the audience to hear but not the main characters. In literature, an aside is a quip or quote, sometimes related but separate from the main story.
Similarly in newspapers, you know that the mainbar is the lead article. That's where you find the hard news. Content in sidebars is secondary. Editors never put lead articles into sidebars. But they sometimes use sidebars within the main article to provide additional context.
It's no different in HTML. <article> & <aside> derive semantic meaning from long-established precedents used in journalism long before the Internet existed.
Like it or not, that's how it is and where it comes from.
It hasnt been given any thought by whoever came up with the ridiculous spec for the article.
By @osgood_
===========
Fiddle sticks!
By its very definition, <aside> is a contextual sidebar. It means to or toward the SIDE, away from the main content.
By @Nancy OShea
LOL apart from on mobile when its not actually towards the side, more likely it will go beneath the article its related to, particulary on smartphone, so the definition becomes completely meaningless.
Like it or not, that's how it is and where it comes from.
By @Nancy OShea
Well if more were to question the questionable who knows something may make sense one day.
LOL apart from on mobile when its not actually towards the side, more likely it will go beneath the article its related to, particulary on smartphone, so the definition becomes completely meaningless.
============
You're being too literal or missing the point.
A contextual sidebar refers to content in relation to other content; not it's physical proximity. In the absence of available real estate, an <aside> can't appear alongside main content. There's no room. But it's context doesn't change. It's still a contextual sidebar and thus comes after main content, not before it.
Getting back to the original topic (about nesting), this is poor semantic structure.
<aside>
<article/> <article/> <article>
</aside>
But in some cases, this semantic structure is perfectly fine.
<article>
<aside>
</article>
============
You're being too literal or missing the point.
By @Nancy OShea
No, I'm questioning why it was named as such given its meaning becomes meaningless on mobile devices. Use something else more appropriate which relates across all devices. Its not my fault that its an oversight which was always going to cause confusion, its fairly obvious to me, at least and a poor decision. But let's be honest we are living in and increasingly dumber World so I'm the least to be surprised at the ignorance shown.
Im not sure why:
<aside>
<article></article>
</aside>
should be considered as poor mark-up in the context that the <aside> is used as a sidebar which relates to the main content. You may have articles which relate to articles in your main content, mental.
Sorry to disagree, but aside is not a sidebar per se. Aside should be used to denote content that is relevant to the main article, but outside of the flow.
As an example
<article>
<h1>Design Limitless</h1>
<p>Designers shouldn't be limited by technology, they should be able to freely express their ideas and creative work. Without limitations, without borders.</p>
<aside>
<p>Wappler was started by crowd funding in 2017</p>
</aside>
<p>With the visual design tools Wappler offers, we think we achieved that goal. They look familiar as you would expect but with powers that lift all restrictions for just prototyping, giving you access to making fully functional, data driven, interactive websites and mobile apps. Gain coding powers, visually.</p>
</article>
Sidebars are a visual part of the layout, they do not represent content. Aside represents content and not layout.
By @BenPleysier
Thats my point, its a confusing naming convention why not choose 'relevant/connected' then or something with a clearer meaningful description. The very presence of 'side' one would be forgiven for the confusion, its just ill thought out in my opinion, despite what the specs may or may not say or when and where elements can be used.
Anyway when its murky and grey I tend to just use a divs with a descriptive name which means something to me.
Anyway I think youre incorrect. An aside is quite clearly shown as a sidebar in the diagram here:
https://www.w3schools.com/html/html5_semantic_elements.asp
Whether its relevent to the section or article who knows, its a sidebar in my eyes in that context.
And while we are at it on that page why are there 2 sections and not just one. The info is all about the WWF so I dont feel 2 sections are needed. Should it not be an article or maybe 2 articles????...........hummmm.
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
AdChoices