No newline with a new <div>

Get Started
1

hello,

This code:

<body>
Text1
<div>Text2</div>
</body>

will make the “Text2” to appear under “Text1”. How can I make it to show on the same line with “Text1” (no newline)?

Is there any other solution than using <table>? I dont want to use table because it wipes the css formating of the text (defined in <body>)

thanks

2

Wrap the “Text1” text inside a DIV or other container and float it.

3

thanks,

this code works:
<div style=“float: left”>Text1</div>
<div>Text2</div>

but when I want to set some attributes for Text2 (like background color, border etc), the attributes will apply for the first div too:

<div style=“float: left”>Text1</div>
<div style=“background-color: #E0E0E0;”>Text2</div>

-will make the “Text1” to have the same background color as Text2. How can I fix that?

4

I found it. need to float the second div too:

<div style=“float:left”>Text1</div>
<div style=“float:left; background-color:#E0E0E0;”>Text2</div>

thanks

5

Remember to exclude inline styles and put these in an external stylesheet. Also, if your unfamiliar with clearing floats I would advise you visit: http://www.positioniseverything.net/easyclearing.html

I forgot to mention that the text you markup needs to be appropriate to what it is describing.

If you are going to use the clearfix this is how you might markup your example:

HTML:
<div class=“example clearfix”>
<div>Text1</div>
<div>Text2</div>
</div>

CSS:
.clearfix:after {
content: “.”;
clear: both;
display: block;
visibility: hidden;
height: 0;
}

.clearfix { display: inline-block; }

  • html .clearfix { height: 1%; }
    .clearfix { display: block; }

.example { width: 50em;}

.example div {
float: left;
width: 15em;
}

6