inline elements printing on new line

Question

I have the following code:

<div class="outsideDiv">
    <div class="element1">Name: </div>
    <div class="element2">Something</div>
    <div class="element3"> - </div>
    <div class="element4">This something is great</div>
</div>

The outer div is display:block and all of the inside divs are display:inline. In the browser it all shows up on the same line like this:

Name: Something - This something is great

When I go to print it, the 4 divs show up on seperate lines like this:

Name: 
Something
-
This something is great

I am having a hard time figuring out how to get the 4 inside divs to print on the same line.

WaPaRtY · Answer 1 · 2013-05-09T16:09:55.687

0

<div class="outsideDiv">
    <div class="element1" style="display:inline">Name: </div>
    <div class="element2" style="display:inline">Something</div>
    <div class="element3" style="display:inline"> - </div>
    <div class="element4" style="display:inline">This something is great</div>
</div>

or

write this to your print.css:

.element1,.element2, .element3, .element4 {display: inline;}

edited May 09 '13 at 16:09

answered May 08 '13 at 20:27

WaPaRtY

500
3
5

Is there a way to do this using print.css and not putting the styles in the html code? – quasidon May 09 '13 at 14:22
Write this into your print.css: .element1, .element2,.element3,.element4 {display:inline;} – WaPaRtY May 09 '13 at 16:08

inline elements printing on new line

1 Answers1