I've taken on the responsibility of creating a website for my church since there are no web programmers among our members. However, I'm facing an issue with layout. My goal is to position an image in the top-left corner of the page, but every attempt I make seems to disrupt other elements within the div. Here is the current CSS code:
body {
background-color: #FFFFFF;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#wrapper {
width: 90%;
background-color:#ffffff;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid blue;
}
div#image {
padding: 15px;
margin: 0px;
float: left;
}
div#header {
padding: 15px;
margin: 0px;
text-align: center;
}
div#nav {
width: 25%;
padding: 10px;
margin-top: 100px;
float: left;
}
div#main {
margin-left: 30%;
margin-top: 100px;
padding: 10px;
}
div#footer {
padding: 15px;
margin: 0px;
border-top: thin solid blue;
text-align: center;
}
Regardless of how I configure the image div, it causes misalignment with the main, navigation, and header divs. Even when I try placing the image within another div, it still creates movement.
I'm looking for a solution where the page is centered with 90% width, all enclosed within the wrapper div, while also having the image positioned in the top-right corner. If this requires a different approach, I would appreciate any assistance in figuring it out. A solution that works across various browsers is crucial for seamless functionality among users.