CSS Div Side by Side - Text Align Problem

[Matthew N.]

Hey, I'm making a website, and have some css to put two divs next to each other.
This is my css and HTML code :

.class1 {
    float:left;
    border-right:2px solid #000;
}
.class2 {
    float:right;
}
.class3 {
    clear:both;
}

HTML :

<div class="class1">
Div 1
</div>
<div class="class2">
Div 2
</div>
<div class="class3">
<!-- I'm working in a container div. -->
</div>

At the moment it comes out like this :

Div1    |                   Div 2

but I want to make it like this :

Div 1    |    Div 2

Any ideas how to do this?
This isn't my full code, and I am using valid HTML and CSS.

I have already tried text-align:left; and it didn't work.

Any help welcome.
Thanks, Matthew..

[anand01]

dear Matthew
You assigned float:right in second class, I think that is the problem
use padding options

.class1 {
    float:left;
    border-right:2px solid #000;
	padding-right:5px;
}
.class2 {
    float:left;
padding-left:5px;
}

[teedoff]

You only need to float one element in this case. The class1 div can be floated left, given a width, and that will allow the class2 element to slide up beside the class1.

Remember, a div will take up ALL the space available left to right, if you don't specify a width less than it's container.

[c_bomb]

Teedoff is correct, I would also just specify a width, just so that you know what you are working with, well I guess it depends how you want the site to look and function.

You can try something like this

.class1 {
    float:left;
    border-right:2px solid #000;
    max-width: 100px;
    min-width: 100px;
    }
 .class2 {
    max-width: 600px;
    min-width: 300px;    
    }
 .class3 {
    max-width: 900px;
    min-width: 400px;
    }

This min- does not work with older browsers, so do make sure on what browsers you want it to work on before you start coding.

Cheers.

[wuming1]

Hey, I'm making a website, and have some css to put two divs next to each other.
This is my css and HTML code :

.class1 {
    float:left;
    border-right:2px solid #000;
}
.class2 {
    float:right;
}
.class3 {
    clear:both;
}

HTML :

<div class="class1">
Div 1
</div>
<div class="class2">
Div 2
</div>
<div class="class3">
<!-- I'm working in a container div. -->
</div>

At the moment it comes out like this :

Div1    |                   Div 2

but I want to make it like this :

Div 1    |    Div 2

Any ideas how to do this?
This isn't my full code, and I am using valid HTML and CSS.

I have already tried text-align:left; and it didn't work.

Any help welcome.
Thanks, Matthew..

x

[Matthew N.]

thanks everyone for your help!
-Matthew

[junnydc]

thanks everyone for your help!
-Matthew

Perfect. Just what I'm looking for.

[luweegee]

hello i want this too on my website how can i input that div1 and div2 to the container.

[nivabeath1]

<div>
    <div style="float:left">
        <h2>First Div </h2>
    </div>
    <div style="float:left">
        <h2> Second Div</h2>
    </div>
</div>

Source: Div Side by Side

Niva