Need help Aligning 3 divs side by side

Question

This should be something simple i want to have three divs line up side by side but they keep going all over the place

heres the divs i am using, I figure it is just some simple css but i cant get it to work. its problay something simple but any help would be great.

One last point I want this to be the same on all moniters regrades of size

thanks for reading

divs and the width i want them to be -

<div id="searchresult" style="width:600"></div>
<div id="searchresultGame" style="width:600"></div>
<div id="searchresulttv" style="width:600"></div>

Answer 1

Your width property isn't using a unit, like px. However you can accomplish what you want by using the float: property.

HTML

<div id="searchresult">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quidem impedit aspernatur quam itaque sed cum delectus nobis asperiores vitae iure ratione quod voluptas placeat mollitia magni earum esse amet!</div>
<div id="searchresultGame">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quidem impedit aspernatur quam itaque sed cum delectus nobis asperiores vitae iure ratione quod voluptas placeat mollitia magni earum esse amet!</div>
<div id="searchresulttv">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quidem impedit aspernatur quam itaque sed cum delectus nobis asperiores vitae iure ratione quod voluptas placeat mollitia magni earum esse amet!</div>

CSS

div {
    border: 1px solid black;
    background-color: #EEEEEE;
    width: 300px;
    float: left;
}

Here is a fiddle where this is shown http://jsfiddle.net/P6Atc/ .

However if the width of the window becomes narrow than 1800px then the elements will be forced under each other to accomodate. You can fix this by putting everything in a div with a fixed width totalling the widths of the child div elements.

HTML

<div class="container">
<div id="searchresult">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quidem impedit aspernatur quam itaque sed cum delectus nobis asperiores vitae iure ratione quod voluptas placeat mollitia magni earum esse amet!</div>
<div id="searchresultGame">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quidem impedit aspernatur quam itaque sed cum delectus nobis asperiores vitae iure ratione quod voluptas placeat mollitia magni earum esse amet!</div>
<div id="searchresulttv">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quidem impedit aspernatur quam itaque sed cum delectus nobis asperiores vitae iure ratione quod voluptas placeat mollitia magni earum esse amet!</div>
</div>

CSS

div {
    border: 1px solid black;
    background-color: #EEEEEE;
    width: 300px;
    float: left;
}
.container
{
    width: 906px;
}

Here's that example: http://jsfiddle.net/P6Atc/1/

The downside to this is that you get an ugly horizontal scrollbar if the content is being viewed on a smaller screen.

Answer 2

Use float to keep them on the same line. Keep in mind, if the total width of the divs is wider than the display area, they will fall to the next line. Test the code below by using smaller width values if you see them displayed on more than one line. If you want to force a width (cause a scrollbar to appear rather than the content moving to the next line) you can use HTML tables.

<div id="searchresult" style='float:left;border:2px solid #555;width:600px;'>searchresult</div>
<div id="searchresultGame" style='float:left;border: 2px solid #555;width:600px;'>searchresultGame</div>
<div id="searchresulttv" style='float:left;border: 2px solid #555;width:600px;'>searchresulttv</div>

If you're looking at how to layout content on your website, you may want to look into W3Schools layouts tutorial.

Answer 3

Here is a working DEMO as @frenchie proposed

**CSS**

.div{
   width:50px; height:50px; border:1px solid; float:left
   }

**HTML**

<div id="searchresult" class="div"></div>
<div id="searchresultGame" class="div"></div>
<div id="searchresulttv" class="div"></div>