Member Avatar for davy_yg

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?

  • 4 Contributors
  • 3 Replies
  • 76 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by tqmd1

Recommended Answers

All 3 Replies

Member Avatar for aquilawebs

Assign Width to each box may be that would help.

Edited by Ezzaral because: Snipped fake sig.
Member Avatar for Dandello

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;
}
Member Avatar for tqmd1

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.