John is a newbie who is trying his hands on web development. HTML and CSS seems to be straightforward to him. But today he is struggling to place two DIV elements side by side. No matter what CSS he use, both DIVs are coming on top of each other.
Is arranging two DIVs adjacent to each other such a difficult task?
Well, thankfully it is not difficult at all and in fact web developers routinely place two or more DIVs side by side. Modern web development can not survive without the use of DIV element of HTML. DIVs are layers that can be sized, placed and floated anywhere on a web page.
A web designer, need to make layouts of DIVs almost everyday. Such layouts (like grid layout) can not be possible without adjusting DIV elements side by side. Those who are not experienced in CSS tricks spend quite a bit of time in doing so and in the end they realize that the job was, in fact, pretty easy. Let's see how to do this:
<DIV style=”float:left; background-color:magenta; width:100px; height:100px; margin-top: 200px; margin-left: 100px;”> first div</DIV>
<DIV style=”float:right; background-color:green; width:100px; height:100px; margin-top: 100px; margin-left: 200px;”>second div</DIV>
Did you get the trick? Basically float attributes do all the magic. float attribute forces DIV element not to take 100% width and allow other elements to come on the sides. Then margin attributes are used to position DIVs anywhere on the web page. You can even position DIVs outside the webpage, if you set the margin to negative value.
Yes! you can apply a similar method to arrange three or more DIV elements adjacent to each other. This is definitely required to create a grid layout or a three-column web page. So, now that you have learnt how to place two DIV side by side, it is time to proceed further and learn how to arrange THREE or any number of DIVs side by side.
I hope this newbie tip (and often asked question) was useful for you. Are you still facing any issues with HTML or CSS? Please let me know and I will try to help you out. Thank you for using TechWelkin.