Getting buttons side by side

[Vaz]

Hi guys,

I have the following piece of code:


<div class="tabs" id="welcome"><img border="0" src="./bset/home.gif" width="62" height="35"></div><div class="tabs" id="tab2"><img border="0" src="./bset/cars.gif" width="100" height="35"></div><div class="tabs" id="tab3"><img border="0" src="./bset/limoscene.gif" width="140" height="35"></div><div class="tabs" id="tab4"><img border="0" src="./bset/contact.gif" width="100" height="35"></div>

and it makes the buttons (varios .gif's) become like this:
item1
item2
item3

I'd like it sideways like:
item1 item2 item3

The class code for 'tabs' is just:

.tabs {

cursor:pointer;
}


How can I achieve the sideways alignment. I've tried what I knew and nothing seems to be working. Thank you.

[jscheuer1]

If you have javascript and/or styles tied to the id's of the divisions, they will probably need to be changed:


<div class="tabs"><img
id="welcome" border="0" alt="" src="./bset/home.gif" width="62" height="35"><img
id="tab2" border="0" alt="" src="./bset/cars.gif" width="100" height="35"><img
id="tab3" border="0" alt="" src="./bset/limoscene.gif" width="140" height="35"><img
id="tab4" border="0" alt="" src="./bset/contact.gif" width="100" height="35"></div>

Alternatively, you could leave things essentially as they are, add container and clear divisions:


<div>
<div class="tabs" id="welcome"><img
border="0" alt="" src="./bset/home.gif" width="62" height="35"></div>
<div class="tabs" id="tab2"><img
border="0" alt="" src="./bset/cars.gif" width="100" height="35"></div>
<div class="tabs" id="tab3"><img
border="0" alt="" src="./bset/limoscene.gif" width="140" height="35"></div>
<div class="tabs" id="tab4"><img
border="0" alt="" src="./bset/contact.gif" width="100" height="35"></div>
<div style="clear:left;"></div>
</div>

and float the .tabs selector left:


.tabs {
float:left;
cursor:pointer;
}

[Vaz]

Thank you,
I opted for the second one and it worked like a charm. :)