0

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..

8
Contributors
8
Replies
19
Views
5 Years
Discussion Span
Last Post by nivabeath1
1

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;
}
1

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.

Edited by teedoff: n/a

1

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.

0

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

Edited by wuming1: Oops. Subsequent posts re defined widths not previously visible to me.

0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.