Im a newbie in css and Im having trouble centering two divs. I have a 1920 x 1080 screen resolution and using margin will not center the two divs if the visitor of my website have lower resolution. I know it will moved, right?
Details:
Please take a look at my problem here ---> http://i1204.photobucket.com/albums/bb409/bendaggers/help.png
- Div id = Topwrapper
- Div id = MainWrapper: holds the container and sidebar (gray)
- Div id = Container (yellow green)
- Div id = Sidebar (blue)
I have no problem with the Topwrapper, as you can see, it is in the center position but my very big problem is the Container and Sidebar. I cant align it with the Topwrapper. can you help me code? Another thing, can you please consider the screen resolution, as far as i know, my Mainwrapper code will adjust its width because of the min-width=1000px;
If you think you have a better idea with my codes, please feel free to revise it.
<div id="TopWrapper"></div>
<div id="MainWrapper">
<div id="Content"></div>
<div id="Sidebar"></div>
</div>
#MainWrapper {
height:3000px;
min-width:1000px;
background-color:#CCC;
}
#TopWrapper {
background-image:url(images/topwrapper.png);
background-repeat:no-repeat;
background-position: center bottom;
min-width:100%;
height:77px;
margin: 0;
}
#Content {
height:3000px;
min-width:630px;
background-color: #0F0;
float:left;
margin-left:150px;
display:inline;
}
#Sidebar {
height:3000px;
min-width:350px;
background-color: #00F;
margin-left:20px;
float:left;
display:inline;
}
Thank you very much in advance!