Need help with CSS

#css #html #webdev

How can I move the logo, center, right elements inside the header element?

Top comments (10)

Suzanne Aitchison • Jun 12 '20

Can you share what your html looks like? Something like a codepen would help us help you 😊

lolleri200 • Jun 12 '20

Oh here :)
codepen.io/Sampsa96/pen/mdVPoVE

Suzanne Aitchison • Jun 12 '20

OK great!

So if I understand your question correctly you want to achieve this:

In which case, take your three divs: header_logo, header_center, header_right and move them inside the header div. So you now have:

<div id="header">
  <div id="header_logo">
      <h2>This is a logo in a div element</h2>
  </div>
    <div id="header_center">
      <h2>This is the center in a div element</h2>
  </div>
  <div id="header_right">
    <h2>This is the right border in a div element</h2>
  </div>
</div>

That puts your elements inside the header. However, they will naturally appear one below each other. To change that so they flow left to right across the page, you can change your CSS and make use of flexbox.

Add this extra line to your header div CSS:

#header {
    width: 960px;
    height: 80px;
    background-color: powderblue;
    display: flex;
}

This will achieve the screenshot I posted. Hopefully I didn't misunderstand and this is of some help - but let me know if not!

lolleri200 • Jun 12 '20

Yes! Thank you, I couldn't find any good guides online..

Suzanne Aitchison • Jun 12 '20

No problem! Glad I could help 😁

lolleri200 • Jun 15 '20

I noticed that the page is displayed correctly, but for some reason is not scaling if I look at it with a smaller display.

Suzanne Aitchison • Jun 15 '20

So all of your items have a fixed with (e.g. the header is 960px wide). This means regardless of the size of screen, it will occupy 960px. If you want it to be response, try using a percentage, e.g. make the header 100% and the items inside 33%

You can also look up 'CSS media queries' which will find you further resources about making a responsive design