CODEWITHSUNDEEP
css
MrThunder
MrThunder

Reputation: 745

positioning multiple images in various places around the page

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>

Upvotes: 0

Views: 8238

Answers (2)

ScottS
ScottS

Reputation: 72261

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 */
}

Upvotes: 1

Blazemonger
Blazemonger

Reputation: 92893

Try adding clear: both; to the CSS for the .footer. This will force it to the bottom of the "picture frame".

Upvotes: 0

Related Questions