Position 2 div's side by side

HTML & CSS
1

How can I get two divs to sit next to each other rather than on top of each other?

Really simple code, I thought giving a div a width would make it inline rather than a block element so they would sit next to each other.

I know its easy enough with floats/positioning but is their something simple I am missing or is it not posible?


<style type="text/css">
.divLeft {
    width:100px;
}
.divRight {
    width:100px;
}
</style>


<div class="divLeft">First Div</div >
<div class="divRight">Second Div</div >
2

Bit confused by what you are asking. You’ve put spans in, yet refer to divs.

Divs are for block elements, spans are for inline styles.

You can make spans work like divs via the display:block attribute, like so.

<style type="text/css">
.divLeft {
    width:100px;
    display:block;
    float: left;
}
.divRight {
    width:100px;
    display:block;
    float: right;
}
</style>


<span class="divLeft">First Div</span>
<span class="divRight">Second Div</span>

Try that.

3

oops, the spans were suposed to be divs, I was messing about with it.

At the moment that code displays 2 divs on top of each other. What I want is the 2 divs next to each other, without using floats.

4

Okay, I’ve changed the code to divs in this example, for explanation.

What we need to do is use div’s to display inline elements, rather than as a block.

Try this:-

<style type="text/css">
.divLeft {
    display:inline;
}
.divRight {
    display:inline;
}
</style>


<div class="divLeft">First Div</div>
<div class="divRight">Second Div</div>

Is this what you are after? If you display them as inline elements, then you’ll lose a lot of the block elements (such as height & width) though.

My advice is to stick to spans though.

5

What I want is the 2 divs next to each other, without using floats.

Why don’t you want to use floats ? It’s the easiest way to make elements horizontally aligned.

If you change a block element to display as an inline-box then you cannot apply dimensions (and vertical margins and padding behave differently).

You could use inline-block which is supported in FF3,opera and safari but needs a hack for IE. It’s easiest to use floats for now unless all you want is simple inline formatting.

6

For some reason the floats are producing a margin underneath the floated div’s in ie which I cant figure out.

I thought asigning a div a fixed width essentialy made them behave as a inline-block so they would sit next to each other but I must have read it wrong.

Never mind, going to use a different way.

7

I thought asigning a div a fixed width essentialy made them behave as a inline-block

No, assigning a width to a static div just gives it a set width rather than auto width (effectively if fills the space available to it).

to change the display of an element you use the “display” property e.g. display:block, display:inline etc.

For some reason the floats are producing a margin underneath the floated div’s in ie which I cant figure out

If you post some code then perhaps we can help with that :slight_smile:

8

If you need something complex (such as equal height DIVs without images) then try this method out - I personally can’t stop myself from using it!

Otherwise just floating two DIVs to the left (or right) will work just fine in many cases.