Forums

brianatlarge

So I've got this page: http://stuckpixelstudio.com/sandbox/troubleshooting/example.html.

For some reason when you scale the browser window down, weird things start happening. I'm pretty sure it's because I don't completely understand relative positioning, because up until now I've been using absolute positioning. I just can't figure out why this is happening.

If you'll notice, the top green bar behaves the way I would like for the rest of the page to behave, where when it reaches the left side it stops and the right side gets covered up by the rest of the window, however, the rest of my content does not behave this way.

I also have a LOT of white space that shows up at the bottom. Not sure why that is either.

Also, I can't figure out for the life of me how to get the "Showing 1-10 of 20" to be on the left side, and the "Sort by" to be on the right side and still look right. Any time I've made this happen, the Sort by looks like it's trying to be on a new line.

Here's my HTML:

	<body>
	
<div class=\"everything\">
<div class=\"searchbox\"><form action=\"#\"> <div>
						<input type=\"text\" name=\"firstname\"/>
						<input type=\"submit\" name=\"mysubmit\" value=\"Search\"/></div>  
					</form>
</div>

<div class=\"logobox\"></div>
<div class=\"adbanner\"><img src=\"#\" alt=\"top ad\"/></div>


<br/>

<div class=\"refine\"><span class=\"resultnumber\">Showing 1-10 of 20</span>
Sort By: <select>
  	<option>Restaurant: A to Z</option>
  	<option>Restaurant: Z to A</option>
  	<option>Discount</option>
	<option>Kind</option>
	<option>Distance</option>
</select>
</div>
<div class=\"adbox\"><img src=\"#\" alt=\"box ad\"/></div>

<div class=\"contentbox\">Lorem Ipsum
</div><br/>

<div class=\"contentbox\">Lorem Ipsum
</div><br/>

<div class=\"contentbox\">Lorem Ipsum
</div><br/>

<div class=\"contentbox\">Lorem Ipsum
</div><br/>

</div>
	</body>

And here's my CSS:

body 
	{
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size:12px;
	}
	
.everything
	{
	background:url(images/bg.jpg);
	background-position: center top;
	background-repeat:repeat-y;
	margin:-8px auto; 
	}
	
.searchbox
	{
	background:url(images/topgreen.jpg);
	background-repeat:no-repeat;
	height:30px;
	width:999px;
	text-align:right;	
	padding: 3px 50px 0px 0px;
	background-position: center top;
	margin:0px auto; 
	}
	
	
.logobox
	{
	background:url(#);
	position:relative;
	left:-370px;
	width:175px;
	min-height:135px;
	background-position: center top;
	margin:0px auto; 

	}

.adbanner
	{
	position:relative;
	top:-120px;
	left:95px;
	min-height:90px;
	width:730px;
	background-position: center top;
	margin:0px auto; 

	}


.adbox
	{
	position:relative;
	top:-90px;
	left:300px;
	min-height:240px;
	width:300px;
		background-position: center top;
	margin:0px auto; 

	}
	
.contentbox
	{
	position:relative;
	left:-165px;
	top:-340px;
	width:560px;
	min-height:100px;
	padding: 5px;
	
		background-position: left top;
	margin:0px auto; 

	}
	
.floatleft { 
	float: left;
	margin: 0px 10px 10px 0px;
	}	
	
.refine
	{
	background-color:#eeeeee;
	position:relative;
	top:-100px;
	left:0px;
	text-align:right;
	min-height:25px;
	width:890px;
	padding:5px;
	background-position: center top;
	margin:0px auto; 
	}
	

.resultnumber
{text-align:right}

Thanks guys.

chriscoyier

Looks like you are making your layout much more complicated than it needs to be. You should give that "everything" div a static width and some padding, then all it's decendents can live inside of it without the need for all that crazy positioning. That will solved your green bar problem, anyway. I would advise getting more comfortable using floats for positioning as well, that is how you will be able to solve your "showing" and "sort by" issue.

daGUY

Yeah, I'm sure it's all the relative positioning with negative values that's making things screwy. Your design could easily be accomplished with floats and it would prevent all of these issues. I'll admit floats are weird to work with at first, but once you get used to it they start to make sense :lol:

For your design I would do something like this (really simple, just as an example):

<div id=\"container\">
     <div id=\"top_bar\"></div>
     <div id=\"banner\"></div>
     <div id=\"content\">
          <div id=\"sort_by\"></div>
          <div id=\"column_left\">
               <div class=\"article\">Lorem Ipsum</div>
               <div class=\"article\">Lorem Ipsum</div>
               <div class=\"article\">Lorem Ipsum</div>
               <div class=\"article\">Lorem Ipsum</div>
          </div>
          <div id=\"column_right\">
               <div class=\"box_ad\"></div>
          </div>
     </div>
</div>

Float .column_left and .column_right to the left, put some padding on #content to create the space from the edge and you're pretty much done :P

treehouse : what would you like to learn today?

Forums

Weird window scaling issue