python_geek python_geek - 1 year ago 56
CSS Question

Deciphering Websites Layout

As part of my education, I am reading the code to the following website, and trying to figure out how it all fits together.

https://www.wwf.org.uk/

My question; within the site header, there is a 'follow us' social media section. If you inspect this element as a whole, it sits inside a

<div>
tag with the class "social contextual-region".

What makes this
<div>
element sit in the centre of the page horizontally?


The element is displayed as inline-block, and has no padding, border or margin. Therefore, I consider that is should simply sit flush next to the 'become a WWF member' section, there should be no visable space between the two.

What part of the HTML/CSS is creating the spacing between the two elements and causing the social media section to be centralised horizontally?

Answer Source

The alignment is made with a technique that implies the combination of text-align:justify, display: inline-block and generated content to have elements equally distribuited horizontally.

The purpose of generated content is to force a line break, otherwise the elements remain left (or right or center) aligned.

So, the important parts of the code are:

.header_top_bar .content {
    text-align: justify;
    ...
}

.header_top_bar .title, .header_top_bar .social, .header_top_bar .newsletter, .header_top_bar .search {
    display: inline-block;
    ...
}

and

.header_top_bar .content::after {
    content: '';
    display: inline-block;
    vertical-align: top;
    width: 99%;
}

At this link you can find an explanation of this technique.

I also made a fiddle with a simplified version of the code

.wrapper{
    text-align: justify;
    padding: 10px;
    background: #333;
}
.wrapper::after {
    content: '';
    display: inline-block;
    vertical-align: top;
    width: 99%;
}
.justified-element {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    font-size: 16px;
    color: #fff;
}
<div class="wrapper">
  <p class="justified-element">One</p>
  <span class="justified-element">Two</span>
  <div class="justified-element">Three</div>
  <p class="justified-element">Four</p>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download