CODEWITHSUNDEEP
csshtml
Greg Dietrich
Greg Dietrich

Reputation: 96

How can I keep my line of text from breaking?

I am trying to keep my line of text from breaking in two using some code that is similar to this.

<h3>
 <div class="home_widget">
  <div class="home_widget_lc">join us</div>
   on sundays</div>
</h3>

Using this code it is breaking between the "us" and "on." I want it all on one line.

Upvotes: 2

Views: 209

Answers (6)

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48610

By default <div> tags are set to display: block.

Either change the CSS:

.home_widget, .home_widget_lc {
  display: inline;
}

or change the HTML:

<h3>
 <span class="home_widget">
  <span class="home_widget_lc">join us</span>
     on sundays
  </span>
</h3>

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

Fix the markup: h3 is not allowed to have block-level children like div. Use span instead:

<h3>
 <span class="home_widget">
  <span class="home_widget_lc">join us</span>
   on sundays</span>
</h3>

Or, unless you have some reason to wrap the content of h3 in a container, assign the class to the h3 element (this may imply that the CSS code needs to be simplified, too):

<h3 class="home_widget">
  <span class="home_widget_lc">join us</span>
   on sundays
</h3>

If you cannot change the markup, you need to hope that it will work reasonably despite the invalidity and to add CSS that more or less tries to turn the div elements to span elements, in the styling sense. In practice, it suffices to do that for the inner div:

.home_widget_lc { display: inline; }

Depending on whether the class name home_widget_lc is used elsewhere for other purposes, you may need to write a more specific selector to prevent the rule from having undesired effects on other elements, e.g.

h3 div.home_widget div.home_widget_lc { display: inline; }

Upvotes: 1

Mark
Mark

Reputation: 6865

can you alter the HTML?

<h3>
 join us on sundays
</h3>

All in one line.

Upvotes: 0

Mr Lister
Mr Lister

Reputation: 46569

The answer is to change the "home_widget_lc" div into a span.

(Of course you can change the display property of the div, but if you don't have a need for a block there, don't use a block element in the first place!)

Upvotes: 1

Sachin
Sachin

Reputation: 40970

This is because you have used separate div for join us

<div class="home_widget_lc">join us</div>

and div is block element which starts from next line. The alternative of overwriting this feature of block elements you can use display:inline with those elements.

if you don't need special class only for join us you do something like this

<div class="home_widget_lc">join us on sundays</div>

Upvotes: 0

swapnesh
swapnesh

Reputation: 26732

Use - 

div {display:inline;}

or -

div.home_widget_lc {display:inline;}

Fiddle - http://jsfiddle.net/Sa9W4/

You can also check this for more clarification - http://quirksmode.org/css/css2/display.html

enter image description here

Upvotes: 0

Related Questions