How can i achieve this layout? divs inside divs

HTML & CSS
1

Hi everyone,
I m newbie in web designing. I am trying to create a layout like this
ImageShack® - Online Photo and Video Hosting

But i m having difficulties in giving the position,height,float and display properties to the divs.
Please notice that there are image borders on the left and right sides of the content and bottommargin divs.

Thanks in advance.

2

Hi quanquul. Welcome to SitePoint. :slight_smile:

Most of that layout should be easy to do. It’s jut the white lines down each side that are a bit impractical, but they can still be done. Could you post what you have so far?

Is this to be a fixed-width design? That would make the white lines easier. What do you picture happening if the bottommargin bit grows in height (in terms of the white lines)? Or does it remain a fixed height?

3

Thank you so much for your answer.
i have tried these in my css and i got the following screenshot. i think there s a problem with the bottommargin’s border because its overlapping.

.content{
position:absolute;
height:auto;
top:0;
width:1040px;
left:50%;
margin-left:-520px;
margin-top:335px;
background:url(images/maincontentsprtr.png) repeat-y;


}

.container {
     position:relative;
     top:50px;
     width: 800px;
     margin-left:60px;
     margin-right:60px;
     visibility: visible;
}


.gallery{
     float:left;
     width:350px;
     height:100%;    
     background-color:#0F3;
}

.details{
     float:left;
     margin-left:50px;
     margin-bottom:20px;
     width:400px;
     font-family:"Calibri";
     font-size:14px;
     background-color:#900;
    
     }

.technicaldetails{
     width:800px;
     z-index:-99;
     left:0px;
     background-color:#CCC;
     }


.bottommargin{
     background:url(../images/maincontentsprtr_end.png);
     width:1040px;
     height:100px;
     margin-left:-60px;
     }

http://img823.imageshack.us/img823/2629/bottmmarg.jpg

4

Hi,

That’s not much use to use without the html that goes with it but I can see from the css that you are going the wrong way about this anyway.

Forget absolute positioning and relative positioning for structural layouts layouts as mostly you will need static containers and floated containers with a small smattering of absolute elements if necessary.

To centre a static element just give it a width and use auto margins and it will be centred horizontally.

For the 2 columns you just need two floats of appropriate width and then you set the technical details section underneath to clear:both and it will start below.

The content and footer then just follow n the flow without having to do anything special. Avoid heights on containers that will hold fluid content such as text and let the content dicatate the flow.

In reality you should start with the actual content before you construct the page because in most cases that will determine the tags that you will use and the way that the page should be structured. Your layout is then applied to this html structure although it will need to be amended for some certain constructs but it really shuld be the starting point.

I’ve knocked up a quick example based on your picture to show how you should tackle this. Just view source as the code is in the head for ease of viewing but should be in an external css file when done for real.

5

thank you so much for your help. it works like a charm!