Skip to main content
V
VShaneCurtis
Inspiring
June 1, 2022
Question

Positioning Elements Inside Other Elements

  • June 1, 2022
  • 4 replies
  • 3700 views

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.

,

 

This topic has been closed for replies.

4 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
June 1, 2022

 

<articles> are more important than <asides>.

 

Think of pages as sandwiches. 

  • Articles are the main ingredient (the meat/protein). 
  • Asides are the bread slices on either side.

 

So you need a layout with 3 equal height columns.  The next question you need to ask yourself is how do I want the 3 columns vertically aligned on desktop displays?  Top aligned, middle aligned or bottom aligned.  

 

On smaller displays, columns should stack vertically with Article on top and Asides below.

 

Make sense?

 

Nancy O'Shea— Product User & Community Expert
O
osgood_
Legend
June 1, 2022

This is just another huge bungling mess in the life of web development. Its become so complex now that hardly anyone knows what they are doing or where to use what and when........so concequently just make it up as they go along, with good reason, its a sh*tshow these days.

 

Personally I only use the header, nav and footer, plus perhaps the main tag as they are pretty clear, which cant be said  for where to use the article tag, that just a pile of pants. 

 

There seem little difference to me if an article tag is in the main content of the website or the aside. Take the below for instance, taken from the W3c schools website. I've wrapped the articles in a main tag and added a 'read more' button

 

<main>

<h3>Latest News</h3>

 

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>

<a href="#">More Details</a>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>

<a href="#">More Details</a>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>

<a href="#">More Details</a>
</article>

</main>

 

 

So what's the differnce when the information is included in an aside tag, are they no longer articles? When is an article an article and when is it not..........flip a coin.

 

 

<aside>

<h2>Latest News</h2>

 

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>

<a href="#">More Details</a>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>

<a href="#">More Details</a>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>

<a href="#">More Details</a>
</article>

 

</aside>

 

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
June 1, 2022

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>

 

Nancy O'Shea— Product User & Community Expert
O
osgood_
Legend
June 1, 2022
quote

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:

    V
    VShaneCurtisAuthor
    Inspiring
    June 1, 2022

    Thank you I'll give this a try,  align-self never even came up in my internet searches. 

    O
    osgood_
    Legend
    June 1, 2022
    quote

    Thank you I'll give this a try,  align-self never even came up in my internet searches. 


    By @VShaneCurtis

     

    Guide to flexbox:

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    B i r n o u
    B i r n o u
    Legend
    June 1, 2022

    a draw will be more explicit to clearly understand what you need

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    June 1, 2022

    I think that the answer lies in @osgood_ 's reply here: 

    https://community.adobe.com/t5/dreamweaver-discussions/help-with-flex/m-p/12920486#M218417

     

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    L
    Community Expert
    L e n aCommunity Expert
    Community Expert
    June 1, 2022

    I confess that I don't clearly follow your need... scalded by a previous thread and not answering next to the plate, could you please complete your question with a small sketch of what you currently have, and what you would like to obtain.

     

    Anyway, by using:

    to position your blocks, you should be able to meet your expectations.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices