frontpage.css

body {
	background: url('Background.jpg');
}
box1 {
	position: absolute;
	left: 100px;
	top: 100px;
}
box2 {
	top: 100px;
	position: absolute;
	right: 100px;
}

index.php

<body>

<div id="box1"><img src="Customer Goods.jpg" /></div>

<div id="box2"><img src="Industry.jpg" /></div>

</body>

Hey, I would like to create 2 boxes next to each other in my index.php using css. What happen with this code is: The boxes align to the left and on top of each other.

This is strange why the actual is not the same as I coded? I thought it should be 100 px from the top of the web site (both of them), and 1 box 100 px from the left side of the website, where as the other 100 px from the right of the website.

Where is the logic in this codes?

Assign Width to each box may be that would help.

You also haven't indicated in the css that box1 and box2 belong to IDs

body {
	background: url('Background.jpg');
}
#box1 {
	position: absolute;
	left: 100px;
	top: 100px;
}
#box2 {
	top: 100px;
	position: absolute;
	right: 100px;
}

You can also use padding to control distance

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.