• I’ve searched several threads looking for this answer and I still can’t make this work…

    I’m trying to make the input element resize with the screen and elements while keeping the outer elements fixed width.

    here is the page I’m trying to fix:
    http://www.jackrabbit.host

    here is an example of what I need:
    http://www.jackrabbit.host/images/resizeexample.jpg

    (I’m using media queries, this fix will be added to the appropriate media query)

    Here are the div ID’s I have for the elements (these are for the full width media query so the styles are incorrect for the narrow browser width):

    #home_domainchecker {
    
    	width: 648px;
    	padding:5px;
    
    	}
    
    #home_www {
    
    	margin: 10px 0px 0px;
    	position: absolute;
    	font-size: 18px;
    	}
    
    #home_domaininput {
    
    	margin: 0px 0px 0px 52px;
    	height:40px;
    	font-size:18px;
    	width:642px;
    	}
    
    #home_selector {
    
    	position:absolute;
    	margin: -40px 0px 0px 700px;
    	}
    
    #home_domainbutton {
    
    	position: absolute;
    	margin: -40px 0px 0px 805px;
    	width: 90px !important;
    	height: 40px;
    	font-size: 18px;
    	}

    and here is the html I’m working with:

    <div id="action" class="clearfix box padding-box">
    
    <form action="http://www.jackrabbit.host/high-speed-hosting/whmcsportal/domainchecker.php/?" method="post" id="home_domainchecker">
    	<input type="hidden" name="direct" value="true"/>
    		<div id="home_www">www.</div>
    			<input type="text" name="domain" size="20" placeholder="Choose a new domain" id="home_domaininput"/>
    				<div id="home_selector">
    					<select name="ext">
    						<option>.com</option>
    						<option>.net</option>
    						<option>.org</option>
    						<option>.us</option>
    						<option>.info</option>
    						<option>.biz</option>
    						<option>.uk</option>
    						<option>.name</option>
    						<option>.ca</option>
    						<option>.co</option>
    						<option>.eu</option>
    						<option>.co.uk</option>
    					</select>
    				</div>
    			<input type="submit" value="Go!" id="home_domainbutton"/>
    </form>
    </div>

    I’m sure it’s a simple fix but I’m not an expert. I appreciate the help in advance!

    – Clint

  • The topic ‘Resize center element, outer elements fixed width’ is closed to new replies.