How do I get my divs to stay side by side?

[Glenn]

When I have too long of a sentence, the second div goes to the bottom.

For example, if I have:

<div class = "style1">
some info
</div>

<div class = "style2">
bunch of info
</div>

my styles are set to float:left

If I have short lines in the second div, they will stay side by side but when I have a long sentence in the second div, it displays below the first div instead of beside it. I do not want my second div to be restricted to a certain width other then the size of the browser window.

 

[chrishirst]

If you don't constrain a floated block element with a width it will expand as required by the content.

 

[Glenn]

If you don't constrain a floated block element with a width it will expand as required by the content.

Either I don't understand exactly what you mean or it didn't work. I took out the width of the second div class and it still moved under the first when the text was too long.

 

[chrishirst]

I took out the width

That is because it is not constrained to a set size, so will simply get wider until it reaches the width that is available in the parent container


Read the W3c float concepts, (section 9.5) and this tutorial.

Read them, practise them, re-read them until you understand them.

 

[BradT81]

.style1,.style2{float:left;width:200px;}
200px just an example

also maybe add a clearing div underneath the html