Member Avatar for davy_yg

frontpage.css

(Toggle Plain Text)
body {
	background: url('Background.jpg');
}
box1 {
	position: absolute;
	left: 100px;
	top: 100px;
}
box2 {
	top: 100px;
	position: absolute;
	right: 100px;
}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?

Edited by davy_yg because: n/a
  • 3 Contributors
  • 2 Replies
  • 111 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by lps
Member Avatar for phfilly

Your problem is that in your php file you declare your box1 and 2 as id's but you never use them in your actual style sheet!

So in your stylesheet it should be

#box1 {
	position: absolute;
	left: 100px;
	top: 100px;
}
#box2 {
	top: 100px;
	position: absolute;
	right: 100px;
}

Remember the "#" sign in order to connect to your id's. Then also just a pointer- don't use "px" cause it will differ on everyone's screens! use the "%" value...

Hope I could help a bit!:D

Member Avatar for lps

I think you should probably start to try some example through W3school. As for the basic, # stand for id and . stand for class. If you assign id for your box1 element, then you should put #box1 in css. Moreover, by controlling left and right is not the best way, you can try float:left and float:right.

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.