Orchestrating CSS to Position Web Page Content

Orchestrating CSS to Position Web Page Content
CSS is famed for making things abundantly easier and effective for web designers all across the web realm. The surgical precision with which it enables the designers to give a sense of structure to the content on a site and place it in any way possibly possible is what lends such a great importance to CSS

Talking of content placement within CSS, there are different options. Among them, positioning with inline-block has pretty popular. As the name suggests, in this method we place the elements next to each other in a line.

Let's Take A Few Examples To Get A Clearer Picture Of How We Can Position The Content With Inline Blocks:


To begin with, our HTML looks something like this:
<header>...</header>
<section>...</section>
<section>...</section>
<section>...</section>
<footer>...</footer>
What we have to do here is to alter the display values to inline-block. This is how we will change the CSS:
section {
display: inline-block;
margin: 0 2%;
width: 28%;
}
Does the above code accomplish what we are aiming for? Definitely not. All the inline elements are placed in a single line, separated by a single space. Now, this space adds to the width and margin values of elements, the result of which is a much more amplified total width that doesn't work in our favor. The <section> can thus not be accommodated in the single line. To make sure that <section> element appears in the same line, we need to get rid of the spaces.

This is how our HTML will look like as a first step towards making everything appear in an organized manner but with white spaces:
<header>
  <code>:header:</code>
</header>

<section>
  <code>:section: <br> display: <br> inline-block;</code>
</section>
  
<section>
  <code>:section: <br> display: <br> inline-block;</code>
</section>
    
 <section>
  <code>:section: <br> display: <br> inline-block;</code>
</section>

<footer>
  <code>:footer:</code>
</footer>
Having Modified Our HTML, We Will Alter The CSS Accordingly:
code {
background: #6B2A2A;
border-radius: 5px;
color: #fff;
display: block;
font: 12px/22px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
padding: 22px 14px;
text-align: center;
}
header,
section,
aside,
footer {
margin: 0 1.4% 22px 1.4%;
}
section {
display: inline-block;
width: 28%;
}
footer {
margin-bottom: 0;
}

Removing The White Spaces

Now, we have a suite of options available in terms of the ways we can employ to minus the white spaces from the representation. While some are really intricate, we will highlight some simple and effective ones.

The first of those is placing every new section element's opening tag in the same line where the closing tag of last section element is present.

So, that's how we align our HTML:
<header>...</header>
<section>
  ...
</section><section>
  ...
</section><section>
  ...
</section>
<footer>...</footer>
This way, we ensure that there is no unneeded space between inline-block elements.

This is how the code of the HTML that removes white spaces looks like:
<header>
  <code>:header:</code>
</header>

<section>
  <code>:section: <br> display: <br> inline-block;</code>
</section><section>
  <code>:section: <br> display: <br> inline-block;</code>
</section><section>
  <code>:section: <br> display: <br> inline-block;</code>
</section>

<footer>
  <code>:footer:</code>
</footer>
And When It Comes To CSS, It Looks Like:
code {
background: #6B2A2A;
border-radius: 5px;
color: #fff;
display: block;
font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
padding: 22px 14px;
text-align: center;
}
header,
section,
aside,
footer {
margin: 0 1.4% 22px 1.4%;
}
section {
display: inline-block;
width: 28%;
}
footer {
margin-bottom: 0;
}
And thus, we efficiently remove the white spaces by a simple realignment.

Now, there is another way to accomplish it and it is done by placing an HTML comment right after the closing tag of the inline block element. And just when the opening tag of the next element is about to begin, you can go ahead and close the HTML comment.

This is how the final code will look like:
<header>...</header>
<section>
  ...
</section><!--
--><section>
  ...
</section><!--
--><section>
  ...
 </section>
 <footer>...</footer>
One you follow this process to the T, you will realize what value it adds to your endeavor of experimentation with your CSS files.

Positioning With Floats

Leveraging the float property to position elements on your page is another useful way of giving a quirky element to your page's design.

In this method, you can simply pluck an element and place it at a preferred location with respect to the parent element. Then, you can let the other elements like the <img> element float around it so that you get some greater flexibility.

Now, when you use the float property on several elements, you have the wherewithal of positioning them against each other that lets you create layouts of multiple columns.

There are values accepted by float, and they are accepted like this:
img {
float: left;
}

Practically Applying Them

Let us get down to actual practice. The typical HTML file when the property has to be used will look like:
<header> ...</header>
<section> ...</section>
<aside> ...</aside>
<footer> ...</footer>
Now, when we get down to actual coding, this is how we go about it:

Our HTML looks like this:
<header>
  <code>:header<</code>
</header>

<section>
  <code>:section<</code>
</section>

<aside>
  <code>:aside<</code>
</aside>

<footer>
  <code>:footer<</code>
</footer>
The CSS Looks like this:
code {
background: #2db34a;
border-radius: 5px;
color: #fff;
display: block;
font: 13px/22px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
padding: 22px 14px;
text-align: center;
}
header,
section,
aside,
footer {
margin: 0 1.5% 24px 1.5%;
}
footer {
margin-bottom: 0;
}
Now, we float the sections to the left and right side and then we add margin and width to the columns:
section {
float: left;
margin: 0 1.5%;
width: 63%;
}
aside {
float: right;
margin: 0 1.5%;
width: 30%;
}
Writing the HTML for the Same:
<header>
  <code>:header<</code>
</header>

<section>
  <code>:section< <br> float: left;</code>
</section>

<aside>
  <code>:aside< <br> float: right;</code>
</aside>

<footer>
  <code>:footer<</code>
</footer>
The CSS
code {
background: #2db34a;
border-radius: 6px;
color: #fff;
display: block;
font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
padding: 24px 15px;
text-align: center;
}
header,
section,
aside,
footer {
margin: 0 1.5% 24px 1.5%;
}
section {
float: left;
width: 63%;
}
aside {
float: right;
width: 30%;
}
footer {
clear: both;
margin-bottom: 0;
}
And thus, using the afore-mentioned codes, we should be efficiently able to place content on a desired web page position. Let us know if you have more to add in the comments.

AUTHOR_NAMEAbout the Author:
Being a well-known blogger from Markupcloud Ltd., Jack gives valuable and best tips on context of converting PSD to HTML services and design technique. Also, he is enthusiast of sharing his innovative ideas related to web design technologies.
Find Me On GooglePlus
Share it!

GUI Tricks

GUI Tricks is a technology blog started in 2014. This blog aims to provide useful tips, tricks and tutorials to help its readers. This blog generally focuses on topics related to internet, software, security, blogging, Windows, social networks, tutorials and the world wide web. This blog occasionally features some thought provoking and humorous posts that will entertain its readers.

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment