Divs are separating with line breaks when they shouldn't

Question

I am trying to make my divs appear horizontally across the page but there is an automatic line break in between them. I was wondering how I could fix this.

<div id="box1">
    <header id="whyshouldi">
    What is iOS Development
    </header>
    <p id="whatis">
        iOS Development is the process used to create native applications for iPhone, iPod, and iPad. Applications are made using the SDK(software development kit), Xcode. Aside from the software, it is necessary that iOS Developers know Objective-C.
    </p>
</div>

        <div id="box2">
        <header id="whyshouldi">
    Why Should I learn it?
        </header>
    <p id="whatis">
Learning native app development can allow you to better expand the horizon of knowledge in iPhone, and can make you a better programmer overall. It is a great skill to know no matter who you are.
    </p>
</div>

Is this homework ? ( whyshouldi, whatis, ... iOS Development is the process used to create..., Learning native app development can... ) — Milche Patern, Apr 29 '13 at 19:36

Adrift · Answer 1 · 2013-04-29T19:32:13.250

4

This is the default behaviour of block-level elements .. there are many options to have the two divs appear side by side but one simple way is by using the float property and giving each div a width of 50%

Example

edited Apr 29 '13 at 19:32

answered Mar 31 '13 at 23:46

Adrift

58,167
12
92
90

As described in the question, isn't the fact that `div` is being treated as a block-level element because of the [default stylesheet](http://stackoverflow.com/q/32875/1497596) associated with the browser? Furthermore, [this answer](http://stackoverflow.com/a/12289404/1497596) asserts that for **HTML5**: "No elements create line breaks. You're merely seeing the effects of different default styles,…" – DavidRR May 05 '15 at 20:24

score 0 · Answer 2 · answered Mar 31 '13 at 23:45

0

you can position them absolutely:

#box1,#box2 {
  position: absolute;
  width: 50%;
}

#box1 {
  left: 0;
}

#box2 {
  right: 0;
}

answered Mar 31 '13 at 23:45

BiAiB

12,932
10
43
63

score 0 · Answer 3 · answered Jul 03 '13 at 19:53

This can be quite easily achieved introducing either a class or using some specificity trickery. If you use display: inline-block you can achieve what you're after. So let's say you introduced a class to your #box1 and #box2 ID's you could in theory...

.col { display: inline-block; max-width: 170px; width: 100%; vertical-align: top; }

Always remember when using inline-block to close any gaps in mark up between #box1 closing </div> and #box2 opening <div>. Otherwise you'll be left with 3 or 4 unwanted pixels.

Check this fiddle. I think this is what you're after. http://jsfiddle.net/UsNBj/

Divs are separating with line breaks when they shouldn't

3 Answers3