If the
Element Is Block Level Element How Could 2 divs Be Placed Next to Each Other

Question

According to w3schools.com I learnt that the element is a block level element (that is, the browser will display a line break before and after it).

Then how could 2 divs be placed next to each other?

Some code from w3schools:

<!DOCTYPE html>
   <html>
      <body>

         <div id="container" style="width:500px">

            <div id="header" style="background-color:#FFA500;">
               <h1 style="margin-bottom:0;">Main Title of Web Page</h1>
         </div>

         <div id="menu" style="background color:#FFD700;height:200px;width:100px;float:left;">
            <b>Menu</b><br>
            HTML<br>
            CSS<br>
            JavaScript
         </div>

         <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">Content goes here
         </div>

         <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">Copyright © W3Schools.com
         </div>

         </div>
      </body>
   </html>

and absolute positioning and also changing the display type to something else like inline-block... really depends on what you need in your layout. — Marc Audet, May 14 '13 at 20:33

score 2 · Answer 1 · answered May 14 '13 at 20:35

2

HTML:

<div class="sidebyside">I'm stuff!</div>
<div class="sidebyside">I'm other stuff!</div>

CSS:

.sidebyside {
    float: left;
    width: 50%;
}

Demo

answered May 14 '13 at 20:35

Jason

51,583
38
133
185

thank you I already know how to position them side by side I just got confused because they say that the browser displays a break line before and (after) it. – kzidane May 14 '13 at 20:44
OP explicitly asks "how could 2 divs be placed next to each other?" I answered your question. – Jason May 14 '13 at 21:33

moto · Accepted Answer · 2013-05-14T20:47:35.157

2

"By default, block-level elements are formatted differently than inline elements. Generally, block-level elements begin on new lines, inline elements do not."

Two block level elements will generally start on new lines, but you can have them side by side by float property. In your code, you have this piece in the div style which is making them side by side.

float: left;

edited May 14 '13 at 20:47

answered May 14 '13 at 20:37

moto

194
3
13

1

NO. stop passing links to w3schools. http://w3fools.com – Jason May 14 '13 at 20:38
1

alright just google css float and learn the ins and out of float, since it's very useful. If you're learning positioning, I think lynda's css positioning tutorial can be a great starting point too. – moto May 14 '13 at 20:42
Thank you. I am aiming to study CSS next. – kzidane May 14 '13 at 20:46

score 0 · Answer 3 · answered May 14 '13 at 20:32

0

A quick google for "side by side div" yielded this as the first result, and a bunch more too!

http://www.welovecss.com/showthread.php?t=465

answered May 14 '13 at 20:32

PaulProgrammer

16,175
4
39
56

This seems more like a comment. – James Montagne May 14 '13 at 20:45

If the Element Is Block Level Element How Could 2 divs Be Placed Next to Each Other

3 Answers3

If the
Element Is Block Level Element How Could 2 divs Be Placed Next to Each Other