Heyy

 

How can I get some div tags to go on one line? If I have the code like:

 

<div id="left">Left</div>

<div id="middle">Middle</div>

<div id="right">Right</div>

 

How do i make it display like:

 

Left Middle Right

 

Insted of

 

Left

Middle

Right

 

I have hurd of a code you can put at the top of the html doc and it will make them all go in Rows but I still want them to go down too.

 

Thanks

 

Oliver :]

just out of curiostiy is it for page layout?

Its so i can add some images at the bottom of a new design i'm working on, but i want to add text under them too.

Set them all to float either left or right depending on which order you need them in.

.class { display:inline; }

There are two ways that I know of which will achieve this.

 

One is by applying the value "float: left;" to the CSS for each div.

 

#left
{
width: 100px;
margin-left: 10px;
float: left;
}

#middle
{
width: 100px;
margin-left: 10px;
float: left;
}

#right
{
width: 100px;
margin-left: 10px;
float: left;
}

 

You could also, if you know the exact width of your page and where they are going to be upon it, use absolute positioning.

 

#left {
width: 100px;
position: absolute;
left: 10px;
top: 10px;
}

#middle {
width: 100px;
position: absolute;
left: 120px;
top: 10px;
}

#right {
width: 100px;
position: absolute;
left: 230px;
top: 10px;
}

 

It depends on which one works best for your page.

 

Have fun

There are two ways that I know of which will achieve this.

 

One is by applying the value "float: left;" to the CSS for each div.

 

#left
{
width: 100px;
margin-left: 10px;
float: left;
}

#middle
{
width: 100px;
margin-left: 10px;
float: left;
}

#right
{
width: 100px;
margin-left: 10px;
float: left;
}

 

You could also, if you know the exact width of your page and where they are going to be upon it, use absolute positioning.

 

#left {
width: 100px;
position: absolute;
left: 10px;
top: 10px;
}

#middle {
width: 100px;
position: absolute;
left: 120px;
top: 10px;
}

#right {
width: 100px;
position: absolute;
left: 230px;
top: 10px;
}

 

It depends on which one works best for your page.

 

Have fun

 

I understand the 3 on one line but I was wondering how would you do 4 without using tables. In other words what would you name the 4 divs since you floating to the left and right?

I probably wouldn't use "left", "middle", "right", as id names... They're a bit presentational. What happens if you then later decide to change the order they appear in?

 

You can pretty much name classes and ids as anything you like.

I wrap them in a containing div and then use a clearing div at the bottom and then use width and floats to position them eg.

 

<div>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div style="clear: both;"></div>
</div>