DIV element in HTML is used for creating floating layers. In modern web design and development, thought of a website without DIV elements is almost non-existent.
Newbies, however, find some aspects of DIV is a bit confusing. One of these is positioning various DIV elements in desired layout. Many new developers resort to TABLE element when they don’t get hold of DIV. Although, positioning DIVs is not as straightforward, but once you know how to do positioning –DIV element is much more flexible than TABLE element. Using DIV you can create a layout exactly the way you want, without getting restricted by hard borders or TABLE, TR and TD elements. And moreover, search engines also give more respect to document object model that uses DIV element over the rigid TABLE element.
Grid layout can be easily made with CSS as well.Well, let’s go back to the original question of how to position three (or more than three) DIVs side by side. The trick is very simple. All you need to do is to define width of each div and float it to the left. By default, a DIV element takes 100% of width available in browser window. That is why it does not allow any other element to come in way to its right side. So, you explicitly define width for the div and then float it to the left so that next div can come on the right side of the first div.
Here is an example:
<div style="width: 100px; float:left; height:100px; background:magenta; margin:20px">DIV 1</div> <div style="width: 100px; float:left; height:100px; background:green; margin:20px">DIV 2</div> <div style="width: 100px; float:left; height:100px; background:cyan; margin:20px">DIV 3</div>
And here is the result of the above code:
DEMO:
The most important point in above example is “width: 100px; float:left;” -this is what causes DIVs to go side by side.
Some time ago, we had published about another method of placing two div elements side by side –and then positioning them with the help of margin attribute. Using margins, you can place DIVs anywhere on the webpage (and even outside the webpage!). Enjoy!
How to put frame tag and form tag side by side. I tried to use float, but it did not work. I put both the tags inside the div tag and then tried but still, it did not work. How to do this?
You may try display:table on parent div.
Thanks for thorough explanation! Look forward for other articles :)
Thanks friend, I was exactly looking for this
Hi Lalitji, can you explain me that how can set div as you shown above diagram in this article as page layout – (white boxes). – div sizes (may be height) varied but comes one after one following each other. eg. ‘pinterest’ website.
Thanks for sharing the code. I’m finding this helpful!
I am new to HTML and was searching how to place 2 tables side by side. Your solution of placing 2 DIVs with inline CSS was simple and working. Thank you.
Thanks a million times Kumar. I am quite grateful for your support. i don’t know what happened i arranged some codes inculcating the div layout codes you provided and some of mine for you to help. it’s been showing waiting for your attention but is now off the guild without any comment from you, are you still going through it or did you delete the codes?
Hi Lawrence, I saw that code. But I realized that there was a lack of concept in that. See, you need to take tutorials in web development. Even if I correct that code, your effort will not go far in developing a website because of lack of basic understanding. Please read tutorials and do research on your own. More experienced people should be approached only after doing an exhaustive effort. This is how online learning works. All the best!
Good day Kumar. I noticed that the code you provided for me, container style doesnt last ‘;’ header has last ‘;’ left, content and right doesn’t have last ‘;’ but footer has last ‘;’ . Even in earlier codes you provided i noticed that too is it deliberte or just a slight ommission? if that is correct what rule guides one to know when to put last ‘;’ and when not. Since such a small ommission or commion may make the whole set of codes not to be executed by the browser. Thanks again Kumar.
Hi Lawrence, the last semi-colon in the style rule is optional (however it is good practice to put the last semi-colon as well).
One more thing Kumar. I really await your response. As a matter of fact this would have or will resolve my headache about arranging my home page into header left sidebar, content, right sidebar and footer. I will deeply appreciate it if you give me simple div codes placing elements into the five segments with result display. Thanks.
You can use the following code for creating a basic page layout using five DIV elements:
<div id=”container” style=”background: #ccc; width: 1000px”>
<div id=”header” style=”background: #f00;”>Header</div>
<div id=”left” style=”background: #0f0; width:200px; float:left”>Left</div>
<div id=”content” style=”background: #00f;width:600px; float:left”>Content</div>
<div id=”right” style=”background: #0f0;width:200px; float:left”>Right</div>
<div id=”footer” style=”background: #f00;”>Footer</div>
</div>
i am a bit confused i thought what you treated is placing divs side by side from left to right, but your displayed result shows a vertical stack but explanation is simple straight to point.
Vertical stacking of DIV elements will happen if the available screen width is less than the width required for DIVs to display side by side. If available screen width is less, then the right DIV will go towards bottom. This is very useful in today’s multi-screen and multi-device environment.
thanks Kumar. Straight-to-point as clear as sunrise.
Thank you so much.
You’re welcome Eli. I am glad you found it useful.
How would I have two divs side by side, unless the screen is too small, in which case they sit on top of each other.
What I mean is, I want the divs to sit side-by-side on a computer screen, and I can do that. But on an iPhone screen, I want one to then be on top of the other one, because there isn’t space for them to be side-by-side.
Hi Jro, if you do not have enough space on screen, the obvious layout of divs is on top of each other. You may consider decreasing the size of DIV elements in proportion with the available screen size.
Great stuff here. You are truly talented. Don’t forget the sum of the inner div’s widths and margins must be less than the outter div.
how we can adjust the spacing between the two div in html?
Vinay, you can use margin or padding for creating space between two DIV elements. For example, “margin-left: 30px”
how we can arrange 3 columns with background colors side by side with out making 3 separate div for each column …. using
can you please send that coding?
Sorry, I could not understand your question. Please rephrase.
OK it can be copied if you turn off javascript. Phew!
Thanks for the feedback Ronno. I am sorry you had to face trouble. I will look into this matter asap.
That’s great Lalit. But making the code impossible to copy is a bit extreme! How are we supposed to “Enjoy” if we can’t use the code?