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.
Grid layout can be easily made with CSS as well.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 id=”container”>
<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>
</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.
thanks a lot…
Hi Lalit,
This was great! worked like a charm. It was the first time I was dealing with divs – newbie :)
THANKS again Kumar. This is quite simple but I noticed that for placing two divs side by side you nested the two divs in question into another div id=”container” but didn’t do same for three divs! is this a standard rule or an omission?
Well spotted, Lawrence! Actually you can do it both the ways. You can use a container DIV or you can also do it without. But for all practical purposes, the floating DIVs will have one or the other parent DIV which will act as a container.
i have used the float technique on a webpage. but this is causing an unusual result for another “div” which is supposed to appear below the two floating items. towards the bottom of the page there is a black strip. i have called it the FOOTER. this is supposed to appear below the items “.subArticleImage” and “.subArticleDetails”
any suggestions?
Hi Zahideen,
Add the overflow: auto to the CSS of #subArticleContainer
Lalit
Your posite about posibilities of positioning with divs are plain wrong. Divs are unpredictable. One can not nearly achieve with what can one do with tables with a lot less code.
A change in one of the nested divs can for example break whole page layout.
Well, in computers nothing is “unpredictable”. Computers work on true or false premises. So, either something works or something does not work. If you know how to handle DIVs, they’re much more flexible than tables. But yes, newbies mostly feel more comfortable with tables because tables are easier to handle.
Thanks a lot, the tip works for me fine :), not to mention that I am a beginner in CSS :).
Hi
I’m facing problem with divs. I have a main div and with in this div I have some other divs.
The problem is I’m unable to fix the height of inner div.
Actually the inner div should take the height according to the content with in it.
But in my case the div height is exceeding the content height.
You can find the actual page here:
The problematic div is with yellow background color.
The problem exists with IE7 and FireFox (IE6 shows as expected)
Thank you very much