Skip to main content
higgsyd
higgsyd
Inspiring
November 6, 2021
Answered

Just 10 html statements and already I'm confused!

  • November 6, 2021
  • 3 replies
  • 278 views

http://v60.ancestry.higgsy.co.uk/pic.html 

Can anyone explain why the second image has been pushed down from the top?  I wanted to learn flexbox so thought I would just stick two images on the page and go from there. There's no point in starting to play with flexbox various alignment parameters until I understand why this is happening here

many thanks

david

 

    This topic has been closed for replies.
    Correct answer Ben M

    I'm not seeing any code on your page to suggest the use of flexbox. All I see at the moment are two images of varying height next to each other and the default CSS attribute for alignment is baseline so they are aligned that way. I would suggest reading an article like these to get some background on using flexbox:

     

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

    - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox 

    3 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    November 6, 2021

    A quick Flexbox example with rows and columns:

     

     

    <!doctype html>
<html lang="en">
<head>
<title>Flexbox Rows | Columns</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
section{
width:95%;
min-height:400px;
margin:0 auto;
background-color:peachpuff;
}
.flex-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.flex-col {
display: flex;
flex-direction: column;
gap:12px;
align-items: center;
}
div {
width: 30%;
min-height: 200px;
text-align: center;
background-color:cornsilk;
}
</style>
</head>
<body>
<h1>CSS Flexbox</h1>
<section class="flex-row">
<div><h1>Heading 1</h1><p>Lorem ipsum dolor...</p></div>
<div><h1>Heading 1</h1><p>Lorem ipsum dolor...</p></div>
<div><h1>Heading 1</h1><p>Lorem ipsum dolor...</p></div>
</section>
<hr>
<section class="flex-col">
<div><h1>Heading 1</h1><p>Lorem ipsum dolor...</p></div>
<div><h1>Heading 1</h1><p>Lorem ipsum dolor...</p></div>
<div><h1>Heading 1</h1><p>Lorem ipsum dolor...</p></div>
</section>
</body>
</html>

     

    Nancy O'Shea— Product User & Community Expert
    higgsyd
    higgsydAuthor
    Inspiring
    November 6, 2021

    thanks Nancy, I'll give that a go asap!

    higgsyd
    higgsydAuthor
    Inspiring
    November 6, 2021

    thankyou Ben.  now i know about the default I'm a happy man!

    B
    Community Expert
    Ben MCommunity ExpertCorrect answer
    Community Expert
    November 6, 2021

    I'm not seeing any code on your page to suggest the use of flexbox. All I see at the moment are two images of varying height next to each other and the default CSS attribute for alignment is baseline so they are aligned that way. I would suggest reading an article like these to get some background on using flexbox:

     

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

    - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox 

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