Issue with positioning a div within its container div

[conver2020]

Please refer to the header of this page. Three divs (logo image to the left, search bar, and social icons to the right) are in one container div (A), while search bar and social icons are in one div (B). I tried to bring A to the right-hand side bottom of B (that is, parallel to the bottom of the logo image). In my CSS, I tried top-margin property. But it gives various results in various browsers and screen sizes. There should be a precise way to bring it to the position stated. Please help.

[stancevicbranko]

Hello,
I hope this is what you want and you could try this. Turn header-container to flexbox and put alignment property on it like this:
I think this is easier solution.

.header-container{
   display: flex;
   justify-content: space-between;
   align-items: center;
}

[Atelierbram]

@conver2020 You want to align the bottom of the social-media icons with the bottom of the logo?

I agree with @stancevicbranko that flexbox is made to solve alignment issues like these, so while you at it maybe make a flex-parent container of searchbar as well:

.searchbar {
  float: right;
  /* margin-top: 3%; No need for top-margin with flexbox */
  display: flex; /* this will override the float on flexbox supporting browsers */
  flex-direction: column;
  justify-content: flex-end;
  /* outline: 1px dotted salmon; */
  min-height: 166px; /* got the give the container a `min-height`: the same height as the image */
}

BTW, consider wrapping the social-media icon images in an unordered list, (making the HTML markup sturdier as well as more semantic).

[danielrbp]

Hi, you can use the table and table-cell styles in this way:

.header-container{
display:table;
}

.banner-logo{
display: table-cell;
}

.searchbar {
display: table-cell;
text-align: right;
vertical-align: bottom;
}

You must remove the float left and right styles and margin-top:3% from .searchbar.

[conver2020]

Excellent. It worked just like magic! Thanks so much.

[Atelierbram]

@conver2020 Out of curiosity: what makes display: table /display: table-cell a more suitable solution here in your mind that makes you favour it over using flexbox?

[conver2020]

Dear Atelierbram, I actually tried the ‘table’ option in the very beginning, and once it worked just nice, I didn’t go for anything else. So, I can’t say one is better than the other. But I’ll soon experiment with the effect of the ‘flex’ in my case. Thanks for the codes. :)

[conver2020]

Yes, the Flex codes work just the same as the Table codes in my case. Wonderful! Thanks a lot.

[conver2020]

Btw, I wonder how you came up with the height of the image in the ‘Searchbar’ container to be 166px.

[Atelierbram]

What I did was:

• open developer-tools in my browser
• click the icon on the left in the toolbar (left-corner pointing arrow inside a square)
• hovered over the image

A small modal with text besides the image tells the dimensions of the image in pixels, here 294×166

See also this screenshot of your webpage with Chrome DevTools open, inspecting the image:

Developer tools have become an unmissable tool in the toolchain for building webpages: front-end web-developers live inside it.

BTW, if you wonder why the social-media icons are right-aligned in the screenshot: before taken the screenshot I clicked on the <ul></ul> in the elements tab, and added the text-align: right property-value pair to .social-inner ul (in the Styles-tab on the right).

Get it ;) ?

[conver2020]

Wow! Learning a lot from you guys.

[Author]

Posts