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:
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.
This was great! worked like a charm. It was the first time I was dealing with divs – newbie :)
any suggestions?
Add the overflow: auto to the CSS of #subArticleContainer
Lalit
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
Comment *
Name *
Email *
Website
Δ
