Common problems for layout elements in CSS — best practices

Published in

codeburst

6 min readSep 14, 2017

Well it’s very frustrating in css when we can’t apply perfect position to elements to look to be as UI designs are proposed.

1. Common Problem : how to in-line elements

In css there is deep philosophy between parent elements and its respective child elements. Due to specific behavior of parent it gets reflected to child elements which results in there properties, positioning, fonts and much more changes in different ways.

In-lining elements from block type elements is some what common problems and beginners facing these problems have there hair rubbing nature often.

In current scenario you have parent div and its respective child divs positioned in horizontal manner. For in-lining these elements there is simple solution which is analogy between parent and child.

See here , we have to apply block value to display property out there to parent. But in figure acc. to inline value it will work as solo if and only if only one div is present i.e. parent div/only div.

Then to child components, we should now only apply inline-block value to display property which summarizes that child has to be in block with inline nature.

Eg. Inline tabs for navigation are real application examples.

Exception : To center this inline elements

If we came across like one or two child in this given width, then you have to apply property of text-align : center to parent div only.

2. Centering Image

Common cause of size related problems were mostly solved by bootstrap framework which includes a class of img-responsive which we can allot it to <img> class as <img class="img-responsive" /> will solve major problems of image type problems related to size.

A common trick I have learned during my tackling problems for centering images is like

parent div{
          width:100px ;//you can give fixed width here
          height:100px ;//same as width you have to give height
}// this child is image element (i.e. <img>)
child {         margin: 0 auto; //main magic goes here in margin property         width:100% ;// optional you can give as 80% or 90% 
         max-height:100%; // this will be equal to parent's 100px
         height:auto ; //you can give as 80% or 90% 
         max-width:100%; // this will be equal to parent's 100px
}

This is my formula for which I change values according to my image.

Note : This child div , it’s the img tag’s class as of <img class="image-custom-positioning img-responsive" . This also contains second class as img-responsive which is optional if you use bootstrap framework. The magic I have mentioned about margin:0 auto; works also apart from image tag as like in divs, spans and p tags.

3. Centering half-filled block level elements

Current Scenario -

Here you can use bootstrap framework because it has grid structure classes containing of col-lg-12 , col-lg-11, col-lg-10,… to col-lg-1 which calculates according to screen resolutions for parent div and after placing another col-lg classes in child for “block type” layout according to image displayed above.

Now it is fully filled , but there comes dynamic website’s issue…

I have experienced a lot of problems in writing css for static and dynamic websites. Dynamic used to tend as for user’s input behavior.

Considering scenario in dynamic website, if user wants only one block or two block according to his needs as instead of three blocks(which is in above image) that can be said half-filled for whole col-lg-12 then as we have structured col-lg-4 then there will be space left out on right side.

You can see the difference in “statically” full- filled and “dynamically” half-filled block size of col-lg-12 or maybe big block.

Second sub-image in this above image is of when you want blocks to be in center when user wants to add dynamically any number of images. So css for it would be -

//parent div
col-lg-12{
           text-align:center;
}//child div
col-lg-4{ display:inline-block; // describes nature of inline in respective block  float: none; // neither right nor left so for none it will remain in middle}

4. Pure Flexbox

Flexbox is best way for displaying the elements in center if the parent component(div) contains “more than one child components/elements(div)” for specific structure.

This included figure will almost clear you the flexbox thing -

This was the scenario for the parent div containing only one element as child div. As you can see first there is display:flex; which assigns much void space to left out and child div is positioned on corner. Then along with it there came align-items:center; which we can say as it “vertically” aligns elements in parent div to “center” position. And lastly but not least is justify-content:center; . This exactly does like align-items property but in “horizontal” fashion.

Main use of flexbox is done when there are more child divs in parent container like this image -

That was flexbox - the pure css play!

Note -Flexbox is not supported in IE 8 or above versions

5. Using table type structure : replacement to grid layout

Almost the oldest method which is still in use also today as it supports major IE versions including also above IE 8 versions.

This was old classic method as an replacement to grid layout which is not supported in some of the browsers.

6. Positioning with absolute-an arbitrary trick

This trick works better in much of parent div philosophies , but I prefer using it less.

parentdiv{
          position: relative;
}childdiv{
          position: absolute;
          top:0;
          bottom:0;
          left:0;
          right:0;
          margin: 0 auto; // optional or may use margin : 0
}

That’s it for positioning elements to crave it center-”ed” and inline-”ed”. This all was of my experience as front-end developer job that I landed in May 2017. From that point I learned much more that was result of tackling common problems like these ones.

Thank you for giving your time for reading this article! Always blue ! Always blue ! Always blue !