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
  • 121 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by lps

Dani AI

Generated

Quick diagnosis: the stylesheet in the first post uses bare names like box1/box2 (element selectors) while the HTML declares id attributes. As observed, those rules never match the div elements, so the images render as normal block elements and stack. was also correct to suggest float-based layouts, but absolute positioning has important caveats (it removes elements from the normal flow and can create overlap or unexpected stacking if the intended rules are not applied).

Checklist for troubleshooting and fixing:

  1. Confirm the CSS file is actually linked in the document head and the path is correct.
  2. Verify selectors match the HTML (id vs class) and watch for typos or case differences in XHTML/XML contexts.
  3. Use browser Developer Tools (Inspector) to see which rules are applied or overridden; a syntax error earlier in the stylesheet can prevent later rules from taking effect.
  4. Avoid file names with spaces (e.g., rename Customer Goods.jpg), and ensure images have alt attributes and display:block on the image if whitespace between inline elements is an issue.

A modern, simpler approach instead of absolute positioning is Flexbox. Example layout that places two boxes side-by-side with 100px of inset spacing:

<div class="row">
  <div class="panel"><img src="customer-goods.jpg" alt=""></div>
  <div class="panel"><img src="industry.jpg" alt=""></div>
</div>

.row {
  display: flex;
  justify-content: space-between;
  padding: 100px;
}

.panel img { display: block; max-width: 100%; height: auto; }

Notes: pixels are fine for precise spacing, but responsive layouts often benefit from percent, vw, or rem units. For reference on positioning and layout options, see MDN’s guides on the position property and the Flexbox basics.

Recommended Answers

All 2 Replies

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.