Forums

Roggers

Hey guys, I need some help centring 2 div's. I have them entered for my resolution, but when i check other resolutions I see that the gap between them enlarges. I want them to stay static and be touching each-other and centred.

Here is the css

#wrapper {
background-color:#ffffff;
border:solid;
border-color:#cccccc;
border-width:1px;
width:500px;
float: left;
  position: relative;
  top: 10%;
  left: 10%;

}

#NavWrapper {
background-color:#ffffff;
float: right;
width: 250px;
height:100%;
border-color:#cccccc;
border-width:1px;
border-style:solid;
position:relative;
left:-15%;
}

Thanks

xrmer

hi roggers

I'm sorry, I'm just don't understand what you want.


body {
    	 width: 800px;
  	 background: #e2e2e2;
    	 margin:auto;
}
#wrapper {
	 background-color:#ffffff;
	 border:solid 1px #ccc;
	 width:500px;
	 float: left;
  

}

#NavWrapper {
	 background-color:#ffffff;
	 float: right;
	 width: 250px;
	 border:solid 1px #ccc;
}

Roggers

Sorry I wasn't clear enough.

I'm kinda going for the effect of this website http://nettuts.s3.amazonaws.com/066_WordPressThemeFromScratch/files/index.html Can you see the two div's in the middle? I want mine like that. I have them positioned like that for my resolution but not others. I'm pretty sure I need to use %'s rather than px's

erikportin

Roggers: do you mean something like this? http://jsfiddle.net/NBYt4/.

If you want to make it flexible/responsive use percentage instead of px for widths

Roggers

Yeah erikportin thats very similar to what I want. I'll give it a go Thanks.

treehouse : what would you like to learn today?

Forums

Css positioning