Home/ Questions/Q 6779933
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T16:26:48+00:00

Hi I am having problems positioning several images. It is very important that max

  • 0

Hi I am having problems positioning several images. It is very important that max height of the site stays at approximately 580 pixels as I want to give the impression of a picture frame around the site. I have attached a picture to show how exactly the site is laid out and where I want to position my images in the top, middle and bottom divs. I do not want to have them as background images because I want to have some as links and I want to have some jquery animations (i.e. fadeIn and toggle) with the other images. This is a fluid layout but I do not want the vertical width to expand when the browser is at the min width of 780px, I also would like that the images are some what centred on the page.

I am still learning CSS so I have done the best I can but it is still out of position.

Thanks for your help

Site Layout Picture
Site Layout Picture

.container {
width: 100%;
max-width: 1096px;
min-width: 780px;
margin: 0 auto;}

.header {
background:#231f20;
height: 65px;
}

.sidebar1 {
padding: 0px;
float: left;
width: 65px;
background: #231f20;
margin: 0;
min-height: 450px;}

.sidebar2 {
float: right;
width: 65px;
background:#231f20;
margin: 0;
min-height: 450px;}

.main_content{
padding: 0px;
width: 80%;
float: left;
}

.footer {
height: 65px;
background:#231f20;
position: relative;
}

HTML

<body>
<div class="container">
    <div class="header"></div> 

    <div class="sidebar1"></div> 

    <div class="main_content"> 
        <div class="top"></div>
        <div class=”middle"></div> 
        <div class=”bottom"></div>
        </div> 
    <div class="sidebar2"></div>
 </div> 
 </body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add position: relative to all the containing div’s (you may have to set the height of them to the height of the tallest image also). Then position all the images something like:

    .img1 { /* or whatever class name works for you */
    position: absolute;
    left: 50%; /* this centers it, if you want thirds, us 33%, 66%, etc. */
    margin-right: -50px; /* note: 50px is an example, it needs to be half the width of your image width */
}
    • 0