troubleshooting Question

Element Positioning - NOT working

Avatar of edvinson
edvinsonFlag for United States of America asked on
4 Comments1 Solution164 ViewsLast Modified:
I have tried to break down this problem into multiple questions, but that did not work.

Quite simply, here is what I am trying to accomplish ( this is a PSD ):
and here is what my HTML/CSS looks like:
My Screwed up version
Obviously I am having problems with my POSITIONING.


<!DOCTYPE html>
<title>PSD to HTML</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<!-- This is our main center content box -->
<div id="container">
  <!-- Begin Header -->
  <div style="clear:both" id="header">
		  <img style="float:left" id="main-logo" src="images/logo.png"> 
    <span id="search-field-wrapper">
			<input size="40" type="text" id="search" name="search" placeholder="Search Tutorials"/>
  	  <img id="btn-search" src="images/btn-search.png" style="vertical-align: middle;">    </span> 
		  <span id="login-wrapper">
		  	<input type="text" id="username" name="username" placeholder="Username"/>
				<input type="text" id="password" name="password" placeholder="Password"/>
				<a href="#">Forgot Password</a>
		 <!-- This is the LOGIN button, although it says search, just haven't got
		      around to slicing it from PSD yet --> 
		 	<img id="btn-login" src="images/btn-search.png" style="vertical-align: middle;">    
<div style="clear:both"></div>
  <div style="clear:both"></div>
  <!-- End Header -->




[1] SITEWIDE	- General styles that apply to entire document
[2] HEADING 	- Site name, logo, search field, login username/password


body {
	background: #333 url('../images/body-rpt.jpg') repeat-x;
	color: #CCCCCC;

/* Links light so we can see them */
a {

/* Main Centered DIV. I have added a border
   just so I can see it while designing */
#container {
	margin-top: 20px;
	width: 945px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	border: 1px solid #FFFFFF;	

/* Round the corners of the input boxes */
#header input[type=text]
  	-moz-border-radius: 6px;
 	border-radius: 6px;
    border:solid 1px black;
	height: 12px;

/* Add some space between the search button
   and the search textfield */
#btn-search {
	margin-left: 10px;

/* !!!!!!!!!! POSSIBLE HELP NEEDED HERE ???? !!!!!!!!!!!
*  I needed to preciselt position this text field, so I
*  chose to use ABSOLUTE positioning. NOT SURE if this is
*  the correct way.
	position: absolute;
	left: 397px;
	top: 31px;	

/* !!!!!!!!!! POSSIBLE HELP NEEDED HERE ???? !!!!!!!!!!!
*  As above, I neded to position these text fields in
*  a precise spot. I don't know if this is the best way???
	position: absolute;
	float: right;
	left: 752px;
	top: 7px;


My Site so far ( not working as intended )

Can someone please help me conquer this? I just want to get everything to line up. And understanding the solution would be a bonus!
Ishaan Rawat
Designer | Developer | Programmer

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 4 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros